使用 javascript 显示所选名称
Using javascript to display selected name
在我的 shopify 主题上，我试图在颜色标签旁边显示颜色名称。例如，如果选择绿色，“颜色：”将变为“颜色：绿色”，如果选择红色，它将变为“颜色：红色”。我目前正在使用一个名为 Basel 的主题。
**巴塞尔主题产品页面 - https://new-basel2.myshopify.com/collections/bag/products/vintage-cinch-backpack
我已经尝试将几行不同的代码添加到我的 liquid 文件中，但没有任何效果。我现在意识到我需要使用 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>
包含 var selectCallback = function(variant, selector) 的 3 个文件
product.design_default.liquid - https://gist.github.com/lok343/9e3286aa262b915438c091bf820eebcf
snippets/product.json.liquid - https://gist.github.com/lok343/b7251646824b6a9f265b0d7e270f64cd
snippets/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]
}
}
我查看了您链接的页面，看起来您的主题是 运行每当购物者的选择发生变化时都会启用一个名为 "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（参考特定指数的期权价值）。在链接的产品中，颜色是第一个也是唯一的选项维度，因此 variant.options[0] 或 variant.option1 是您访问当前所选产品的颜色值的两种方式。
如果您需要在任意产品中专门查找颜色选项并希望忽略任何其他选项名称，我会向您指出 selector.product，这将使您能够访问完整的产品对象。这意味着 selector.product.options 将允许您访问当前产品上的所有选项名称，以便您可以识别哪个维度是彩色维度。
示例时间！
下面是您可能想要添加到此函数的示例。
查看 selector 对象，我看到一个名为 selectedValues 的函数，该函数 returns 是所有当前选定选项的数组。这看起来很有用，因为更复杂的产品可能不会为每种可能的选项选择组合提供变体。 [脚注]
查看文档结构，我看到呈现的代码如下所示：
<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 在你的函数中）
- 导航到页面
- 打开浏览器的开发工具（大多数浏览器的键盘快捷键通常是 F12 运行在 Windows 上）
- 在页面上做一些会触发相关功能的事情（例如：点击不同的色样）
- 浏览器现在会在到达您的断点时暂停。
- 在
console 选项卡（有时在某些浏览器上命名为 'debug'），您可以键入您感兴趣的变量名称，您的开发工具应该会自动完成变量名称.您现在可以在控制台中尝试查看不同的属性，运行 函数以查看它们的输出，等等。
- 请记住，如果您将
debugger 添加到您的源代码中，请务必在完成后通过删除调试代码来清理它:)
在我的 shopify 主题上，我试图在颜色标签旁边显示颜色名称。例如，如果选择绿色，“颜色：”将变为“颜色：绿色”，如果选择红色，它将变为“颜色：红色”。我目前正在使用一个名为 Basel 的主题。
**巴塞尔主题产品页面 - https://new-basel2.myshopify.com/collections/bag/products/vintage-cinch-backpack
我已经尝试将几行不同的代码添加到我的 liquid 文件中，但没有任何效果。我现在意识到我需要使用 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>
包含 var selectCallback = function(variant, selector) 的 3 个文件
product.design_default.liquid - https://gist.github.com/lok343/9e3286aa262b915438c091bf820eebcf
snippets/product.json.liquid - https://gist.github.com/lok343/b7251646824b6a9f265b0d7e270f64cd
snippets/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]
}
}
我查看了您链接的页面，看起来您的主题是 运行每当购物者的选择发生变化时都会启用一个名为 "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（参考特定指数的期权价值）。在链接的产品中，颜色是第一个也是唯一的选项维度，因此 variant.options[0] 或 variant.option1 是您访问当前所选产品的颜色值的两种方式。
如果您需要在任意产品中专门查找颜色选项并希望忽略任何其他选项名称，我会向您指出 selector.product，这将使您能够访问完整的产品对象。这意味着 selector.product.options 将允许您访问当前产品上的所有选项名称，以便您可以识别哪个维度是彩色维度。
示例时间！
下面是您可能想要添加到此函数的示例。
查看 selector 对象，我看到一个名为 selectedValues 的函数，该函数 returns 是所有当前选定选项的数组。这看起来很有用，因为更复杂的产品可能不会为每种可能的选项选择组合提供变体。 [脚注]
查看文档结构，我看到呈现的代码如下所示：
<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在你的函数中） - 导航到页面
- 打开浏览器的开发工具（大多数浏览器的键盘快捷键通常是 F12 运行在 Windows 上）
- 在页面上做一些会触发相关功能的事情（例如：点击不同的色样）
- 浏览器现在会在到达您的断点时暂停。
- 在
console选项卡（有时在某些浏览器上命名为 'debug'），您可以键入您感兴趣的变量名称，您的开发工具应该会自动完成变量名称.您现在可以在控制台中尝试查看不同的属性，运行 函数以查看它们的输出，等等。 - 请记住，如果您将
debugger添加到您的源代码中，请务必在完成后通过删除调试代码来清理它:)