使用 Vuejs 改写 Shopify 地址组件、商品属性选择器
date
Oct 15, 2021
slug
use-vue2.x-create-shopify-address-product-component
status
Published
tags
Vue2.x
Vuejs
Shopify
跨境电商
summary
使用 Vue2.x 实现类 Shopify 的属性选择器与地址选择器
type
Post
背景
因为做了一段时间的类 Shopify sass 平台了,C 端比较重要的地址、商品选择之前使用的都是前人直接从 Shopify 复制的编译后的代码,改的人脑壳疼。恰好这次新开项目我来负责,在研究了一下当前主流的 Shopify/店匠/Shoppy等平台后,开始动手用 Vue2.x 来改写。
分解任务
商品选择器
数据问题
既然要做 sass 建站平台,那我们为了引流,肯定要能够支持当前的主流建站平台数据。比如:Shopify、店匠、Shoppy等。因为不是前后端分离的项目,数据层面的差异得由后端抹平,差异主要体现在多规格属性商品(3+属性)、双规格属性商品、单规格属性商品、标品。主体的数据结构差异不是特别大,以 Shopify 数据机构为准即可,不同平台会有一些自定义字段以及特有字段,查阅对应的 B 端即可猜个八九不离十 🐶
属性组合问题
先来说俩个实现思路:
- 国内大多数电商的开发思路是将属性分开做判断
- Shopify 是将属性完全放在一起求幂集
假设当前有一件衣服包含:颜色、尺码俩个属性,上述1点会将颜色、尺码分别放置在俩个数组中,分开管理,当选中后求得一个sku(一组),但是后续如果要做属性反向选择难度大;Shopify 则是拿到所有的属性(颜色:red、blue;尺码:m、x)做幂集(red、red-m、red-x、blue、blue-m、blue-x、x、x-red、x-blue、m、m-red、m-blue等)求得所有结果集后根据
options
字段渲染属性,通过点击属性可以从结果集中拿到这个属性的 sku 集合。一个是将求 sku 的操作放在选择后做,一个是放在选择前做。
属性是否支持反向选择&反选
这个点难在当正选/反选一个属性后,如果包含该属性的sku缺货,那么sku对应的属性要置灰。反选调当前属性后置灰取消。假设当前有一件衣服包含:颜色、尺码俩个属性,颜色:red、blue;尺码:m、x。正反选的情况是先选颜色再选尺码(red-m,选red时就得判断red-m、red-x这俩个sku哪个缺货,缺货的要置灰)或先选尺码再选颜色(m-red,选m时就得判断m-red、m-blue这俩个sku哪个缺货,缺货的要置灰)然后此时如果反选掉 red 或 m 后,置灰状态要取消掉。
我采用与 Shopify 相同的做法并且实现了上述三个难点。详情可查看:
地址
数据问题
注册 Shopify 店铺账号后,应用模版。
- 替换链接中的 xx :
https://xx.myshopify.com/admin/settings/shipping/profiles/create
- 打开控制台,点击network,找请求 country-services
- 在这个链接的右方有一列名为:initiator 是这个请求对应的调用栈。在其中找到
getCountries
- 打断点,将json数据复制出来即可(根据需求清洗数据)
组件模版渲染
先来说俩个实现思路:
- 国内大多数电商的开发思路是统一使用一套模版(即email、phone等表单项位置固定),然后监听每个表单项的事件(blur、change)动态修改表单项的(切换国家后,动态显示/隐藏表单项)
- Shopify 是将模版转为 json schema(他们根据用户喜好定义了多套模版),然后通过对表单项事件的监听重新刷新整个地址模版
一个采用局部刷新,一个采用整体刷新
我采用与 Shopify 相同的做法并且自己实现了一套 c 端组件,利用自己实现的表单组件完成了编写。
c端组件(阅读 element-ui 后自己造的轮子 🐶):
地址组件:
总结
从上面俩个组件的实现可以看到俩种不同的开发思想,一种是局部刷新,一种是整体刷新。对应到目前的前端主流框架/库:Vue、React,其实也是相同的思想,vue 劫持数据的变化,更新该数据的依赖项,而 react 则根据 state/props 的变化来刷新当前组件 ui。