美狮贵宾会官网

美狮贵宾会官网(LianLian)官网首页

shopify编纂JavaScript 文件和更改增长到购物车按钮步骤

2022/03/08
自建站

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商户官网原文详情：

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商户官方网站


更多
【网站地图】