.png)
shopify编辑JavaScript 文件和更改添加到购物车按钮步骤
shopify编辑JavaScript在购物车按钮步骤的核心内容中添加 文件和更改
Boundless 按以下步骤将自定义项应用于 Boundless： 编辑模板JavaScript 文件若要 编辑模板JavaScript 文件，请执行以下操作：PC：在 Shopify 后
shopify编辑JavaScript 将文件和更改添加到购物车按钮步骤的文本中
Boundless 步骤
自定义项应用于 Boundless：
编辑模板JavaScript 文件
若要编辑模板的 JavaScript 文件，请执行以下操作：
PC：
在 Shopify 后台，转到网店>模板。
找到要编辑的模板，然后点击操作>编辑代码。
在Assets点击目录theme.js或theme.js.liquid。
查找代码initVariantSelectors。在该代码下方，查找以下代码：
//CleanupvariantlabelsiftheShopify-defined//defaultsaretheonlyonesleftthis.simplifyVariantLabels(this.productSingleObject,this.$container);苹果系统：
在Shopify 在应用中，轻触商店。
在销售渠道部分，触摸在线商店。
轻触Manage themes（管理模板）。
找到要编辑的模板，然后点击操作>编辑代码。
在Assets点击目录theme.js或theme.js.liquid。
查找代码initVariantSelectors。查找以下代码：
//CleanupvariantlabelsiftheShopify-defined//defaultsaretheonlyonesleftthis.simplifyVariantLabels(this.productSingleObject,this.$container);安卓系统：
在Shopify 在应用中，轻触商店。
在销售渠道部分，触摸在线商店。
轻触Manage themes(管理模板)。
找到要编辑的模板，然后点击操作>编辑代码。
在Assets点击目录theme.js或theme.js.liquid。
查找代码initVariantSelectors。查找以下代码：
//CleanupvariantlabelsiftheShopify-defined//defaultsaretheonlyonesleftthis.simplifyVariantLabels(this.productSingleObject,this.$container);添加以下代码：
if(typeof(productOptions)!="undefined"){for(i=0;i<productOptions.length;i ){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if(vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if(options.length>1){letoption=newOption('Pick' indef '' productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}代码应如下所示：
//CleanupvariantlabelsiftheShopify-defined//defaultsaretheonlyonesleftthis.simplifyVariantLabels(this.productSingleObject,this.$container);if(typeof(productOptions)!="undefined"){for(i=0;i<productOptions.length;i ){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if(vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if(options.length>1){letoption=newOption('Pick' indef '' productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}查找以下代码行：
$(selectors.addToCartText).html(theme.strings.soldOut);这个代码行有两个例子productVariantCallback在函数中找到。请只替换第二个例子：
$(selectors.addToCartText).html('MakeaSelection');注： 的某些版本Boundless 不包括此步骤中需要替换的代码行。如果找不到代码，跳到下一步。
点击保存。
编辑产品页面模板
如需编辑产品页面模板，请执行以下操作：
在Sections点击目录product-template.liquid。
查找以下代码：
liquid {% assign current_variant = product.selected_or_first_available_variant %}
更换为：
liquid {% assign current_variant = product.selected_variant %}
查找以下代码并删除：
liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
搜索代码{% schema %}
```liquid {% if current_variant == blank %}{% endif %} ``` 代码如下： ```liquid {% if current_variant == blank %}{% endif %}
{% schema %} ```
更改 Add to cart按钮语言设置(添加到购物车)
您可以更改 Add to cart(添加到购物车)按钮的语言设置，使产品在任何选择之前都不会显示为不可用。
点击保存。
PC：
在 Shopify后台，转到网店>模板。
找到要编辑的模板，然后点击操作>编辑语言。
开始在筛选条件框中键入unavailable显示不可用翻译。
不能替换文本Make a selection：
点击保存。
苹果系统：
在Shopify在应用中，轻触商店。
在销售渠道部分，触摸在线商店。
触摸管理模板。
找到要编辑的模板，然后点击操作>编辑语言。
开始在筛选条件框中键入unavailable显示不可用翻译。
不能替换文本Make a selection：
点击保存。
安卓系统：
在Shopify 在应用中，轻触商店。
在销售渠道部分，触摸在线商店。
触摸管理模板。
找到要编辑的模板，然后点击操作>编辑语言。
开始在筛选条件框中键入unavailable显示不可用翻译。
不能替换文本Make a selection：
点击保存。
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：
From your Shopify admin,go toOnline Store>Themes.
Find the theme you want to edit,and then clickActions>Edit code.
In theAssetsdirectory,clicktheme.jsortheme.js.liquid.
Findthe codeinitVariantSelectors. Below that,find the following code:
//CleanupvariantlabelsiftheShopify-defined//defaultsaretheonlyonesleftthis.simplifyVariantLabels(this.productSingleObject,this.$container);iPhone：
From theShopify app,tapStore.
In theSales channelssection,tapOnline Store.
TapManage themes.
Find the theme you want to edit,and then clickActions>Edit code.
In theAssetsdirectory,clicktheme.jsortheme.js.liquid.
Findthe codeinitVariantSelectors. Below that,find the following code:
//CleanupvariantlabelsiftheShopify-defined//defaultsaretheonlyonesleftthis.simplifyVariantLabels(this.productSingleObject,this.$container);Android：
From theShopify app,tapStore.
In theSales channelssection,tapOnline Store.
TapManage themes.
Find the theme you want to edit,and then clickActions>Edit code.
In theAssetsdirectory,clicktheme.jsortheme.js.liquid.
Findthe codeinitVariantSelectors. Below that,find the followingcode:
//CleanupvariantlabelsiftheShopify-defined//defaultsaretheonlyonesleftthis.simplifyVariantLabels(this.productSingleObject,this.$container);Add the following code on a new line below:
if(typeof(productOptions)!="undefined"){for(i=0;i<productOptions.length;i ){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if(vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if(options.length>1){letoption=newOption('Pick' indef '' productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}It should look something like this:
//CleanupvariantlabelsiftheShopify-defined//defaultsaretheonlyonesleftthis.simplifyVariantLabels(this.productSingleObject,this.$container);if(typeof(productOptions)!="undefined"){for(i=0;i<productOptions.length;i ){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if(vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if(options.length>1){letoption=newOption('Pick' indef '' productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}Findthe following line of code:
$(selectors.addToCartText).html(theme.strings.soldOut);There aretwo instancesof this line of code,both found within theproductVariantCallbackfunction. Replace only thesecondinstance with:
$(selectors.addToCartText).html('MakeaSelection');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.
ClickSave.
Edit your product page template
To edit your product page template:
In theSectionsdirectory,clickproduct-template.liquid.
Findthe following code:
{%assigncurrent_variant=product.selected_or_first_available_variant%}Replace it with:
{%assigncurrent_variant=product.selected_variant%}Findthe following code and delete it:
{%ifvariant==product.selected_or_first_available_variant%}selected="selected"{%endif%}Findthe code{% schema %}. Paste the following code on its own line above that:
{%ifcurrent_variant==blank%}<script>varproductOptions=[];{%foroptioninproduct.options-%}varoptionObj={};optionObj[{{forloop.index0}}]="{{product.options[forloop.index0]}}";productOptions.push(optionObj);{%-endfor%}</script>{%endif%}It should look something like this:
{%ifcurrent_variant==blank%}<script>varproductOptions=[];{%foroptioninproduct.options-%}varoptionObj={};optionObj[{{forloop.index0}}]="{{product.options[forloop.index0]}}";productOptions.push(optionObj);{%-endfor%}</script>{%endif%}{%schema%}ClickSave.
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：
From your Shopify admin,go toOnline Store>Themes.
Find the theme that you want to edit,and then clickActions>Edit languages.
In theFilterbox,start typingunavailableto show the "Unavailable" translation.
Replace the textUnavailabletoMake a selection.
ClickSave.
iPhone：
From theShopify app,tapStore.
In theSales channelssection,tapOnline Store.
TapManage themes.
Find the theme that you want to edit,and then clickActions>Edit languages.
In theFilterbox,start typingunavailableto show the "Unavailable" translation.
Replace the textUnavailabletoMake a selection.
ClickSave.
Android：
From theShopify app,tapStore.
In theSales channelssection,tapOnline Store.
TapManage themes.
Find the theme that you want to edit,and then clickActions>Edit languages.
In theFilterbox,start typingunavailableto show the "Unavailable" translation.
Replace the textUnavailabletoMake a selection.
ClickSave.
文章内容来源：Shopify官家官网
