> For the complete documentation index, see [llms.txt](https://themes.zid.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themes.zid.dev/product-template.md).

# Product template

Check [product](/data-reference/product.md) 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)** :

```markup
<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`

```markup
<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`

```markup
<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***

![](/files/kvD8p8dl2q3C8WyNTpaW)

, just inject `template_for_product_payments_widget` as follow:

```twig
<div>
  {{ template_for_product_payments_widget }}
</div>
```