Thread: Images associated with kit items

Hello,
I run a website which allows users to create a highly personalized order - a custom figurine of themself or a friend. There are certain items which the customer must be allowed to select from a list, such as eye color, hair color, skin color, etc. I would like to do this in AspDotNetStorefront but I'm not sure if it's possible.

I have configured a kit to allow for these various parameters to be selected. However, I am only able to present the customer with a list of options - such as blue, green, hazel, dark brown, light brown for eyes. But what I really need is to be able to present a color swatch with each option so that the color can determine which is the closest match.

Here's an example of how this works in a different shopping cart product:

Our current kit implementation won't do this out of box, but is simple enough to do with source code (for a specific instance is really simple...can be done with a bit more control - eg. adding images from admin section, supporting image filename override, etc... - if you're willing to build the scaffolding but in this case I think it will suit you just fine).

First, create a new directory in the images/product/ folder called "kititems" (the naming convention in this example will be kititemid.jpg...1.jpg, 2.jpg, 393.jpg).

Next, you'll need to open the XSLTExtensionBase.cs file in the AspDotNetStorefrontCore project. Find the GetKitItemOptions method, and there you'll find the section where kit items are rendered for kit products. In case 2

Code:

case 2: // Single Select Radio List

you'll find the radio button generation section. Add the following lines of code (new code is red):

Code:

else
{
    if (AppLogic.KitContainsItem(ThisCustomer.CustomerID, ProductID, ShoppingCartRecID, DB.RSFieldInt(rsi, "KitItemID")))
    {
        IsSelected = " checked=\"checked\" ";
    }
}
if (CommonLogic.FileExists("images/product/kititems/" + DB.RSFieldInt(rsi, "KitItemID").ToString() + ".jpg"))
{
    results.Append("<img src=\"images/product/kititems/" + DB.RSFieldInt(rsi, "KitItemID").ToString() + ".jpg" + "\" width=\"30\" height=\"30\"/>");
}
results.Append("<input type=\"radio\" name=\"KitGroupID_" + ThisGroupID.ToString() + "\" value=\"" + DB.RSFieldInt(rsi, "KitItemID").ToString() + "\" " + IsSelected + "/>" + IName);
results.Append("</td>");

Then recompile and deploy the new AspDotNetStorefrontCore.dll to your site. Upload the images that you need to the images/product/kititems directory and that's all there is to it

Wow, this is a great answer. Thanks so much!

I guess I need the source code to do this - right?

Thanks!
Warren

You would need source yes, for this kind of detailed mod. Again, not hard, but needs source yes.