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>

Adding Videos to the Product Page Carousel

This feature allows merchants to showcase both images and videos for their products in a seamless and visually engaging manner. Follow this guide to implement the new functionality using the media property in the single product view.

Overview

In the single product view, a new property called media consolidates both images and videos of a product. This enhancement enables merchants to display richer content, such as YouTube videos, alongside product images.

Key Features

Loop through the media property to access all associated media items.

Identify videos using the provider and link properties.

Use video thumbnails from the image.full_size property.

Embed videos dynamically using a YouTube embed link.

Implementation Steps

1. Accessing Media Items

Replace your existing loop for images with one that iterates over the media property. This ensures that both images and videos are processed correctly.

2. Differentiating Video Objects

Videos are identified by the presence of provider and link properties.

Each video object contains an image object with a thumbnail of the video, accessible via image.full_size.

3. Generating a YouTube Embed Link

Use the following JavaScript function to convert the video URL into a YouTube embed link. This link can be used as the src attribute of an iframe.

function getIframeLink(videoLink) {
  const videoIdMatch = videoLink.match(
    /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?|.*[?&]v)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
  );

  if (videoIdMatch && videoIdMatch[1]) {
    const videoLinkId = videoIdMatch[1];
    return `https://www.youtube.com/embed/${videoLinkId}?autoplay=1&enablejsapi=1`;
  }

  return null;
}

4. Adding the Video to the Product Page

To display a video on the product page:

Use the thumbnail from image.full_size to represent the video visually.

Add the following iframe alongside the thumbnail. The iframe's src is set dynamically using the getIframeLink function:

When the play button is clicked, the iframe should overlay the thumbnail. If the slides change in the carousel, the iframe should close.

5. Implementing the Play Button

Overlay a play button on the video thumbnail to indicate it is clickable.

When the play button is clicked:

Hide the thumbnail.

Set the iframe's src using the getIframeLink function.

Display the iframe to play the video.

User Example

Imagine a merchant selling a product with both images and a YouTube demo video. Using this feature:

The product page displays all images and videos under the media property.

Videos are marked with a play button overlay on their thumbnail.

When a customer clicks the play button, the YouTube video plays in an embedded iframe, enhancing the product presentation.

Benefits for Merchants

Provides a richer, multimedia product display.

Improves customer engagement with interactive video content.

Simplifies the process of managing images and videos in a unified property.

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.
Screen Shot 2022-03-14 at 5.18.44 pm.png

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.

Add Products to Cart (product.selected_product):#

Simple products :#

Adding Videos to the Product Page Carousel#

Overview#

Key Features#

Implementation Steps#

1. Accessing Media Items#

2. Differentiating Video Objects#

3. Generating a YouTube Embed Link#

4. Adding the Video to the Product Page#

5. Implementing the Play Button#

User Example#

Benefits for Merchants#

Products with variants :#

Product with variants and custom fields :#

Payment widgets#

Add Products to Cart (product.selected_product):

Simple products :

Adding Videos to the Product Page Carousel

Overview

Key Features

Implementation Steps

1. Accessing Media Items

2. Differentiating Video Objects

3. Generating a YouTube Embed Link

4. Adding the Video to the Product Page

5. Implementing the Play Button

User Example

Benefits for Merchants

Products with variants :

Product with variants and custom fields :

Payment widgets