Variant image behavior

Store UI, layout, design, look and feel; Discussion on the customer facing pages of your online store. Cascading Style Sheets, Themes, Scriptlets, NVelocity and the components in the ConLib directory.
Post Reply
User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5170
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Variant image behavior

Post by AbleMods » Sun Mar 16, 2008 10:18 am

Would someone who has some variant setups mind checking something for me?

There are two display options for a variant setup, Swatches or No Swatches.

Take a variant you have the DOES use swatches and Uncheck the swatches checkbox. Then preview the product.

Does the product image change when you select a variant from the dropdown? It's a dropdown now because the swatches checkbox is off. That makes sense.

But I swear the product image changed whether the variant selection was a swatch or a dropdown. My system isn't changing the image on dropdown variant setups, only if the swatches checkbox is checked.

Shouldn't the product image change (if a variant image is specified) regardless of whether I use swatches or a dropdown to make my selection?
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

User avatar
satori
Lieutenant (LT)
Lieutenant (LT)
Posts: 64
Joined: Mon Jun 26, 2006 1:04 am
Location: Colorado Rockies above Boulder
Contact:

Post by satori » Sun Mar 16, 2008 9:13 pm

Yes, my cart doesn't update the images if I do not have swatches checked. It has never worked with dropdowns for me. I would like it to though!

User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5170
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Post by AbleMods » Tue Mar 18, 2008 4:29 am

Ok thank you for confirming.
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

User avatar
KullySupply
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 28
Joined: Wed Feb 20, 2008 10:50 am
Contact:

Post by KullySupply » Tue Mar 18, 2008 12:31 pm

I too encountered this problem. I had to add some custom code to make it work:

App_Code/ProductHelper.cs -> BuildProductOptions function:

Code: Select all

// Notice the extra variable "PlaceHolder phProductImage"
public static Dictionary<int> BuildProductOptions(Product product, PlaceHolder phOptions, PlaceHolder phProductImage)
{
Within the BuildProductOptions function:

Code: Select all

// SEE WHETHER A VALID VALUE FOR THIS FIELD IS PRESENT IN FORM POST
string selectedValue = request.Form[aspOptions.UniqueID];
if (!string.IsNullOrEmpty(selectedValue))
{
    ListItem selectedItem = aspOptions.Items.FindByValue(selectedValue);
    if (selectedItem != null)
    {
        int val = AlwaysConvert.ToInt(selectedValue);
        if (val != 0)
        {
            selectedChoices.Add(option.OptionId, val);
            selectedItem.Selected = true;
            
            // ----------------------------------------------------------------------> Custom
            OptionChoiceCollection availableOptions = OptionChoiceDataSource.GetAvailableChoices(product.ProductId, option.OptionId, selectedChoices);
            foreach (OptionChoice optionOption in availableOptions)
            {
                //Change image if necessary
                if(!string.IsNullOrEmpty(optionOption.ImageUrl)) {
                    phProductImage.Controls.Clear();
                    phProductImage.Controls.Add(new LiteralControl("<img src=\"" + page.ResolveUrl(optionOption.ImageUrl) + "\" />"));
                }
            }
            // ----------------------------------------------------------------------> End Custom
        }
    }
}
I created a custom ConLib which contains placeholders for the product image and options menu. I did this using elements from the BuyProductDialog and ProductImage ConLib files.

ConLib/Custom/Product.aspx.cs (Page_Init function):

Code: Select all

//BUILD PRODUCT ATTRIBUTES
_SelectedOptions = KullyHelper.BuildProductOptions(_Product, phOptions, phProductImage);
//BUILD PRODUCT CHOICES
ProductHelper.BuildProductChoices(_Product, phOptions);
Also notice above "KullyHelper.BuildProductOptions" ... I created a separate file in the App_Code folder which I add my custom functions to. This way I can keep all custom functions separate from the original helper files.

I hope I didn't leave anything out. Here's the code in action (keep in mind, our store is not live and still has a long ways to go!):
http://www.kullysupplyinc.com/Generic-F ... 64C18.aspx

It's kind of annoying how the table bounces when the image changes. It would help if all my images were the same width.

User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5170
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Post by AbleMods » Wed Mar 19, 2008 8:28 pm

That's completely awesome code you posted, thanks so much!

I will see how I fare in getting mine to do the same thing.

By the way, I use a nifty little $20 program that batch resizes image files, converts them on-the-fly and even resizes the canvas of the image. Works wonders for getting a bunch of odd-sized images consistent for a website.

http://www.softorbits.com/
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5170
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Post by AbleMods » Thu Mar 20, 2008 9:28 pm

Ok I figured mine out without having to modify ProductHelper

Just wrap the ProductImage placeholder in an AjaxPanel like this:

Code: Select all

<ajax:UpdatePanel ID="ImageAjax" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <asp:PlaceHolder ID="phProductImage" runat="server"></asp:PlaceHolder>
    </ContentTemplate> 
</ajax:UpdatePanel> 
Then you can manipulate it right in Page_PreRender of the BuyProductDialog user control:

Code: Select all

            if (allProductOptionsSelected && productVariantId != 0)
            {
                OptionChoice _OptionChoice = OptionChoiceDataSource.Load(ProductVariantDataSource.Load(productVariantId).Option1);
                if (_OptionChoice.Option.ShowThumbnails == false)
                {
                    PlaceHolder phProductImage = (PlaceHolder)PageHelper.RecursiveFindControl(this.Parent, "phProductImage");
                    UpdatePanel AJImagePanel = (UpdatePanel)PageHelper.RecursiveFindControl(this.Parent, "ImageAjax");
                    string _ImageURL = _OptionChoice.ImageUrl;
                    string _ImageAltText = _Product.ImageAltText + " (" + _OptionChoice.Name + ")";
                    phProductImage.Controls.Clear();
                    phProductImage.Controls.Add(new LiteralControl("<img id=\"ProductImage\" src=\"" + Page.ResolveClientUrl(_ImageURL) + "\" border=\"0\" alt=\"" + Server.HtmlEncode(_ImageAltText) + "\" />"));
                    AJImagePanel.Update();
                }
            }
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

User avatar
mfreeze
Commodore (COMO)
Commodore (COMO)
Posts: 421
Joined: Mon Jan 24, 2005 2:07 pm
Location: Washington, NJ
Contact:

Re: Variant image behavior

Post by mfreeze » Mon Jun 23, 2008 10:45 am

Joe,

I put the Ajax panel code in the ProductImage.ascx but where did you put your code in the BuyProductsDialog code? I can't seem to figure out where to put it.
Mary E Freeze

Freeze Frame Graphics
Web Hosting and Design, ASP and CFMX Development

http://www.ffgraphics.com

User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5170
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Re: Variant image behavior

Post by AbleMods » Mon Jun 23, 2008 11:28 am

Hmmm haven't looked at that code in quite a while. I'm not sure what I was thinking when I posted the code snippet above - might have been a late night :)

I've denoted where my mods start and stop with the BEGIN: Solunar Mod comment lines.

Here's the first section of my page_PreRender():

Code: Select all

    protected void Page_PreRender(object sender, EventArgs e)
    {
        //GET THE SELECTED KIT OPTIONS
        GetSelectedKitOptions();
        string optionList = ProductVariantDataSource.GetOptionList(_ProductId, _SelectedOptions, true);
        //SET THE CURRENT CALCULATED PRICE
        OurPrice.Product = _Product;
        OurPrice.OptionList = optionList;
        OurPrice.SelectedKitProducts = _SelectedKitProducts;
        bool allProductOptionsSelected = (_SelectedOptions.Count == _Product.ProductOptions.Count);
        bool requiredKitOptionsSelected = ProductHelper.RequiredKitOptionsSelected(_Product, _SelectedKitProducts);

        //BEGIN: Solunar Mod
        // DETERMINE THE PRODUCT VARIANT ID
        int productVariantId = ProductVariantDataSource.GetProductVariantId(_ProductId, _SelectedOptions, true);
        if (allProductOptionsSelected && productVariantId != 0)
        {


            OptionChoice _OptionChoice = OptionChoiceDataSource.Load(ProductVariantDataSource.Load(productVariantId).Option1);
            if (_OptionChoice.Option.ShowThumbnails == false)
            {
                PlaceHolder phProductImage = (PlaceHolder)PageHelper.RecursiveFindControl(this.Parent, "phProductImage");
                UpdatePanel AJImagePanel = (UpdatePanel)PageHelper.RecursiveFindControl(this.Parent, "ImageAjax");

                string _ImageURL = _OptionChoice.ImageUrl;
                string _ImageAltText = _Product.ImageAltText + " (" + _OptionChoice.Name + ")";
                if (!string.IsNullOrEmpty(_OptionChoice.ImageUrl))
                {
                    phProductImage.Controls.Clear();
                    phProductImage.Controls.Add(new LiteralControl("<img id=\"ProductImage\" src=\"" + Page.ResolveClientUrl(_ImageURL) + "\" border=\"0\" alt=\"" + Server.HtmlEncode(_ImageAltText) + "\" />"));
                    AJImagePanel.Update();
                }
            }
        }
        //END: Solunar Mod

        InventoryManagerData inv = null;

        //SHOW SUBSCRIPTIONS
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

drollins
Lieutenant (LT)
Lieutenant (LT)
Posts: 79
Joined: Thu Oct 04, 2007 9:23 am
Location: West Hartford, CT
Contact:

Re: Variant image behavior

Post by drollins » Thu Aug 21, 2008 5:54 am

The ajax example works perfectly - very clean - thank you!
David Rollins
SDC Solutions, Inc.
Information Management, Web Site and Intranet Solutions
http://www.sdcsol.com
http://www.rhinogift.com

krittleb
Commander (CMDR)
Commander (CMDR)
Posts: 111
Joined: Tue Jan 06, 2009 11:27 pm

Re: Variant image behavior

Post by krittleb » Fri Feb 13, 2009 10:26 am

From what I can deduct, the code described above will allow the option of defining swatches to variants, but not actually displaying the swatches and utilizing a drop-down instead. When an option is selected from the drop-down, the main image will change according to the swatches built-in.

What I need is to have both the drop-down AND the swatches show. When a drop-down item is selected, the main image will change or when a swatch is clicked, the main image will change as well. I think that this is workable by using the same variant options in two different variant set-ups. However, the kicker is that I need them to be inter-dependent where when a swatch is clicked, it automatically "selects" the same option in the drop-down so that the customer can choose their colors by the swatches or by the drop-down.

Would a modification of the above code be able to do this? I think the only change would be that BOTH the drop-down and swatches would need to show and that clicking a swatch would select the matching variant in the drop-down.

Please let me know if this is feasible!

Thanks
Kristi

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Variant image behavior

Post by mazhar » Fri Feb 13, 2009 11:54 am

krittleb wrote:From what I can deduct, the code described above will allow the option of defining swatches to variants, but not actually displaying the swatches and utilizing a drop-down instead. When an option is selected from the drop-down, the main image will change according to the swatches built-in.

What I need is to have both the drop-down AND the swatches show. When a drop-down item is selected, the main image will change or when a swatch is clicked, the main image will change as well. I think that this is workable by using the same variant options in two different variant set-ups. However, the kicker is that I need them to be inter-dependent where when a swatch is clicked, it automatically "selects" the same option in the drop-down so that the customer can choose their colors by the swatches or by the drop-down.

Would a modification of the above code be able to do this? I think the only change would be that BOTH the drop-down and swatches would need to show and that clicking a swatch would select the matching variant in the drop-down.

Please let me know if this is feasible!

Thanks
Kristi
Most probably this change will effect the ProductHelper class. The function BuildProductOptions(Product product, PlaceHolder phOptions) is building swatches or drop downs. You need to change the method in a way that it adds both swatches and drop down lists.

KreftB
Ensign (ENS)
Ensign (ENS)
Posts: 11
Joined: Thu Jun 11, 2009 8:56 am

Re: Variant image behavior

Post by KreftB » Fri Jun 12, 2009 11:08 am

Joe,

Code works great! One question...When I have multiple options for a product, I need the image to update based on the the option combination. As I implemented it, the codes works as needed for single option images just fine. If I copy/paste (repeat) the code block and substitute "Option 1" for "Option 2", the effect is what I'm looking for to happen, but then when I go back to a single option product, the update errors out probably because there isn't an "Option 2" for said product.

In short, I need help making the image change in a similar fashion as the SKU# changes when a option is selected. I have a single image associated with every option. Any suggestions?

Thanks,

Ben

KreftB
Ensign (ENS)
Ensign (ENS)
Posts: 11
Joined: Thu Jun 11, 2009 8:56 am

Re: Variant image behavior

Post by KreftB » Fri Jun 19, 2009 9:01 am

One quick thought...I think that I could achieve what I am trying to do by constructing a conditional statement basically stating "if Option 1 is selected...run the script as Joe posted, else if option 2 is selected, run the code that Joe posted". I can conceptulize this but am having trouble coding it. Any suggestions?

Thanks again,

Ben K

cswebtech
Ensign (ENS)
Ensign (ENS)
Posts: 13
Joined: Wed Aug 12, 2009 11:10 am

Re: Variant image behavior

Post by cswebtech » Wed Aug 12, 2009 11:50 am

Help! I'm trying to implement this but having no luck. Maybe I didn't put in the right code? I've put everything in and its not changing my picture when I select a variant.

I also implemented the "mouseover" image code too. Would that make this not work?

Or can someone post a single message with all the changes I need to do here? maybe I got confused with all the messages and what to change.
Thanks

jdarby
Commander (CMDR)
Commander (CMDR)
Posts: 151
Joined: Thu Sep 25, 2008 2:21 pm

Re: Variant image behavior

Post by jdarby » Mon Jan 14, 2013 3:55 pm

solid fix. Just implemented the ajax change and my main images are changing based on the variant's image.

thanks for this, Able really needed it.

Post Reply