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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://themes.zid.dev/product-template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.