change image with selection of the variant - debut theme - product-card-grid.liquid

Highlighted
New Member
1 0 0
Hi everyone, 
On my cart page I show different collections and let customers add products directly to the shopping cart.
cart-collection.PNG

To do so, I added the following code in product-card-grid.liquid :

<form method="post" action="/cart/add">
          {% if product.variants.size == 1 %}
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
          {% else %}
            <h5>Pumpkopf aus Edelstahl:</h5>
            <select class="h5" name="id">{% for variant in product.variants %}<option value="{{ variant.id }}" {%- if variant == current_variant %} selected="selected" {%- endif -%}>{{ variant.title }} </option>{% endfor %}</select>
          {% endif %}
            <input id="addButton" type="submit" value="Hinzufügen" class="btn" />
</form>
Selecting the variant of the product and adding it to the shopping cart works without any problems.
But I want the image to change with the selection of the variant, which is not the case at the moment. The image shown is only the first available variant and does not change with the selection.
 
This is what I've already tried and what I'm currently using in product-card-grid.liquid :
{% if product.variants.size == 1 %}

	{% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
	{% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}	
	{%- assign preview_image = product.featured_media.preview_image -%}
        {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
        {% unless preview_image == blank %}
        	{% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
        {% endunless %}
        {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}

        <a href="{{ featured_image | img_url: image_size, scale: 2 }}">
        	<img class="grid-view-item__image" src="{{ preview_image | img_url: image_size, scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: preview_image.aspect_ratio }}px;" data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ preview_image.aspect_ratio }}" data-sizes="auto" data-image>         
	</a>
        <noscript>[...]</noscript>
           
{% else %}
	
        {%- assign current_variant = product.selected_or_first_available_variant -%}
        {% capture img_id %}ProductCardImage-{{ product.id }}-{{ variant.id }}{% endcapture %}
        {% capture wrapper_id %}ProductCardImageWrapper-{{ product.id }}-{{ variant.id }}{% endcapture %}
        {%- assign variant_image = current_variant.image -%}
        {%- assign img_url = variant_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
        {% unless variant_image == blank %}
          	{% include 'image-style', image: variant_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
        {% endunless %}

        <a href="{{ variant_image | img_url: image_size, scale: 2 }}">
              <img src="{{ variant_image |  img_url: image_size, scale: 2 }}" alt="{{ variant_image.alt | escape }}">
        </a>
        <noscript>[...]</noscript>

{% endif %}
Do you have an idea to solve this problem?
 
Thanks in advance.
0 Likes