Add to Cart on Product list view

CMS > eCommerce
1

I’m trying to use {% component itemId: “{{this.Id}}”, type: “ecommerce_add_to_cart” %} on the product list view but the javascript won’t work. It works perfectly on the product detail view. Is there a trick to getting it to work on the list view?

2

Be sure to add the product JSON data to the list layout if you need the eCommerce JS functionality there. This is needed to supply the JS with all the relevant product data to work correctly.

{{this.ProductDataJsonHTML}}
3

Thanks Adam - I’ve added it to the list layout in a couple of places but still can’t get it to work. This is the part of my code:

{% component type:"domain_settings", collectionVariable: "domainSetting" %} {{domainSetting.FormatSetting.Currency.Symbol}} {{this.PriceHtml}} {{this.ProductDataJsonHTML}} 
        <div class="grid-row">
            <strong class="title">Quantity:</strong>
            {% component layout: "/content/CustomLayouts/ecommerce_item_quantity/default.layout", itemId: "{{this.Id}}", type: "ecommerce_item_quantity" %}

        </div>
        
        <div class="btn-row mt-2">
          {% component itemId: "{{this.Id}}", type: "ecommerce_add_to_cart" %}
4

Ah, sorry. Add it at the very end of your layout code (so it’s the last thing in your layout).

1 Like
5

Brilliant - that worked a treat :slight_smile:

1 Like