Hello, everyone!
I'm displaying variants of another product on the product page.
It is necessary to send to cart along with the main product the selected variant of another product.
Thanks to {{ product.selected_or_first_available_variant.id }} I was able to send variants of an item to cart, but only those that are first, when the variant is changed the new id is not substituted and the same items always end up in the cart.
How can I make the id change to the selected variant id?
Thanks for the tips or solution.
{% for product in all_products %}
{% for tag in product.tags %}
{% if tag contains 'dubble-panel-for-devise' %}
<div class="product-choose" data-variant-colors="{{ product.id }}">
{% assign optionIndex = 0 %}
{% assign downcasedOptionName = product.options_with_values[optionIndex].name | downcase %}
{% if downcasedOptionName contains 'color' or downcasedOptionName contains 'colour' %}
<div class="product-colors product-card__px-15-20">
{% assign file_extension = 'png' %}
{% assign is_color = true %}
{% assign option_index = 0 %}
<div class="swatch clearfix" data-option-index="{{ option_index }}">
{% assign values = '' %}
{% for variant in product.variants %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
<div data-value="{{ variant.id | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ variant.id | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
{% if is_color %}
<div class="tooltip">{{ variant.id}}</div>
{% endif %}
<input name="items[0]id" value="{{ product.selected_or_first_available_variant.id }}" type="hidden">
<input id="swatch-{{ option_index }}-{{ variant.id | handle }}" type="radio" name="option-{{ option_index }}" value="{{ variant.id | escape }}"{% if forloop.first %} checked{% endif %} {% unless variant.available %}disabled1{% endunless %} />
{% if is_color %}
{% assign bg_color = value | split: ' ' | last | handle %}
{% if bg_color == 'burgundy' %}
{% assign bg_color = '#bb435c' %}
{% endif %}
{% if bg_color == 'white' %}
{% assign bg_color = '#f6f6f6' %}
{% endif %}
<label for="swatch-{{ option_index }}-{{ variant.id | handle }}" data-option-index="{{ variant.id }}" style="background-color: {{ bg_color }}; background-image: url({{ value | asset_url | split: '/assets' | first | append: '/assets/' | append: variant.id | append: '.' | append: file_extension}})">
<img class="crossed-out" src="{{ 'lk-icon-colors-outstock.svg' | asset_url }}" alt="{% if shop.locale == 'uk' %}закінчилося{% else %}закончилось{% endif %}" />
</label>
{% else %}
<label for="swatch-{{ option_index }}-{{ variant.id | handle }}">
{{ variant.id }}
<img class="crossed-out" src="{{ 'lk-icon-colors-outstock.svg' | asset_url }}" alt="{% if shop.locale == 'uk' %}закінчилося{% else %}закончилось{% endif %}" />
</label>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
{% endfor %}
