Как связать образцы вариантов со значением параметра?

Я хочу связать значение моего параметра с моими образцами, например, когда я нажимаю образцы вариантов, значение параметра также изменится.

Пример, когда я нажимаю на параметры раскрывающегося списка «образцы [цвет круга]», также изменятся. образец изображения

Вот мой код ниже и ссылка на сайт: 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;
  });
}

Из вашего шаблона невозможно ничего получить. Пожалуйста, нажмите «Изменить», затем [<>] редактор фрагментов и предоставьте минимальный воспроизводимый пример, используя только RENDERED HTML и скрипт.

mplungjan 17.12.2020 09:26

Также, пожалуйста, дайте правильный шаг за шагом с ожидаемым результатом. Я даже не знаю, что вы называете свотчами на своей странице и какие опции хотите обновить. Если я нажму на изображения, страница изменится

mplungjan 17.12.2020 09:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
348
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуй это

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, и он снова не работает, вы можете мне снова помочь ??

Carlvic Lim 12.03.2021 10:54

Какие изменения внесены в файлы JS, которые мешают работе кода, есть идеи?

Onkar 12.03.2021 16:48

Я просто добавляю код скрипта для обратного отсчета

Carlvic Lim 14.03.2021 12:27

Другие вопросы по теме