Products

Use this template to design your products page.
Read the documentation first and identify the type of products that you want to display.

Add Products to Cart (product.selected_product):

Always use product.selected_product object when you are working with simple products or products with variants. In the case of products with multiple variants, product.selected_product will always reference the the variant of the lowest price.

Simple products :

<form id="product-form">
    <!-- you must refer the product id input by 'product-id' -->
    <input id="product-id" type="hidden" value="{{ product.selected_product.id }}">

    <!-- you must refer the product quantity input by 'product-quantity' -->
    <input id="product-quantity" type="hidden" value="1">
    
     <button class="btn btn-primary" type="button" onclick="productAddToCart()">
        {{ locals.add_to_cart }}
        <img class="add-to-cart-progress d-none" src="{{ asset_url ~ 'spinner.gif' }}" width="30" height="30"/>
     </button>
     
 </form>
 
 <script>
     //you must include zid api library first
     //check zid-api librarry
 
        function productAddToCart() {
            $('.add-to-cart-progress').removeClass('d-none');

            zid.store.cart.addProduct({ formId:'product-form' }).then(function (response) {
                if(response.status  === 'success'){
                    alert('product added to cart successfully');
                    setCartBadge(response.data.cart.products_count)
                }
                $('.add-to-cart-progress').addClass('d-none');
            })
        }
</script>

Products with variants :

Use template_for_product_variants_dropdowntemplate to display all variants attributes as a dropdown list.

You can also use template_for_product_variants_list to show the variants as options.

To interact with dropdown changes you must add product_view_scripts which will fire a global function productOptionsChanged with the new selected_product

<form id="product-form">
    <!-- you must refer the product id input by 'product-id' -->
    <input id="product-id" type="hidden" value="{{ product.selected_product.id }}">

    <!-- you must refer the product quantity input by 'product-quantity' -->
    <input id="product-quantity" type="hidden" value="1">
    
    <!-- this will render product variants as dropdown --> 
    {{ template_for_product_variants_dropdown }}
    
     <button class="btn btn-primary" type="button" onclick="productAddToCart()">
        {{ locals.add_to_cart }}
        <img class="add-to-cart-progress d-none" src="{{ asset_url ~ 'spinner.gif' }}" width="30" height="30"/>
     </button>
     
 </form>
 
 <!-- this script will listen to product variants changes and will fire productOptionsChanged function -->
 {{ product_view_scripts|raw }} 
 
 <script>
    //you must include zid api library first
    //check zid-api librarry
    
    function productAddToCart() {
        $('.add-to-cart-progress').removeClass('d-none');
    
        zid.store.cart.addProduct({ formId:'product-form' }).then(function (response) {
            if(response.status  === 'success'){
                alert('product added to cart successfully');
                setCartBadge(response.data.cart.products_count)
            }
            $('.add-to-cart-progress').addClass('d-none');
        })
    }
        
   function productOptionsChanged(selected_product) {
            if (selected_product) {
                $('#product-id').val(selected_product.id)

                if (!selected_product.unavailable) {
                    // Selected a valid variant that is available.
                    if(selected_product.formatted_sale_price){
                        $('#product-price').html(selected_product.formatted_sale_price)
                        $('#product-old-price').html(selected_product.formatted_price)
                    }else{
                        $('#product-price').html(selected_product.formatted_price)
                        $('#product-old-price').html('')
                    }

                    $('#add')
                        .removeClass('disabled')
                        .removeAttr('disabled')
                        .val('Add to Cart')
                        .fadeTo(200, 1);
                } else {
                    // Variant is sold out.
                    $('#add')
                        .val('Sold Out')
                        .addClass('disabled')
                        .attr('disabled', 'disabled')
                        .fadeTo(200, 0.5);
                }

            } else {
                // variant doesn't exist.
                $('#add')
                    .val('Unavailable')
                    .addClass('disabled')
                    .attr('disabled', 'disabled')
                    .fadeTo(200, 0.5);
            }
        }     
       
        
</script>

Product with variants and custom fields :

Use template_for_product_custom_input_fields template to display all custom fields inputs.

To interact with custom fields changes you must add product_view_scripts which will fire a global function productOptionsChanged with the new selected_product

<form id="product-form">
    <!-- you must refer the product id input by 'product-id' -->
    <input id="product-id" type="hidden" value="{{ product.selected_product.id }}">

    <!-- you must refer the product quantity input by 'product-quantity' -->
    <input id="product-quantity" type="hidden" value="1">
    
    <!-- this will render product variants as dropdown --> 
    {{ template_for_product_variants_dropdown }}
    
    <!-- this will render product custom fields inputs --> 
    {{ template_for_product_custom_input_fields }}
    
     <button class="btn btn-primary" type="button" onclick="productAddToCart()">
        {{ locals.add_to_cart }}
        <img class="add-to-cart-progress d-none" src="{{ asset_url ~ 'spinner.gif' }}" width="30" height="30"/>
     </button>
     
 </form>
 
 <!-- this script will listen to product variants changes and will fire productOptionsChanged function -->
 {{ product_view_scripts|raw }} 
 
 <script>
    //you must include zid api library first
    //check zid-api librarry
    
    function productAddToCart() {
        $('.add-to-cart-progress').removeClass('d-none');
    
        zid.store.cart.addProduct({ formId:'product-form' }).then(function (response) {
            if(response.status  === 'success'){
                alert('product added to cart successfully');
                setCartBadge(response.data.cart.products_count)
            }
            $('.add-to-cart-progress').addClass('d-none');
        })
    }
        
   function productOptionsChanged(selected_product) {
            if (selected_product) {
                $('#product-id').val(selected_product.id)

                if (!selected_product.unavailable) {
                    // Selected a valid variant that is available.
                    if(selected_product.formatted_sale_price){
                        $('#product-price').html(selected_product.formatted_sale_price)
                        $('#product-old-price').html(selected_product.formatted_price)
                    }else{
                        $('#product-price').html(selected_product.formatted_price)
                        $('#product-old-price').html('')
                    }

                    $('#add')
                        .removeClass('disabled')
                        .removeAttr('disabled')
                        .val('Add to Cart')
                        .fadeTo(200, 1);
                } else {
                    // Variant is sold out.
                    $('#add')
                        .val('Sold Out')
                        .addClass('disabled')
                        .attr('disabled', 'disabled')
                        .fadeTo(200, 0.5);
                }

            } else {
                // variant doesn't exist.
                $('#add')
                    .val('Unavailable')
                    .addClass('disabled')
                    .attr('disabled', 'disabled')
                    .fadeTo(200, 0.5);
            }
        }     
       
        
</script>

Payment widgets

Add Payment widgets, such as tamara and tabby.

To add a payment widget, inject template_for_product_payments_widget as follow:

<div>
  {{ template_for_product_payments_widget }}
</div>

To learn more about Products Data, check Products Info.