掩藏“添加到购物车”按键
2022-05-27 16:49:07
掩藏“添加到购物车”按键
在新的product.requires-contact.liquid
文档中,搜索添加到购物车按键的HTML代码。您可以检索cart
一词。
添加到购物车按键的代码因模板而异。搜索包括Addtocart
、AddToCart
或add-to-cart
等相近文字的input
或button
标记。
针对Debut,添加到购物车按键的代码如下所示所显示:
buttontype=submitname=addid=AddToCart-{{section.id}}{%unlesscurrent_variant.available%}disabled=disabled{%endunless%}class=btnproduct-form._cart-submit{%ifproduct.options.size==1andproduct.variants[0].title==DefaultTitle%}product-form__cart-submit--small{%endif%}spanid=AddToCartText-{{section.id}}{%unlesscurrent_variant.available%}{{products.product.sold_out|t}}{%else%}{{products.product.add_to_cart|t}}{%endunless%}/span/button
寻找代码后,将它放进Liquid{%comment%}
和{%endcomment%}
标记中间。这可能阻拦该代码在您的门店中表明,但假如您想稍候变更您的新模板,您可以简单将其修复。
针对Debut,改动后的代码将与下边相近:
```liquid{%comment%}buttontype=submitname=addid=AddToCart-{{section.id}}{%unlesscurrent_variant.available%}disabled=disabled{%endunless%}class=btnproduct-form._cart-submit{%ifproduct.options.size==1andproduct.variants[0].title==DefaultTitle%}product-form__cart-submit--small{%endif%}spanid=AddToCartText-{{section.id}}{%unlesscurrent_variant.available%}{{products.product.sold_out|t}}{%else%}{{products.product.add_to_cart|t}}{%endunless%}/span/button{%endcomment%}
留意
Makesurethatyoudontcommentouttheform
tagsforyourproductpage.Yourcommenttagsshouldnotsurroundanyform
or/form
tags,otherwisecustomersmightexperienceerrorswhenviewingyourproductpage.```2.点一下储存。
添加电子邮箱连接或联络表
您目前已掩藏了添加到购物车按键,可以改成添加要展现的具体内容。
电子邮箱连接
在您上一步中添加的Liquid{%endcomment%}
标记下边的新行中,添加电子邮箱连接的HTML代码:
Pleaseahref=mailto:{{shop.email}}contactus/aifyouareinterestedinthisproduct.
点一下储存。
联络表
假如要向新品模板中添加联络表,您可以拷贝模板的联络网页页面模板中的代码。若要添加联络表,请实行下列实际操作:
在Templates文件目录中,点一下page.contact.liquid
。
在该文件中搜索Liquid{%formcontact%}
标记。
拷贝从Liquid{%formcontact%}
标记往下到Liquid{%endform%}
标记的全部代码。在拷贝的代码中包括Liquid表格标记。
回到到Templates文件目录中的新product.requires-contact.liquid
文档。
在该文件中搜索完毕/form
标记。在结束/form
标记下边的新行中,黏贴联络表的代码。
下一步是将您刚黏贴的代码放进HTMLdiv标记中。div标记代码中包括的类特性将保证您的联络表可在界面上恰当展现。
在{%formcontact%}
上边的新行中,黏贴下列代码:
divclass=form-vertical/div
在{%endform%}
下边的新行中,黏贴下列代码:
/div
点一下储存。
将新模板分派给商品
模板现在已经进行,您可以将它分派给要对其掩藏添加到购物车按键的任何商品。
在Shopify后台管理中,转到商品。
点一下您要对其掩藏添加到购物车按键的企业产品的名字。
在Shopify后台管理的商品网页页面上的在线商店下,从模板款式下拉列表中挑选新的requires-contact模板。
点一下储存。
对您要向其添加新模板的每一个商品反复这种流程。
Shopify商家官方网站全文详细信息:
HidetheAddtocartbutton
Inyour
product-template-requires-contact.liquid
sectionfile,findtheHTMLcodefortheProductformofyourproductpage.Youcanfinditbysearchingforthewordform
inthefile.Whenyoufindthecode,wrapitinLiquid
{%comment%}
and{%endcomment%}
tags.Thiswillstopthecodefrombeingshownonyourstore,butwillletyoueasilyputitbackifyouwanttochangeyournewtemplatelater.ForNarrative,themodifiedcodewouldlooklikethis:
{%comment%}{%includeproduct-form%}{%endcomment%}
ClickSave.
Addanemaillinkorcontactform
NowthatyouhavehiddentheAddtocartbutton,youcanaddthecontentyouwanttoshowinstead.
EMAILLINK
Youcanaddanemaillinkthatwillopenthecustomersdefaultemailprogramandenteryourstorescustomer-facingemailaddressastherecipient.Toaddanemaillink:
OnanewlinebelowtheLiquid
{%endcomment%}
tagthatyouaddedinthelaststep,addtheHTMLcodeforanemaillink:pPleaseahref=mailto:{{shop.email}}contactus/aifyouareinterestedinthisproduct./p
ClickSave.
Contactform
Youcanaddacontactformtoyournewproducttemplatebycopyingthecodefromyourthemescontactpagetemplate.Toaddacontactform:
IntheTemplatesdirectory,click
page.contact.liquid
.FindtheLiquid
{%formcontact%}
taginthefile.CopyallofthecodefromtheLiquid
{%formcontact%}
tagdowntotheLiquid{%endform%}
tag.IncludetheLiquidformtagsinthecodethatyoucopy.Returntoyournew
product.requires-contact.liquid
fileintheTemplatesdirectory.
OnanewlinebelowtheLiquid
{%endcomment%}
tagthatyouadded,pastethecodeforthecontactform.ThenextstepistowrapthecodethatyoujustpastedinHTMLdivtags.Theclassattributeincludedinthedivtagcodewillensurethatyourcontactformrenderscorrectlyonthepage.
Onanewlineabove
{%formcontact%}
,pastethefollowingcode:divclass=form-vertical/div
Onanewlinebelow
{%endform%}
,pastethefollowingcode:/div
ClickSave.
Assignyournewtemplatetoaproduct
Nowthatthetemplateisfinished,youcanassignittoalloftheproductsforwhichyouwanttohidetheAddtocartbutton.
FromyourShopifyadmin,gotoProducts.
ClickthenameofaproductthatyouwanttohidetheAddtocartbuttonon.
OntheproductpageofyourShopifyadmin,underOnlinestore,chooseyournewrequires-contacttemplatefromtheThemetemplatedrop-downmenu.
ClickSave.
Repeatthesestepsforeachproducttowhichyouwanttoaddyournewtemplate.
文章内容由来:Shopify商户官方网站
部分文章来源于网络,如有侵权,请联系 caihong@youzan.com 删除。