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: Select all
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 "";
}
Now edit your ~/ConLib/Basket.ascx.cs file and replace the entire ShowProductImagePanel function with this code:
Code: Select all
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;
}
}Code: Select all
using CommerceBuilder.Products; Finally, edit the ~/ConLib/Basket.ascx file and find this line:
Code: Select all
<asp:Image ID="Thumbnail" runat="server" AlternateText='<%# Eval("Product.Name") %>' ImageUrl='<%#Eval("Product.ThumbnailURL")%>' EnableViewState="false" />Code: Select all
<asp:Image ID="Thumbnail" runat="server" AlternateText='<%# Eval("Product.Name") %>' ImageUrl='<%#MyProductImage(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.
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
