Использование javascript для отображения выбранного имени

Question

В моей теме shopify я пытаюсь отобразить название цвета рядом с цветной меткой. Например, если выбран зеленый цвет, «Color:» изменится на «Color: Green», а если выбран красный, он изменится на «Color: Red». В настоящее время я использую тему под названием Basel.

** Страница продукта с базельской темой - https://new-basel2.myshopify.com/collections/bag/products/vintage-cinch-backpack

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

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

swatch.liquid -

{%- include 'check_not_feature_img' -%}
<table class="variations{%- if settings.swatch_design == '2' %} variant_square{%- elsif settings.swatch_design == '3' %} variant_simple{%- endif -%}" cellspacing="0">
   {%- assign option_index = 0 -%}
   {%- if settings.color_name_check != blank -%}{%- assign _gl_color_name = settings.color_name_check | replace: ' ,', ',' | replace: ', ', ',' | split: ',' -%}{%- assign gl_color_name = _gl_color_name | downcase -%}{%-else-%}{%- assign gl_color_name = '\nathan_dt\' -%}{%-endif-%}
   <tbody>
   {%- for option in product.options_with_values -%}
      {%- assign option_index = forloop.index0 -%}
      {%- assign downcased_option = option.name | downcase -%}
      {%- assign downcased_option_check = option.name | downcase | prepend: '"' | append: '"' | strip -%} 
      {%- if downcased_option == 'color' or downcased_option == 'colour' or gl_color_name contains downcased_option_check -%}
            <tr data-option-index="{{ option_index }}" id="gl_select_{{ option_index }}">
               <td class="label"><label for="{{ option_index }}">{{ option.name }}</label></td>
               <td class="value with-swatches">
                  <div class="swatches-select" data-id="{{ option_index }}" data-option-index="{{ option_index }}">
                     {%-assign index = 0 %}
                     {%- for value in option.values -%}
                        <div class="basel-swatch bg_color basel-tooltip swatch-size-{{settings.swatch_size}}{%- if settings.swatch_style == '1' %} colored-swatch{%- else %} image-swatch{%- endif %}{%- if first_available_variant and option.selected_value == value %} active-swatch{%- elsif forloop.first == true and product.selected_variant == blank and first_available_variant == false %} active-swatch{%- elsif option.selected_value == value and product.selected_variant != blank and first_available_variant == false %} active-swatch{%- endif %} bg_color_{{ value  | handleize  }} bg_{{ value  | handleize  }} swatch-enabled" data-value='{{ value | handleize }}' data-image-id="{{ featured_image_id[index] }}">
                           <span class="basel-tooltip-label">{{ value }}</span>{{ value }}
                        </div>
                        {%-assign index = index | plus: 1 %}
                     {%- endfor -%}
                  </div>
               </td>
            </tr>
      {%- else- %}
         <tr data-option-index="{{ option_index }}" id="gl_select_{{ option_index }}">
            <td class="label"><label for="{{ option_index }}">{{ option.name }}</label></td>
            <td class="value with-swatches">
               <div class="swatches-select" data-id="{{ option_index }}" data-option-index="{{ option_index }}">
                 {%- for value in option.values -%}
                     <div class="basel-swatch basel-tooltip text-only swatch-size-{{settings.swatch_size}}{%- if first_available_variant and option.selected_value == value %} active-swatch{%- elsif forloop.first == true and product.selected_variant == blank and first_available_variant == false %} active-swatch{%- elsif option.selected_value == value and product.selected_variant != blank and first_available_variant == false %} active-swatch{%- endif %} bg_{{ value | handleize  }} swatch-enabled" data-value='{{ value | handleize }}'>
                     <span class="basel-tooltip-label">{{ value }}</span>{{ value }}
                     </div>
                 {%- endfor -%}
               </div>
            </td>
         </tr>
      {%- endif -%}
   {%- endfor -%}
   </tbody>
</table>

Мне нужно javascript, чтобы изменить название цвета после метки -

 <td class="label"><label for="{{ option_index }}">{{ option.name }}</label></td>

3 файла, которые содержат var selectCallback = функция (вариант, селектор)

product.design_default.liquid - https://gist.github.com/lok343/9e3286aa262b915438c091bf820eebcf

фрагменты / продукт. json .liquid - https://gist.github.com/lok343/b7251646824b6a9f265b0d7e270f64cd

фрагменты / product_ js .liquid - https://gist.github.com/lok343/8690d8a7fb8246f0ca6730899f736050

Обновленный код

      var selectCallback = function(variant, selector) {
        var selectedOptions = selector.selectedValues(); // This gives an array of all the selected options
var optionData = selector.product.options;  // This gives information about the options set up on the product
var form = selector.variantIdField.form; // This gives us the enclosing form element without needing to do any query-selecting

// Now lets loop through the options and update the elements
for(var i=0; i<selectedOptions.length; i++){
  var optionLabel = form.querySelector('[data-option-index="' + i + '"] label') // This reads, "Find the first <label> element inside the element with the specified data-option-index attribute inside my product form"

  // Let's make sure our code will not break and quickly check to make sure we found the element we were after. If it's blank, continue to the next option. Raising an appropriate error is left as an exercise for the reader.
  if(!optionLabel){
    continue;
  }

  var optionName = typeof optionData[i] === 'object' ? optionData[i].name : optionData[i];  // This is checking to see which of Shopify's 2 different option formats got fed into this function - it could have been either an array of titles or an array of objects that include both the name and an array of all the values. The ( check ? result_if_true : result_if_false ) syntax is called a ternary expression and is shorthand for if(check){ value_if_true } else { value_if_false }
          if (optionName.toLowerCase('Color')) {
  optionLabel.innerText = optionName + ': ' + selectedOptions[i]
          }

}

Answer 1

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

В файлах вашей темы ищите этот фрагмент кода :

var selectCallback = function(variant, selector)

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

• Файл базового шаблона - templates/product.liquid
• Раздел, связанный с базовым шаблоном - если приведенный выше содержит {% section 'some-section-name' %}, найдите в папке sections файл с именем 'some-section-name.liquid'
• Если его нет ни в одном из выше, попробуйте фрагмент, который отображает форму продукта, часто называемую product-form.liquid или аналогичной
• . Несколько тем помещают эту функцию непосредственно в файл базового макета, layout/theme.liquid

Один раз вы найдете эту функцию, вы можете добавить туда строку javascript, чтобы обновить метку для выбранного цвета. Переменная с именем variant будет вновь выбранным вариантом объекта (или null, если комбинация выбранных параметров не соответствует варианту в продукте), а переменная с именем selector содержит набор полезной информации.

Объект variant содержит всю информацию, которую Shopify имеет для описания варианта, включая variant.options (массив всех значений параметров, описывающих вариант), а также variant.option1, variant.option2 и variant.option3 (ссылки на значения параметров по указанным c индексам). В связанном продукте цвет является первым и единственным параметром, поэтому variant.options[0] или variant.option1 - это два способа получить доступ к значению цвета выбранного в данный момент продукта.

Если вам нужно найти Опция color определенно в любом произвольном продукте и если вы хотите игнорировать любые другие названия опций, я укажу вам selector.product, что даст вам доступ ко всему объекту продукта. Это означает, что selector.product.options позволит вам получить доступ ко всем именам опций в текущем продукте, чтобы вы могли определить, какое измерение является ярким.

Пример времени!

Вот пример того, что вы могли бы добавить к этой функции.

Глядя на объект selector, я вижу функцию с именем selectedValues который возвращает массив всех выбранных в данный момент параметров. Это выглядит полезным, поскольку более сложный продукт может не иметь варианта для каждой возможной комбинации вариантов выбора. [Сноска]

Глядя на структуру документа, я вижу, что визуализированный код выглядит следующим образом:

<tr data-option-index="0" id="gl_select_0">
  <td class="label"><label for="0">Color</label></td>

  <!-- (option-selecting swatches) -->
</tr>

Без обновления структуры документа мы можем добавить это в вашу функцию selectCallback , что должно делать примерно то, что вам нужно:

var selectedOptions = selector.selectedValues(); // This gives an array of all the selected options
var optionData = selector.product.options;  // This gives information about the options set up on the product
var form = selector.variantIdField.form; // This gives us the enclosing form element without needing to do any query-selecting

// Now lets loop through the options and update the elements
for(var i=0; i<selectedOptions.length; i++){
  var optionLabel = form.querySelector('[data-option-index="' + i + '"] label') // This reads, "Find the first <label> element inside the element with the specified data-option-index attribute inside my product form"

  // Let's make sure our code will not break and quickly check to make sure we found the element we were after. If it's blank, continue to the next option. Raising an appropriate error is left as an exercise for the reader.
  if(!optionLabel){
    continue;
  }

  var optionName = typeof optionData[i] === 'object' ? optionData[i].name : optionData[i];  // This is checking to see which of Shopify's 2 different option formats got fed into this function - it could have been either an array of titles or an array of objects that include both the name and an array of all the values. The ( check ? result_if_true : result_if_false ) syntax is called a ternary expression and is shorthand for if(check){ value_if_true } else { value_if_false }

  optionLabel.innerText = optionName + ': ' + selectedOptions[i]
}

Этот пример кода может быть помещен в любое место вашей функции selectCallback. Я бы рекомендовал размещать его либо в начале, либо в конце, вне каких-либо операторов if() внутри функции, поскольку мы хотели бы, чтобы это выполнялось независимо от того, существует ли успешно выбранный вариант или нет.

Удачи!

[Сноска]

Для проверки Javascript объектов на предмет того, что вы можете с ними сделать, я часто считаю целесообразным:

• Добавьте точку останова в свой код внутри интересующей вас функции. (Я нашел точку вручную, используя инструменты разработчика Chrome, вы можете воспользоваться ярлыком, добавив ключевое слово debugger внутри своей функции)
• Переход на страницу
• Открытие инструментов разработчика вашего браузера (для большинства браузеров, работающих под управлением Windows обычно используется сочетание клавиш F12)
• Сделайте что-нибудь на странице, что вызовет соответствующую функцию (например: нажмите на образцы разных цветов)
• Браузер будет приостанавливаться, когда достигнет точки останова.
• На вкладке console (иногда называемой в некоторых браузерах отладкой) вы можете ввести имя интересующей вас переменной, и ваши средства разработки должны автоматически заполнить имя переменной. Теперь вы можете поиграть в консоли, чтобы увидеть, каковы различные свойства, запустить функции, чтобы увидеть, какой будет их вывод, и т. Д. c.
• Помните, что если вы добавите debugger в свой исходный код, Обязательно очистите, когда закончите, удалив код отладки :)