Business Catalyst Help | Manage product inventory

[community_help]

This question was posted in response to the following article: http://helpx.adobe.com/business-catalyst/partner/product-inventory.html

[theEvaSite]

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????

[ricky404]

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

[theEvaSite · Accepted solution]

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.

[ricky404]

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.

[theEvaSite]

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

[Guest]

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

[scottdouglas999]

Do you have an example that will work with radios?

[Helen Eichel]

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.