Business Catalyst Help | Manage product inventory

I’m absolutely NEW in Business Catalyst so I need HELP.

I want to include “Change image according to selected attribute” into my client’s website (still under construction).

When customer select one “color-size” from the dropdown I would like the images change accordingly: http://tesonline02.businesscatalyst.com/outerwear/avatar

What I’ve done so far is:

•     From the Dashboard (into Attributes Tab), I’ve assigned an image to each attribute.

•     I’ve used the Example 2 above including this into the code of Layout/OnlineShop/large_product.htm and also replacing  by …  this didn’t work at all ….

Could you give me some guidance about which templates/layout modify, and how????

It looks like you figured it out. How did you do it?

Yes Ricky ... I got it!!!

Step1: Use this code for large_product.html

<div class="shop-product-large clear">

<div class="details">

<h1>{tag_name}</h1>

<h3 class="sale{tag_onsale}">

Price:

<span class="normalPrice">{tag_retailprice}</span>

<span class="salePrice">{tag_saleprice}</span>

</h3>

<ul>

    <li class="instock">In stock: <strong>{tag_instock}</strong></li>

    <li class="instock"><strong>{tag_attributes}<br />

    </strong></li>

    <li class="quantity">{tag_addtocartinputfield} {tag_addtocart,<img alt="" src="/CatalystImages/shop_addtocart.png" />}</li>

</ul>

<div class="description">{tag_description}</div>

</div>

<div class="image">   {tag_largeimage}

</div>

<div class="poplets">{tag_poplets}</div>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>

$(function(){

        var product = {tag_product_json};

        var attributes = {tag_attributes_json};

        var divId = "#catProdTd_"+product.productId;

        $(divId).find("select").change(function (){

                  var selected = $(this).val();

                  var option = attributes.options[selected];

                  if(option && option.image)

                     $(divId).find(".image").find("img").attr("src", option.image);

        });

});

</script>

Step2: Look at http://tesonline02.businesscatalyst.com/outerwear/avatar    as a reference

Step3 :Go to your Dashboard .... then, for each product, check the images attached for Tabs "Price"

and "Attributes" and compare with the reference AVATAR (link above) ... hope it helps.

Wow. You are a legend! Thanks! It seems so difficult to get BC solutions that are easy to understand. The only thing that I need to figure out now is that popup that says the item is added to the cart.

This  window is okay ... just popup when ADD button is clicked.

Is there an example you can provide, that will dynamically update/change the product price when the visitor selects a product attribute from the pulldown? Thank you very much.

Aw man, that was incredibly helpful. Thanks a million times over!