Как создать образец цвета продукта?

Question

Кто-нибудь знает как это сделать? Добавляя образец цвета, он меняет раскрывающееся меню, и я думаю, что при изменении раскрывающегося списка он изменит сам вариант, но не уверен, как это сделать.

https://giphy.com/gifs/SUXFrP069WJNU8D2Iw/html5

Код, который я пробовал:

   $('.color-swatch').on('change', function() {

  var value = $(this).val();

    $('.single-option-selector__radio').find("option:selected").val(value).change();

});

    $('.color-swatch').on('change', function() {

      var optionIndex = jQuery(this).closest('.dbtle-swatches').attr('data-option-index');
      var optionValue = jQuery(this).val();

      var test = jQuery('form')
      .closest('option')
      .val(optionValue)
      .trigger('change');

    });

    <div class="dbtle-color-swatches">
{% assign option_index = 0 %}
{% for option in product.options_with_values %}
{% if option.name == "Color" %}
{% assign option_index = forloop.index0 %}

  <label class="swatch-label">{{option.name}}</label>
  <div class="dbtle-swatches" data-option-index="{{ option_index }}">
    {% for value in option.values %}
    <input id="swatch-{{ option_index }}-{{ value | handle }}"
           class="color-swatch" 
           type="radio" 
           name="color" 
           value="{{ value | escape }}" 
           data-class=""
           data-index="{{ option_index }}"
           data-section-id="{{ section.id }}"
           {% if option.selected_value == value %} checked{% endif %}/>

    <div data-value="{{ value | escape }}" class="swatch">
      <div class="tooltip">{{ value }}</div>
      <label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: " " | last | handle }}">{{value}}</label>
    </div>
    {% endfor %}
  </div>  
  {% endif %}
  {% endfor %}
</div>

Answer 1

Хорошо, сначала вам понадобится основной выбор, то есть то, что мы будем отправлять за сцену.

<select class="main-select" name="id" style="display: none;">
  {% for variant in product.variants %}
    <option 
      value="{{variant.id}}"
      data-option-1="{{variant.option1}}"
      data-option-2="{{variant.option2}}"
      data-option-3="{{variant.option3}}"
    >{{ variant.title }}</option>
  {% endfor %}
</select>

Вы должны скрыть, что он не должен быть видимым для пользователя. Обратите внимание на строки, которые используют data-option-*, мы будем использовать это для последующего целевого скрытого выбора.

После этого вам нужно будет создать логи c для образцов / выбора для цвета / размеров.

{% comment %} Create the swatch and select logic {% endcomment %}
<div class="options">
  {% for option in product.options_with_values %}
    <h5>{{option.name}}</h5>
    {% comment %} We check if it's color or not {% endcomment %}
    {% if option.name == 'Color' %}
      <ul>
        {% for value in optioin.values %}
          <li>
            <input type="radio" id="radio-{{option.name | handle}}-{{value | handle}}" name="radio-{{option.name | handle}}" value="{{value}}" data-option="{{option.position}}">
            <label for="radio-{{option.name | handle}}-{{value | handle}}">{{value}}</label>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <select>
        {% for value in option.values %}
          <option value="{{value}}" data-option="{{option.position}}">{{value}}</option>
        {% endfor %}
      </select><!-- /# -->
    {% endif %}
  {% endfor %}
</div><!-- /.options -->

Еще раз посмотрите на data-option="{{option.position}}", это важно здесь, так как мы будем использовать это.

После этого вам понадобятся ваши JS logi c.

$('.options').find('select, input[type="radio"]').on('change', function(){
  let target = '';
  $('.options').find('select option:selected, input[type="radio"]:checked').each(function(){
    const $this = $(this);
    const dataPosition = $this.data('option');
    const thisValue = $this.val();
    target += `[data-option-${dataPosition}="${thisValue}"]`
  })
  if($(target).length === 1){
    $('.main-select').val($(target).val());
  }
})

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

Для пояснения мы нацеливаемся на селектор и переключатели, которые мы создаем в элементе <div class="options"> объекта product.options_with_values. Таким образом, мы делаем это так -> $('.options').find('select, input[type="radio"]').on('change'

После этого мы создаем пустую переменную, которая будет содержать конечный целевой элемент let target = '';

Затем внутри события изменения мы нацеливаемся на каждый выбранный / выбрал опцию / переключатель, например, $('.options').find('select option:selected, input[type="radio"]:checked') и l oop для них, при этом указав позицию и значение опции, чтобы заполнить строку target. Вот так

target += `[data-option-${dataPosition}="${thisValue}"]`

Поэтому, если вы выберете один вариант, вы получите что-то вроде этого [data-option-1="Red"], если вы выберете цвет и размер, он станет [data-option-1="Red"][data-option-2="XS"].

Мы используем этот элемент, чтобы найти существующую опцию из основного выбора, который мы создаем в начале, и проверить, есть ли один такой как if($(target).length === 1). Мы проверяем это, поскольку при выборе одного образца будет несколько вариантов, и нам нужно иметь только один параметр, для этого мы должны быть уверены, что не больше 1, и вы выбираете и цвет, и размер.

После этого вы просто меняете основной выбор следующим образом: $('.main-select').val($(target).val());;

Имейте в виду, что это слишком упрощенная версия, будут дополнительные шаги для распроданных вариантов, изменения цены и так далее.

Подводя итог, вот весь код:

{% comment %} This is the main select we will submit behind the scene {% endcomment %}
<select class="main-select" name="id" style="display: none;">
  {% for variant in product.variants %}
    <option 
      value="{{variant.id}}"
      data-option-1="{{variant.option1}}"
      data-option-2="{{variant.option2}}"
      data-option-3="{{variant.option3}}"
    >{{ variant.title }}</option>
  {% endfor %}
</select><!-- /# -->

{% comment %} Create the swatch and select logic {% endcomment %}
<div class="options">
  {% for option in product.options_with_values %}
    <h5>{{option.name}}</h5>
    {% comment %} We check if it's color or not {% endcomment %}
    {% if option.name == 'Color' %}
      <ul>
        {% for value in optioin.values %}
          <li>
            <input type="radio" id="radio-{{option.name | handle}}-{{value | handle}}" name="radio-{{option.name | handle}}" value="{{value}}" data-option="{{option.position}}">
            <label for="radio-{{option.name | handle}}-{{value | handle}}">{{value}}</label>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <select>
        {% for value in option.values %}
          <option value="{{value}}" data-option="{{option.position}}">{{value}}</option>
        {% endfor %}
      </select><!-- /# -->
    {% endif %}
  {% endfor %}
</div><!-- /.options -->

{% comment %} JS logic {% endcomment %}
<script>
$('.options').find('select, input[type="radio"]').on('change', function(){
  let target = '';
  $('.options').find('select option:selected, input[type="radio"]:checked').each(function(){
    const $this = $(this);
    const dataPosition = $this.data('option');
    const thisValue = $this.val();
    target += `[data-option-${dataPosition}="${thisValue}"]`
  })
  if($(target).length === 1){
    $('.main-select').val($(target).val());
  }
})
</script>

И это в значительной степени справедливо.

Удачи!