Products
Read the documentation first and identify the type of products that you want to display.
Add Products to Cart (product.selected_product):
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
media
property in the single product view.Overview
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
media
property to access all associated media items.provider
and link
properties.image.full_size
property.Implementation Steps
1. Accessing Media Items
media
property. This ensures that both images and videos are processed correctly.2. Differentiating Video Objects
provider
and link
properties.image
object with a thumbnail of the video, accessible via image.full_size
.3. Generating a YouTube Embed Link
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
1.
image.full_size
to represent the video visually.2.
src
is set dynamically using the getIframeLink
function:
5. Implementing the Play Button
1.
2.
src
using the getIframeLink
function.3.
User Example
1.
media
property.2.
3.
Benefits for Merchants
Products with variants :
template_for_product_variants_dropdown
template to display all variants attributes as a dropdown list.template_for_product_variants_list
to show the variants as options.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 :
template_for_product_custom_input_fields
template to display all custom fields inputs.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
template_for_product_payments_widget
as follow:<div>
{{ template_for_product_payments_widget }}
</div>
To learn more about Products Data, check Products Info.
Modified at 2025-01-01 07:25:08