Boundless流程

Boundless流程

依照下列流程将自定项运用于Boundless：

编辑模板的JavaScript文档

若要编辑模板的JavaScript文件，请实行下列实际操作：

PC：

在Shopify后台管理中，转到在线商店模板。

寻找要编辑的模板，随后点击实际操作编辑代码。

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

搜索代码initVariantSelectors。在该代码下边，搜索下列代码：

//CleanupvariantlabelsiftheShopify-defined//defaultsaretheonlyonesleftthis.simplifyVariantLabels(this.productSingleObject,this.$container);

ios系统：

在Shopify运用中，轻触店铺。

在营销渠道一部分中，轻触在线商店。

轻触Managethemes（管理方法模板）。

寻找要编辑的模板，随后点击实际操作编辑代码。

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

搜索代码initVariantSelectors。在该代码下边，搜索下列代码：

//CleanupvariantlabelsiftheShopify-defined//defaultsaretheonlyonesleftthis.simplifyVariantLabels(this.productSingleObject,this.$container);

安卓手机系统：

在Shopify运用中，轻触店铺。

在营销渠道一部分中，轻触在线商店。

轻触Managethemes（管理方法模板）。

寻找要编辑的模板，随后点击实际操作编辑代码。

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

搜索代码initVariantSelectors。在该代码下边，搜索下列代码：

//CleanupvariantlabelsiftheShopify-defined//defaultsaretheonlyonesleftthis.simplifyVariantLabels(this.productSingleObject,this.$container);

在下面的新行中加上下列代码：

if(typeof(productOptions)!=undefined){for(i=0;iproductOptions.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.length1){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;iproductOptions.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.length1){letoption=newOption(Pick indef productOptions[i][i],);select.add(option,select.firstChild);select.selectedIndex=0;}}}

搜索下列代码行：

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

此代码行有2个案例，均可在productVariantCallback函数公式中寻找。请仅将第二个案例更换为：

$(selectors.addToCartText).html(MakeaSelection);

备注名称：一些版本号的Boundless不包含此流程时要更换的代码行。假如您无法找到代码，则跳至下一步。

点击储存。

编辑商品网页页面模板

若要编辑商品网页页面模板，请实行下列实际操作：

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

搜索下列代码：

liquid{%assigncurrent_variant=product.selected_or_first_available_variant%}

将其更换为：

liquid{%assigncurrent_variant=product.selected_variant%}

搜索下列代码并将其删掉：

liquid{%ifvariant==product.selected_or_first_available_variant%}selected=selected{%endif%}

搜索代码{%schema%}。将下边代码黏贴在其上面的一行中：

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

{%schema%}```

变更Addtocart（加上到加入购物车）按键语言设置

您可以变更Addtocart（加上到加入购物车）按键的语言设置，使在都没有开展一切挑选以前商品不容易表明为“不能用”。

点击储存。

PC：

在Shopify后台管理中，转到在线商店模板。

寻找要编辑的模板，随后点击实际操作编辑语言表达。

在筛选条件框中，逐渐输入unavailable以表明“不能用”翻泽。

将文字不能用更换为Makeaselection：

点击储存。

ios系统：

在Shopify运用中，轻触店铺。

在营销渠道一部分，轻触在线商店。

轻触管理方法模板。

寻找要编辑的模板，随后点击实际操作编辑语言表达。

在筛选条件框中，逐渐输入unavailable以表明“不能用”翻泽。

将文字不能用更换为Makeaselection：

点击储存。

安卓手机系统：

在Shopify运用中，轻触店铺。

在营销渠道一部分，轻触在线商店。

轻触管理方法模板。

寻找要编辑的模板，随后点击实际操作编辑语言表达。

在筛选条件框中，逐渐输入unavailable以表明“不能用”翻泽。

将文字不能用更换为Makeaselection：

点击储存。

Shopify商家官方网站全文详细信息：

StepsforBoundless

FollowthesestepstoapplythecustomizationtoBoundless:

EdityourthemesJavaScriptfile

ToedityourthemesJavaScriptfile:

PC：

FromyourShopifyadmin,gotoOnlineStoreThemes.

Findthethemeyouwanttoedit,andthenclickActionsEditcode.

IntheAssetsdirectory,clicktheme.jsortheme.js.liquid.

FindthecodeinitVariantSelectors.Belowthat,findthefollowingcode:

//CleanupvariantlabelsiftheShopify-defined//defaultsaretheonlyonesleftthis.simplifyVariantLabels(this.productSingleObject,this.$container);

iPhone：

FromtheShopifyapp,tapStore.

IntheSaleschannelssection,tapOnlineStore.

TapManagethemes.

Findthethemeyouwanttoedit,andthenclickActionsEditcode.

IntheAssetsdirectory,clicktheme.jsortheme.js.liquid.

FindthecodeinitVariantSelectors.Belowthat,findthefollowingcode:

//CleanupvariantlabelsiftheShopify-defined//defaultsaretheonlyonesleftthis.simplifyVariantLabels(this.productSingleObject,this.$container);

Android：

FromtheShopifyapp,tapStore.

IntheSaleschannelssection,tapOnlineStore.

TapManagethemes.

Findthethemeyouwanttoedit,andthenclickActionsEditcode.

IntheAssetsdirectory,clicktheme.jsortheme.js.liquid.

FindthecodeinitVariantSelectors.Belowthat,findthefollowingcode:

//CleanupvariantlabelsiftheShopify-defined//defaultsaretheonlyonesleftthis.simplifyVariantLabels(this.productSingleObject,this.$container);

Addthefollowingcodeonanewlinebelow:

if(typeof(productOptions)!=undefined){for(i=0;iproductOptions.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.length1){letoption=newOption(Pick indef productOptions[i][i],);select.add(option,select.firstChild);select.selectedIndex=0;}}}

Itshouldlooksomethinglikethis:

//CleanupvariantlabelsiftheShopify-defined//defaultsaretheonlyonesleftthis.simplifyVariantLabels(this.productSingleObject,this.$container);if(typeof(productOptions)!=undefined){for(i=0;iproductOptions.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.length1){letoption=newOption(Pick indef productOptions[i][i],);select.add(option,select.firstChild);select.selectedIndex=0;}}}

Findthefollowinglineofcode:

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

Therearetwoinstancesofthislineofcode,bothfoundwithintheproductVariantCallbackfunction.Replaceonlythesecondinstancewith:

$(selectors.addToCartText).html(MakeaSelection);

Note

SomeversionsofBoundlessdonotincludethelineofcodetobereplacedinthisstep.Ifyoucantfindthecode,thenskiptothenextstep.

ClickSave.

Edityourproductpagetemplate

Toedityourproductpagetemplate:

IntheSectionsdirectory,clickproduct-template.liquid.

Findthefollowingcode:

{%assigncurrent_variant=product.selected_or_first_available_variant%}

Replaceitwith:

{%assigncurrent_variant=product.selected_variant%}

Findthefollowingcodeanddeleteit:

{%ifvariant==product.selected_or_first_available_variant%}selected=selected{%endif%}

Findthecode{%schema%}.Pastethefollowingcodeonitsownlineabovethat:

{%ifcurrent_variant==blank%}scriptvarproductOptions=[];{%foroptioninproduct.options-%}varoptionObj={};optionObj[{{forloop.index0}}]={{product.options[forloop.index0]}};productOptions.push(optionObj);{%-endfor%}/script{%endif%}

Itshouldlooksomethinglikethis:

{%ifcurrent_variant==blank%}scriptvarproductOptions=[];{%foroptioninproduct.options-%}varoptionObj={};optionObj[{{forloop.index0}}]={{product.options[forloop.index0]}};productOptions.push(optionObj);{%-endfor%}/script{%endif%}{%schema%}

ClickSave.

ChangetheAddtocartbuttonlanguagesettings

YoucanchangethelanguagesettingsfortheAddtocartbuttonsothatproductsdonotappearasUnavailablebeforeaselectionismade.

PC：

FromyourShopifyadmin,gotoOnlineStoreThemes.

Findthethemethatyouwanttoedit,andthenclickActionsEditlanguages.

IntheFilterbox,starttypingunavailabletoshowtheUnavailabletranslation.

ReplacethetextUnavailabletoMakeaselection.

ClickSave.

iPhone：

FromtheShopifyapp,tapStore.

IntheSaleschannelssection,tapOnlineStore.

TapManagethemes.

Findthethemethatyouwanttoedit,andthenclickActionsEditlanguages.

IntheFilterbox,starttypingunavailabletoshowtheUnavailabletranslation.

ReplacethetextUnavailabletoMakeaselection.

ClickSave.

Android：

FromtheShopifyapp,tapStore.

IntheSaleschannelssection,tapOnlineStore.

TapManagethemes.

Findthethemethatyouwanttoedit,andthenclickActionsEditlanguages.

IntheFilterbox,starttypingunavailabletoshowtheUnavailabletranslation.

ReplacethetextUnavailabletoMakeaselection.

ClickSave.

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