每一个 Shopify 独立站上,都会留一个让客户主动跟我们联系的方式,有时候为了更快的了解客户情况,我们可能会要求客户填写例如订单号、准备购买的商品等信息,那么如何在表单中增加这些选项呢?
首先,我们要开通「联系我们」这个页面。如下图:
保存发布以后,右上角有一个查看页面,就能看到联系我们的表单了。
接下来是重点,也很简单,只需要改两处代码即可。
找到你当前用的模板并点击编辑
然后参照下图,找到page.contact.liquid
这个文件,细心的朋友会发现,这里就是联系我们的表单内容
<label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
<!--关注微信公众号「Shopify插件服务」-->
<label for="{{ formId }}-order">{{ 'contact.form.order' | t }}</label>
<input type="text" id="{{ formId }}-order" name="contact[{{ 'contact.form.order' | t }}]" value="{% if form[order] %}{{ form[order] }}{% elsif customer %}{{ customer.order }}{% endif %}">
这里代码简单解释一下
里面contact.form.phone
里面的phone
是我们定义的一个内容的名字,你可以自定义任何内容,bepei.com
都可以。但是改了的话,后面其他phone
也要全部改成bepei.com
,相信有一点html基础的人都知道吧。
pattern="[0-9\-]*"
这个是一个参数校验,通过正则表达式来让用户输入的内容全部都是符合要求的。比如这里0-9
就是必须输入全是数字。正则表达式还有很多用法。有机会再讲解一下。
到这里点击保存以后,页面上就会有相应的表单出来了。
但是这里会有一个错误translation missing: zh-CN.contact.form.order
,意思是在ZH-CN这个语言包里面,没有找到order。很简单,只需要修改一下语言包就行。
同样在代码里面,找到Locales
这个文件夹,里面找到zh-CN.json
这个文件,在如下位置,增加你自定义的名字即可。比如我自定义的是order
,那我增加的就是order
。保存发布即可。
如下图,订单编号已经显示出来了。
提交一个资料,看是否能接收到邮件。
有任何问题,欢迎联系我,也可以评论留言。