shopify 二次开发 如何创建定制产品,如何让用户写入定制内容
本人 兼职 shopify、店匠二次开发、仿站、定制等开发服务,有需要的可以加我微信 abc939039210,备注 shopify
什么是定制产品
定制产品,顾名思义,就是客户定制具有自己特色的产品。例如,定制记事本 —— 客户可以给商家提供图片和文字,让商家在记事本封面打印上自己的图片和文字。按照上例,则商家需要得到用户定制得内容(图片或文字,即:文件或文本),那我们要怎么拿到客户提供得文件或文本呢,这是我说要讲的内容
一、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[<自定义名称>]"
<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 后台对应订单截图如下
4、上传文件实现的方法
利用上述方法同样也能实现文件上传,只不过有不少主题是采用异步的方法,这也就导致我们的文件无法上传,至于异步如何实现文件上传我就不再做讲述
shopify 二次开发 如何创建定制产品,如何让用户写入定制内容相关推荐
- shopify二次开发教程_详细教程:如何将Shopify的Storefront API与React和Redux结合使用...
shopify二次开发教程 by Chris Frewin 克里斯·弗里温(Chris Frewin) 详细教程:如何将Shopify的Storefront API与React和Redux结合使用 ( ...
- NX二次开发-UFUN创建圆柱UF_MODL_create_cyl1
NX二次开发-UFUN创建圆柱UF_MODL_create_cyl1 NX9+VS2012#include <uf.h> #include <uf_modl.h> #inclu ...
- NX二次开发-UFUN创建工程图注释UF_DRF_create_note
NX二次开发-UFUN创建工程图注释UF_DRF_create_note NX9+VS2012#include <uf.h> #include <uf_drf.h> #incl ...
- NX二次开发 UFUN创建倒角特征 UF_MODL_create_chamfer
NX二次开发 UFUN创建倒角特征 UF_MODL_create_chamfer #include <UF_MODL.h>//创建块(创建长方体) bool CreateBlock(con ...
- c# CAD二次开发 类库 创建各种图形、直线、圆、多段线、正方形、点等
c# CAD二次开发 类库 创建各种图形.直线.圆.多段线.正方形.点等 using Autodesk.AutoCAD.DatabaseServices; using Autodesk.AutoCAD ...
- NX二次开发-UFUN创建图纸注释uc5540
NX二次开发-UFUN创建图纸注释uc5540 NX9+VS2012#include <uf.h> #include <uf_drf.h>UF_initialize();//创 ...
- NX二次开发-UFUN创建扫掠UF_MODL_create_sweep
NX二次开发-UFUN创建扫掠UF_MODL_create_sweep 这个函数挺复杂的,我也是参考别人去做的.但是我还是没有做出来多段引导线的. 我们在做钻头螺旋槽的时候,一般都是拿一个封闭截面,三 ...
- NX二次开发-UFUN创建圆锥UF_MODL_create_cone1
NX二次开发-UFUN创建圆锥UF_MODL_create_cone1 NX11+VS2013#include <uf.h> #include <uf_modl.h>UF_in ...
- NX二次开发 UFUN创建图纸尺寸表达式抑制 UF_DRF_add_controlling_exp
NX二次开发 UFUN创建图纸尺寸表达式抑制 UF_DRF_add_controlling_exp NX8.0+VS2010#include <uf.h> #include <uf_ ...
最新文章
- Android 替换TextView 里面指定的符号
- java学习之路--零碎的知识笔记
- C# foreach循环较for循环的优势与劣势
- 分布式文件系统之Tachyon是什么?
- 使用RxJava和Completable并行执行阻止任务
- java math.cos_Java Math类静态double cos(double d)示例
- centos6.x 安装php5.6 tar,CentOs6.x安装php5.6.x Web程序 - 贪吃蛇学院-专业IT技术平台
- Java SQL解析引擎简介
- 60-10-060-命令-kafka-run-class.sh
- ES6新特性_ES6语法糖_class静态成员---JavaScript_ECMAScript_ES6-ES11新特性工作笔记034
- 以太坊到底是什么 | 工作原理
- 微信公号“架构师之路”学习笔记(一)-无限容量数据库架构设计(数据库分组、分片架构等)
- 深度学习基础知识——信息论(自信息、信息熵与马尔科夫链)
- iOS 视频播放器旋转问题小结
- php gd库干什么的,php gd库的基础知识
- 不能是underfined.xxx
- [已解决]The server cannot or will not process the request due to something that is perceived to be
- 机器学习经典算法总结之线性回归
- 好看的悬疑电影,最好是高智商的
- python全栈(中国历史天气可视化系统)