shopify编辑JavaScript 文件和更改添加到购物车按钮步骤

Boundless 步骤按照以下步骤将自定义项应用于 Boundless：编辑模板的 JavaScript 文件若要编辑模板的 JavaScript 文件，请执行以下操作：PC：在 Shopify 后

目录

• 答案
• 文章目录
• shopify编辑JavaScript 文件和更改添加到购物车按钮步骤详细回答
• Shopify商户官网原文详情：" target="_self">Shopify商户官网原文详情：

shopify编辑JavaScript 文件和更改添加到购物车按钮步骤详细回答

Boundless 步骤

按照以下步骤将自定义项应用于 Boundless：

编辑模板的 JavaScript 文件

若要编辑模板的 JavaScript 文件，请执行以下操作：

PC：

1. 在 Shopify 后台中，转到在线商店 > 模板。

2. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Assets 目录中，点击 theme.js 或 theme.js.liquid。

2. 查找代码 initVariantSelectors。在该代码下方，查找以下代码：

// Clean up variant labels if the Shopify-defined // defaults are the only ones left this.simplifyVariantLabels(this.productSingleObject, this.$container);

苹果系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Assets 目录中，点击 theme.js 或 theme.js.liquid。

2. 查找代码 initVariantSelectors。在该代码下方，查找以下代码：

// Clean up variant labels if the Shopify-defined // defaults are the only ones left this.simplifyVariantLabels(this.productSingleObject, this.$container);

安卓系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Assets 目录中，点击 theme.js 或 theme.js.liquid。

2. 查找代码 initVariantSelectors。在该代码下方，查找以下代码：

// Clean up variant labels if the Shopify-defined // defaults are the only ones left this.simplifyVariantLabels(this.productSingleObject, this.$container);

在下面的新行中添加以下代码：

if (typeof(productOptions) != "undefined") {   for (i = 0; i < productOptions.length; i++) {     const vowels = ['a', 'e', 'i', 'o', 'u'];     const firstOptionLetter = productOptions[i][i][0].toLowerCase();     let indef = 'a';     if (vowels.includes(firstOptionLetter)) {       indef = 'an';     };     const select = document.querySelectorAll('.single-option-selector')[i];     const options = select.querySelectorAll('option');     if (options.length > 1) {       let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');       select.add(option, select.firstChild);       select.selectedIndex = 0;     }   } }

代码应如下所示：

// Clean up variant labels if the Shopify-defined // defaults are the only ones left this.simplifyVariantLabels(this.productSingleObject, this.$container); if (typeof(productOptions) != "undefined") {   for (i = 0; i < productOptions.length; i++) {     const vowels = ['a', 'e', 'i', 'o', 'u'];     const firstOptionLetter = productOptions[i][i][0].toLowerCase();     let indef = 'a';     if (vowels.includes(firstOptionLetter)) {       indef = 'an';     };     const select = document.querySelectorAll('.single-option-selector')[i];     const options = select.querySelectorAll('option');     if (options.length > 1) {       let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');       select.add(option, select.firstChild);       select.selectedIndex = 0;     }   } }

1. 查找以下代码行：

$(selectors.addToCartText).html(theme.strings.soldOut);

此代码行有两个实例，均可在 productVariantCallback 函数中找到。请仅将第二个实例替换为：

$(selectors.addToCartText).html('Make a Selection');

备注：某些版本的 Boundless 不包含此步骤中要替换的代码行。如果您无法找到代码，则跳至下一步。

1. 点击保存。

编辑产品页面模板

若要编辑产品页面模板，请执行以下操作：

1. 在 Sections 目录中，点击 product-template.liquid。

2. 查找以下代码：

   liquid {% assign current_variant = product.selected_or_first_available_variant %}

   将其替换为：

   liquid {% assign current_variant = product.selected_variant %}

3. 查找以下代码并将其删除：

   liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

4. 查找代码 {% schema %}。将下方代码粘贴在其上方的一行中：

   ```liquid {% if current_variant == blank %} {% endif %} ``` 代码应如下所示： ```liquid {% if current_variant == blank %} {% endif %}

   {% schema %} ```

   更改 Add to cart（添加到购物车）按钮语言设置

   您可以更改 Add to cart（添加到购物车）按钮的语言设置，使在没有进行任何选择之前产品不会显示为“不可用”。

1. 点击保存。

PC：

1. 在 Shopify 后台中，转到在线商店 > 模板。

1. 找到要编辑的模板，然后点击操作 > 编辑语言。

2. 在筛选条件框中，开始键入 unavailable 以显示“不可用”翻译。

3. 将文本不可用替换为 Make a selection：

4. 点击保存。

苹果系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分，轻触在线商店。

3. 轻触管理模板。

1. 找到要编辑的模板，然后点击操作 > 编辑语言。

2. 在筛选条件框中，开始键入 unavailable 以显示“不可用”翻译。

3. 将文本不可用替换为 Make a selection：

4. 点击保存。

安卓系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分，轻触在线商店。

3. 轻触管理模板。

1. 找到要编辑的模板，然后点击操作 > 编辑语言。

2. 在筛选条件框中，开始键入 unavailable 以显示“不可用”翻译。

3. 将文本不可用替换为 Make a selection：

4. 点击保存。

Shopify商户官网原文详情：">Shopify商户官网原文详情：

Steps for Boundless

Follow these steps to apply the customization to Boundless:

Edit your theme's JavaScript file

To edit your theme's JavaScript file:

PC：

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Assets directory, click theme.js or theme.js.liquid.

2. Find the code initVariantSelectors. Below that, find the following code:

   // Clean up variant labels if the Shopify-defined // defaults are the only ones left this.simplifyVariantLabels(this.productSingleObject, this.$container);

iPhone：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Assets directory, click theme.js or theme.js.liquid.

2. Find the code initVariantSelectors. Below that, find the following code:

   // Clean up variant labels if the Shopify-defined // defaults are the only ones left this.simplifyVariantLabels(this.productSingleObject, this.$container);

Android：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Assets directory, click theme.js or theme.js.liquid.

2. Find the code initVariantSelectors. Below that, find the following code:

   // Clean up variant labels if the Shopify-defined // defaults are the only ones left this.simplifyVariantLabels(this.productSingleObject, this.$container);

1. Add the following code on a new line below:

   if (typeof(productOptions) != "undefined") {   for (i = 0; i < productOptions.length; i++) {     const vowels = ['a', 'e', 'i', 'o', 'u'];     const firstOptionLetter = productOptions[i][i][0].toLowerCase();     let indef = 'a';     if (vowels.includes(firstOptionLetter)) {       indef = 'an';     };     const select = document.querySelectorAll('.single-option-selector')[i];     const options = select.querySelectorAll('option');     if (options.length > 1) {       let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');       select.add(option, select.firstChild);       select.selectedIndex = 0;     }   } }

   It should look something like this:

   // Clean up variant labels if the Shopify-defined // defaults are the only ones left this.simplifyVariantLabels(this.productSingleObject, this.$container); if (typeof(productOptions) != "undefined") {   for (i = 0; i < productOptions.length; i++) {     const vowels = ['a', 'e', 'i', 'o', 'u'];     const firstOptionLetter = productOptions[i][i][0].toLowerCase();     let indef = 'a';     if (vowels.includes(firstOptionLetter)) {       indef = 'an';     };     const select = document.querySelectorAll('.single-option-selector')[i];     const options = select.querySelectorAll('option');     if (options.length > 1) {       let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');       select.add(option, select.firstChild);       select.selectedIndex = 0;     }   } }

2. Find the following line of code:

   $(selectors.addToCartText).html(theme.strings.soldOut);

   There are two instances of this line of code, both found within the productVariantCallback function. Replace only the second instance with:

   $(selectors.addToCartText).html('Make a Selection');

   Note

   Some versions of Boundless do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.

3. Click Save.

Edit your product page template

To edit your product page template:

1. In the Sections directory, click product-template.liquid.

2. Find the following code:

   {% assign current_variant = product.selected_or_first_available_variant %}

   Replace it with:

   {% assign current_variant = product.selected_variant %}

3. Find the following code and delete it:

   {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

4. Find the code {% schema %}. Paste the following code on its own line above that:

   {% if current_variant == blank %}   <script>     var productOptions = [];{% for option in product.options -%}       var optionObj = {};       optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}";       productOptions.push(optionObj);     {%- endfor %}   </script> {% endif %}

   It should look something like this:

   {% if current_variant == blank %}   <script>     var productOptions = [];{% for option in product.options -%}       var optionObj = {};       optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}";       productOptions.push(optionObj);     {%- endfor %}   </script> {% endif %}{% schema %}

5. Click Save.

Change the Add to cart button language settings

You can change the language settings for the Add to cart button so that products do not appear as "Unavailable" before a selection is made.

PC：

1. From your Shopify admin, go to Online Store > Themes.

1. Find the theme that you want to edit, and then click Actions > Edit languages.

2. In the Filter box, start typing unavailable to show the "Unavailable" translation.

3. Replace the text Unavailable to Make a selection.

4. Click Save.

iPhone：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

1. Find the theme that you want to edit, and then click Actions > Edit languages.

2. In the Filter box, start typing unavailable to show the "Unavailable" translation.

3. Replace the text Unavailable to Make a selection.

4. Click Save.

Android：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

1. Find the theme that you want to edit, and then click Actions > Edit languages.

2. In the Filter box, start typing unavailable to show the "Unavailable" translation.

3. Replace the text Unavailable to Make a selection.

4. Click Save.

文章内容来源：Shopify商户官方网站