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.
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.
First, make a back up of your ~/ConLib/ folder.
Edit your ~/ConLib/Minibasket.ascx.cs and replace the entire GetIconUrl function with this 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);
else if (!string.IsNullOrEmpty(_TVar.ImageUrl))
Next, add this line to the top of the file:
Now edit your ~/ConLib/Basket.ascx.cs file and replace the entire ShowProductImagePanel function with this 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)
Finally, edit the ~/ConLib/Basket.ascx file and find this line:
|<asp:Image ID="Thumbnail" runat="server" AlternateText='<%# Eval("Product.Name") %>' ImageUrl='<%#Eval("Product.ThumbnailURL")%>' EnableViewState="false" />|
and replace it with this line:
|<asp:Image ID="Thumbnail" runat="server" AlternateText='<%# Eval("Product.Name") %>' ImageUrl='<%#ProductImage(Container.DataItem)%>' EnableViewState="false" />|
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.
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