Shopify - дебютная тема - показать и скрыть дополнительные текстовые поля, содержащие вариант метаполя в зависимости от выбранного варианта раскрывающегося списка - PullRequest
Новая
       25

Shopify - дебютная тема - показать и скрыть дополнительные текстовые поля, содержащие вариант метаполя в зависимости от выбранного варианта раскрывающегося списка

0 голосов
/ 04 октября 2018

Как видно из заголовка, я хочу обновить мою тему Shopify Debut, чтобы показать и скрыть дополнительные текстовые поля, содержащие вариант метаполя в зависимости от выбранного варианта раскрывающегося списка.

Вот раскрывающийся список выбора HTML: 

<select class="single-option-selector single-option-selector-product-template product-form__input" id="SingleOptionSelector-0" data-index="option1">
    <option value="Option no 1" selected="selected">This is option 1</option>
    <option value="Option no 2">This is option 2</option>
    <option value="Option no 3">This is option 3</option>  
</select>

В шаблоне Shopify product.liquid это выглядит так - я добавил id = "{{option.id}}" ввариант, но он не заполняет его при тестировании, я надеялся, что это будет способ сопоставления как опции select, так и div вместе. 

<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
    {% if option.selected_value == value %}
    <option id="{{variant.id}}" value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% else %}
    <option id="{{variant.id}}" value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% endif %}

{% endfor %}
</select>

Затем я хочу показать метаполе выбранного варианта продукта (option.description) в зависимости от выбранной переменной продукта.В настоящее время я использую следующий код (это ссылка на магазинную жидкость) для извлечения всех вариантов метаполей, которые будут готовы показать и скрыть: 

{% for variant in product.variants %}               
    <div class="variantoption" id="{{variant.id}}">
        {% if current_variant.id %}
        {{ variant.metafields.option.description }}
        {% else %}
        {% endif %}
        </div>
{% endfor %}

Я понимаю, что мне нужно либо добавитьнекоторый пользовательский javascript для выбора или альтернативного подключения к теме Shopify js, чтобы показать / скрыть опции метаполя выбранного варианта.Это может быть основано на идентификаторах, но я изо всех сил пытаюсь вытащить их на страницу в окне выбора, плюс все учебники, с которыми я сталкивался, ссылаются на функцию «selectCallback», но ее нет в теме «Дебют» - этотема Shopify на основе сланца.

Помощь при завершении этого динамического отображения / скрытия вариантов метаполей на основе выбранной опции будет наиболее ценной!

/ * ОБНОВЛЕНИЕ * /

Мне удалось добраться до этой стадии с кодом: 

_updateMetaDescription: function(evt) {

  var variant = evt.variant;
  var urlvariant = GetURLParameter('variant'); // finds variant parameter in URL
  var currentvar = $('.variantoption' + '#' + urlvariant); // looks for div with class MetaDescription & ID with the same variant as in the URL

    if (currentvar) {
      // The variant exists, remove hide class.            

      $(this.selectors.metaDescription).removeClass('hide');
       }

  else {
    $(this.selectors.metaDescription).addClass('hide');
  }
},

Проблема в том, что он удаляет класс 'hide' для всех идентификаторов.Почему-то он не распознает правильный идентификатор, связанный с DIV.

1 Ответ

0 голосов
/ 05 октября 2018

Я немного запутался, что именно вы ищете, но если я понимаю, вот что у вас есть.

У вас есть выбор по умолчанию, который вы нацеливаете, используя option_selection.js, и вы хотите иметь дополнительныесодержание на основе этого выбора.Если это действительно правильно, вы можете просто сделать следующее: 

$('#product-select').on('change', function() {
  var $this = $(this);
  var thisId = $this.val();
  $('#' + thisId).show().siblings().hide();
})

Что касается вашего кода здесь: 

<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
    {% if option.selected_value == value %}
    <option id="{{variant.id}}" value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% else %}
    <option id="{{variant.id}}" value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% endif %}

{% endfor %}
</select>

У вас нет доступа к variant.id здесь,поэтому идентификатор <option> должен быть пустым.

...