Show the product image for the selected variant

by Joe Payne 12. February 2008 00:25
Introduction
When a product is added to the basket, an image is displayed along with the item details. However, adding a variant option does not display the variants image, it displays the main product image. This can be confusing to customers who ordered a Red shirt and the basket shows them the green shirt. This modification forces the MiniBasket and Basket pages to show the variant image.

This modification assumes AC7 RC2.

Requirements
For these modifications to work, you must always have your swatch variant as the first set of choices. Any number of choice sets are allowed, but the first set must be the swatches. For non-swatch variants or if the first choice set does not contain an image URL, the main product image will always be displayed.
The code uses the "Thumbnail" URL from the variant choices setup page to display the swatch in the minibasket. What this means is you are going to have to use icon-sized swatches. There's no swatch field for icon, so put your icon URL in the thumbnail swatch field. This is because the minibasket doesn't like images that aren't "mini", hence the name.

File Changes

First, make a back up of your ~/ConLib/ folder.

Edit your ~/ConLib/Minibasket.ascx.cs and replace the entire GetIconUrl function with this code:

Code:
    protected string GetIconUrl(Object obj)
    {
        BasketItem bitem = obj as BasketItem;
        if (bitem != null)
        {
            //We've got a valid basket item.  Now let's see if we should show the product image
            //or the variant image.
            if (bitem.ProductVariantId != 0)
            {
                //Variant detected.  Load the first option that has an image URL and return it
                OptionChoice _TVar = OptionChoiceDataSource.Load(bitem.ProductVariant.Option1);
                if (!string.IsNullOrEmpty(_TVar.ThumbnailUrl))
                {
                    return _TVar.ThumbnailUrl;
                }
                else if (!string.IsNullOrEmpty(_TVar.ImageUrl))
                {
                    return _TVar.ImageUrl;
                }
                else
                {
                    return bitem.Product.ImageUrl;
                }


            }
            else
            {
                if (!string.IsNullOrEmpty(bitem.Product.IconUrl))
                {
                    return bitem.Product.IconUrl;
                }
                else if (!string.IsNullOrEmpty(bitem.Product.ThumbnailUrl))
                {
                    return bitem.Product.ThumbnailUrl;
                }
                else
                {
                    return bitem.Product.ImageUrl;
                }
            }
        }
        return "";
    }


Next, add this line to the top of the file:
using CommerceBuilder.Products;

Save it.

Now edit your ~/ConLib/Basket.ascx.cs file and replace the entire ShowProductImagePanel function with this code:

Code:

    protected bool ShowProductImagePanel(object dataItem)
    {
        BasketItem item = (BasketItem)dataItem;
        return ((item.OrderItemType == OrderItemType.Product) && (!string.IsNullOrEmpty(item.Product.ThumbnailUrl)));
    }

    protected String ProductImage(object dataItem)
    {
        BasketItem item = (BasketItem)dataItem;
        if (item.ProductVariantId != 0)
        {
            // Basket item has variants.  If the first variant choice has an image URL,
            // use it instead of the regular product image.
            OptionChoice _Tvar = OptionChoiceDataSource.Load(item.ProductVariant.Option1);
            if (_Tvar.ThumbnailUrl != "")
            {
                return _Tvar.ThumbnailUrl;
            }
            else
            {
                return item.Product.ThumbnailUrl;
            }
       
        }
        else
        {
            return item.Product.ThumbnailUrl;
        }
    }


Save it.

Finally, edit the ~/ConLib/Basket.ascx file and find this line:
Code:
<asp:Image ID="Thumbnail" runat="server" AlternateText='<%# Eval("Product.Name") %>' ImageUrl='<%#Eval("Product.ThumbnailURL")%>' EnableViewState="false" />


and replace it with this line:

Code:
<asp:Image ID="Thumbnail" runat="server" AlternateText='<%# Eval("Product.Name") %>' ImageUrl='<%#ProductImage(Container.DataItem)%>' EnableViewState="false" />


Save it.

What Just Happened
What you've done is modified the minibasket and basket pages to test to the items in the basket. If the item has a variant, the page will look up the selected variant and retrieve the image specified. If the first set of variant choices does not have an image URL, the product image is used instead.

Conclusion
I am still extensively testing this modification. Please do the same yourself and report any issues here. I will make the necessary changes to the post if any problems arise. Now, if anyone has any hand sanitizer, I'd really like to get this C-Sharp off my hands and get back to my VB programming

 

 

Tags: , ,

AC7 Articles

Variants Explained

by Joe Payne 28. January 2008 00:12

For those of us who are just getting into the world of ecommerce software products, the term Variants may be somewhat new. The intent of this article to provide some clarity and save you some time discovering what Variants can and cannot do. This is a work-in-progress so check back or subscribe to it.

Explanation
Variants are a way to present the visitor with choices about a particular product for sale. These choices can be presented as either a dropdown box or as graphical images called "swatches".

Variants versus Kits
Variants differ from kits in such they do not require other product records to be created. A single product record with variants can represent literally dozens of different SKUs. This makes management of several like products much easier and more centralized, but it comes with a tradeoff. It's also important to note that while Kits can do radio buttons, checkboxes etc, they cannot do swatches. If you are "into" the swatches, you must use variants. Finally, variants only allow one selection per group of choices. Kits can have multiple selections which gives them an incredible level of flexibility.

Variants Example
Clothing or Apparel products are the ideal use for variants. Let's take the example of a Lifejacket. Yes, it just so happens that I sell lifejackets so this is my shameless effort at plugging my store. It also makes a great example for variants.
My lifejacket is a fancy one. It's actually a winter coat AND a life jacket. That means it's not only going to have choices for size but also choices for color. Here's the URL to product:
http://www.solunar.com/Mustang-Classic-Float-Coat-P2585.aspx

As you can see, I've chosen to use swatches for one option (Color) and the drop down for the other option (Size). Choosing a swatch will present the visitor with the second choice group for Size. Once both choices are selected, the final SKU, price etc will all be determined and the Add-to-Basket button becomes available.
Note that the Price and quantity available update as each variant is selected, however the Item # does not update. This will probably be fixed in a future release.

Variant Options
Note the term "Option": That's how Able refers to a collection of choices. A single "Option" will contain multiple "Choices", of which only one can be selected. AC7 gives the user a nifty interface to manage of all the possible combinations of the option groups you've created. This is known as the "Variant Grid".

Variant Grid
The Variant Grid is where you can see all your possible variations for the choices you've created. AC7 automatically builds the complete grid for you based on all the choices of the option groups you created.
That means, set up all your option groups and choices first and then choose "Manage Variants". Otherwise, you'll lose any changes you made to the variants grid when you add another choice. Sorry, that's just the way it works right now.

Variants and Inventory
Since variants do not have a separate product record, inventory is managed within the variant grid or on the product record itself. You need to maintain each variations in-stock quantity, weight, price, cost and other values. Notice you cannot keep separate packaging dimensions on the variants grid - variants assumes all variations are the same dimensions as the product the variants are created for.
You have two options for the actual inventory values of Variants. You can choose to have a single in-stock quantity amount and use the product record value, or maintain separate inventory amounts for each variation possible from your choices. This is easily changed on the main product screen with the Inventory Mode pulldown.

Variants and Feeds
Since variants are not separate product records, all variants will have the same URL. You may at some point discover that variants are not included in the AC7 feed uploads. My secret expert contact in the ECommerce world (Judy) has explained that you wouldn't want variants included in those feeds.
The reason is important: you could get some negative results from the search engine by uploading many differently described products with the exact same URL. Kits don't have to worry about this situation because they require separate product records.

Variant Sort Order
You can easily control the order in which variants are displayed in either the swatch mode or dropdown mode. Edit the specific choice group you want to change and use the green arrows to move an entry up or down as necessary.

Displaying All Variants
By now you have noticed that not all the variants display at the same time. The visitor must choose the first variant before the next will appear. Able is aware of the need for having all variant groups display at the same time, however the programming is difficult. That's because each variant could conceivably change the next variants possible choices.

Advanced Variants
A really nifty feature is the ability to disable specific variations. Let's use fishing reels as an example. You might have a reel that comes in three models (Model) and is built for left-hand or right-hand operation (Crankside). But wait, they don't make a Model 300, left-handed fishing reel; The Model 300 only comes in a right-handed version.
In the Variants Grid, you can uncheck the "Avail" column for that particular variation to eliminate it from the displayed choices. It's still in the variant list because it was auto-created, but it will no longer be a possible choice to the visitor.

Conclusion
Variants are a fantastic way to offer product selection choices in a creative way. Knowing their strengths and weaknesses can help you close more sales and make product management much easier.

Tags: , ,

AC7 Articles

Month List