I'm new to timber and twig. I have a custom single-product.twig template that I need to add a functionality so when user change the variation on the product, the image change to the current variation. here is my single product code and I assigned each variation with their own image on the backend of woo commerce:
<aside class="mt10 mw4 center">
<div class="ph4">
{% do action('woocommerce_before_single_product') %}
</div>
</aside>
<article class="single-product-details mw4 center grid-l grid-columns-9 gap4 bw1 ba b--red {{ post.class }}" itemscope itemtype="http://schema.org/Product">
<div
class="[images] grid-col-span-6">
{# {% do action('woocommerce_before_single_product_summary') %} #}
{% if product.get_gallery_image_ids %}
{% set product_gallery = product.get_gallery_image_ids %}
{# <nav class="product_gallery ">
{% for item in product_gallery %}
<div>
<img src="{{TimberImage(item).src|resize(150,150,'center')}}" alt="{{post.title}}"/>
</div>
{% endfor %}
</nav> #}
<figure class="product-slider">
{% for item in product_gallery %}
<div>
<img src="{{TimberImage(item).src|resize(1000,1000,'center')}}" alt="{{post.title}}"/>
</div>
{% endfor %}
</figure>
{% else %}
{# SINGLE IMAGE #}
<img class="w-100" src="{{ post.thumbnail.src('shop_single') }}"/>
{% endif %}
</div>
<div class="[add2cart] ph4 grid-col-span-3">
<div
class="summary entry-summary">
{# TITLE #}
{% do action('woocommerce_single_product_summary') %}
{% block display_price %}
{# Display price for single simple product #}
<p class="">
{% if product.get_sale_price %}
<strike class="gray">${{product_price}}</strike>
<span content="USD" itemprop="priceCurrency">$</span>
<span itemprop="price" content="{{product_sale_price}}">{{product_sale_price|number_format(2, '.', ',')}}</span>
{% else %}
{% spaceless %}
{% if product.get_price == '0.00' %}
<span content="USD" itemprop="priceCurrency"></span>
<span content="0.00" itemprop="price">Free</span>
{% else %}
<span content="USD" itemprop="priceCurrency">$</span>
<span itemprop="price" content="{{ product.get_price }}">{{ product.get_price |number_format(2, '.', ',')}}</span>
{% endif %}
{% endspaceless %}
{% endif %}
</p>
{% endblock %}
{% if not product.is_in_stock() %}
<p>This product is currently out of stock. Add your email address below to be notified when it's back!</p>
{# {{fn('do_shortcode','[gravityform id="6" title="false" description="false"]')}} #}
{% else %}
{% block form %}
<form action="{{product.add_to_cart_url}}" class="cart" method="post" enctype="multipart/form-data">
{% block quantity %}
{% if item.id %}
{% set group_prod_id = '_' ~ item.id %}
{% set group_prod_name = '[' ~ item.id ~ ']' %}
{% endif %}
<div class="product-quantity mb2 mb3-l">
<label class="" for="quantity">Quantity</label>
<select name="quantity{{ group_prod_name }}" id="quantity{{ group_prod_id }}">
{% for item in 1..6 %}
<option value="{{ item }}">{{ item }}</option>
{% endfor %}
</select>
</div>
{% endblock %}
{% block variations %}{% endblock %}
{# Hidden validation field? #}
<input type="hidden" id="add-to-cart" name="add-to-cart" value="{{ product.get_id }}">
{% block add_to_cart %}
<button class="db mv2 pv1 ph3 ba dim w-100 w-auto-m" type="submit" data-product_id="{{product_id}}">
{% if product.is_on_backorder(1) %}
Pre-order
{% elseif item.get_type == 'variable-subscription' or item.get_type == 'subscription' %}
Subscribe
{% else %}
Add to Cart
{% endif %}
</button>
{% endblock %}
</form>
{% endblock %}
{% endif %}
</div>
</div>
<div class="grid-col-span-9">
{% do action('woocommerce_after_single_product_summary') %}
</div>
<meta itemprop="url" content="{{ post.link }}"/>
</article>
{% if related_products %}
{% for item in related_products %}
{% block pre_tease %}{% endblock %}
<article class="w-50 w-third-m w-25-l ph4 mv4 flex flex-column">
<a class="black dim" href="{{ post.link }}"> {% block before_tease %}{% endblock %}
{% if post.thumbnail %}
<img class="db mv4" src="{{ post.thumbnail|resize(400,400) }}" alt="">
{% endif %}
<header>
<h3>{{ post.title }}</h3>
</header>
<p class="dn db-m">
{% if post.excerpt %}
{{ post.excerpt }}
{% else %}
{{ post.content|excerpt(30) }}
{% endif %}
<span class="white bg-black dt br-pill lh-solid pv1 ph3 mv3 ttu f7">Info</span>
</p>
{% block after_tease %}{% endblock %}
</a>
</article>
{% endfor %}
{% endif %}
{% do action('woocommerce_after_single_product') %}
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Find the answer in similar questions on our website.
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.
PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites.
The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/
Welcome to the Q&A site for web developers. Here you can ask a question about the problem you are facing and get answers from other experts. We have created a user-friendly interface so that you can quickly and free of charge ask a question about a web programming problem. We also invite other experts to join our community and help other members who ask questions. In addition, you can use our search for questions with a solution.
Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.
Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.