shopify如何创建定制产品,如何让用户写入定制内容
Mark Lv4

什么是定制产品

定制产品,顾名思义,就是客户定制具有自己特色的产品。例如,定制记事本 —— 客户可以给商家提供图片和文字,让商家在记事本封面打印上自己的图片和文字。按照上例,则商家需要得到用户定制得内容(图片或文字,即:文件或文本),那我们要怎么拿到客户提供得文件或文本呢,这是我说要讲的内容

一、shopify 购物车的 properties 属性

通过查看官方文档Ajax cart,我们可以得知 properties 是一个对象,这个对象是用来存放客户添加的自定义信息(官方描述:收集产品的自定义信息)。也就是我们的文件或文本都可以放到这里

二、使用 properties 属性,收集产品的自定义信息

按照官方文档,我们可以知道有两种做法,一种是自己在异步请求 Ajax API cart/add 中加入 properties,另一种则是在表单中添加 新的项(name=properties[<属性名>])。对于第一种我不举例,知道如何写异步请求的,基本自己看官方文档就能理解。我主要讲第二种,这种也是比较常用的做法

1、找到 form 表单位置

如果您未添加其他的产品页面内容模板,则form 表单位置默认是 product-template.liquid 文件里面,找到下图位置,form 就是我们提交信息的表单

表单位置

表单对应产品页面位置如下

在这里插入图片描述

2、在form 中 添加 properties 输入框

输入内容, 元素你可以随便改,不过你要确定的是 input 的 name 为 “properties[<自定义名称>]”

1
2
3
4
5
<p class="line-item-property__field">
<label for="monogram">Monogram (up to 3 letters)</label>
<input required id="monogram" style="width:120px; max-width:100%;" type="text" name="properties[Monogram]">
</p>

修改完我们可以得下面效果图

效果图

3、测试

购物车

在这里插入图片描述

模拟下单,shopify 后台对应订单截图如下

在这里插入图片描述

  • Post title:shopify如何创建定制产品,如何让用户写入定制内容
  • Post author:Mark
  • Create time:2021-01-11 10:59:45
  • Post link:https://m.iqimeng.com/2021/01/11/shopify/shopify如何创建定制产品,如何让用户写入定制内容/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.