Product template

Check product info

product.selected_product :

working with simple product or product with variants , always use product.selected_product object , in the case of product with multiple variants product.selected_product will always reference the the variant of the lowest price

product add to cart (simple 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">
    
     <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>

product add to cart (product with variants) :

add to product form the template template_for_product_variants_dropdown , this template will display all variants attributes as a dropdown. template_for_product_variants_list is another option 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 add to cart (product with variants and custom fields) :

add to product form the templates template_for_product_custom_input_fields , this template will 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

For adding payment widgets, such as tamara and tabby

, just inject template_for_product_payments_widget as follow:

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