Я хочу связать значение моего параметра с моими образцами, например, когда я нажимаю образцы вариантов, значение параметра также изменится.
Пример, когда я нажимаю на параметры раскрывающегося списка «образцы [цвет круга]», также изменятся. образец изображения
Вот мой код ниже и ссылка на сайт: https://strokes-test.myshopify.com/collections/frontpage
и я использую JQuery v1.8.1
HTML
<form action = "/cart/add" method = "post">
{% if product.variants.size == 1 %}
<input type = "hidden" name = "id" value = "{{ product.variants[0].id }}" />
{% else %}
<select name = "id">{% for variant in product.variants %}<option value = "{{ variant.id }}">{{ variant.title }}</option>{% endfor %}</select>
{% endif %}
<ul class = "item-swatch color_swatch_Value">
{% for option in product.options %}
{% if option == 'Shades' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[index] }}
{% endcapture %}
{% unless colorlist contains color %}
{% assign text = color | handleize %}
<li>
<label value = "{{ variant.id}}" style = "{% if text == 'white' %}border: 1px solid #cbcbcb; {% endif %}background-color: {{ color | split: ' ' | last | handle }}; background-image: url({{ text | append: '.png' | file_url }});"></label>
{% if variant.image != null %}
<div class = "hidden">
<img src = "{{ variant.image.src | product_img_url: 'grande' }}" alt = "{{ text }}"/>
</div>
{% endif %}
</li>
{% capture tempList %}
{{ colorlist | append: color | append: ' ' }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
<div><button type = "submit" name = "add">Add to cart</button></div>
</form>
JS
initColorSwatchGrid: function() {
jQuery('.item-swatch li label').click(function(){
var newImage = jQuery(this).parent().find('.hidden img').attr('src');
jQuery(this).parents('.item-row').find('.featured-image').attr({ src: newImage });
return false;
});
}
Также, пожалуйста, дайте правильный шаг за шагом с ожидаемым результатом. Я даже не знаю, что вы называете свотчами на своей странице и какие опции хотите обновить. Если я нажму на изображения, страница изменится
Попробуй это
initColorSwatchGrid: function() {
jQuery('.item-swatch li label').click(function () {
var newImage = jQuery(this).next().find('img').attr('src');
jQuery(this).parents('.product-detail').prev().find('.featured-image').attr({ src: newImage });
// JS code for product switching
jQuery(this).parents('ul.item-swatch').prev().val(jQuery(this).attr('value'));
return false;
});
}
Здравствуйте, @Onkar, я попробовал это решение в своем тесте, но теперь я обновляю свой JS, и он снова не работает, вы можете мне снова помочь ??
Какие изменения внесены в файлы JS, которые мешают работе кода, есть идеи?
Я просто добавляю код скрипта для обратного отсчета
Из вашего шаблона невозможно ничего получить. Пожалуйста, нажмите «Изменить», затем
[<>]
редактор фрагментов и предоставьте минимальный воспроизводимый пример, используя только RENDERED HTML и скрипт.