什么是Shopify?
一个概览, 对Shopify运行逻辑的大概的介绍,并且抽象出一个贯穿始终的概念:
作为一个Shopify开发者, 我们需要为商家提供满足他们的配置并且我们还要实现对应的页面功能! shopify.dev/docs
- app: shopify.dev/docs/apps/b…
- theme: shopify.dev/docs/storef…
总结:
Shopify就是一个平台, 它解决了商家去售卖东西的需求, 一切的一切都是为了商家展示商品价值 ⇒ 吸引顾客购买!
什么是Shopify的主题
这个是Shopify自己的概念, 我们可以理解为就是一个”网站模版“, 我们服务的是不同的商家还有这些商家背后对应的消费者, 而作为开发者我们开发好一个主题, 或者说一个”网站模版“后,商家就可以在上面进行“编辑”操作, 进而影响最终呈现给消费者浏览的页面!
为了让你们更好的理解, 我们可以来画一个图, 我们大致的模拟一下这个过程
在了解了整体的流程后, 你会发现最终消费者看到的我们的主题theme(也就是网站模版), 受到两个因素的影响:
- 开发者生产出的主题模版
- 商家编辑后产出的主题
而对于开发者开发出来的主题, 不仅要考虑到商家编辑的范围对页面的影响, 也要考虑最终消费者看到网站后的感受,而这个也正是Shopify开发和前端开发一个比较不同的地方,也是Shopify开发复杂度急剧升高的地方.
那么什么是theme呢?它的配置页面是什么样子的?这里我们以官方的dawn主题为例, 查看demo在线: themes.shopify.com/themes/dawn…
我们随即打开f12查看网站的元素, 我们可以发现Shopify官方提供的这个主题在我们看来就是在卖货! 并且, 它有一些非常值得我们注意到的地方, 比如: 对于页面而言, 随着滚动、点击我们可以看到更多的 商品 信息, 并且右上角似乎还有用户的登录注册功能.
而在这里, 有一个值得我们重点注意到的东西,是右侧的元素栏, 我们会发现所有的页面的主题我们可以浏览的元素都在一个main标签中, 并且这个main由一个一个的section组成,每一个section的id都包含着一个似乎相似的id: shopify-section-template—, 是的这很重要, 这其实揭露了Shopify的组成问题, 也就是Shopify的网站是由一个一个的section模块拼接而成的, 也可以理解为由一个一个的大组件组成!!!开发者的任务就是完成这一个一个的可以高度复用的模块, 如图:
作为开发者, 开发出一个不错的主题就需要我们掌握对应的开发技术栈外, 我们还需要考虑的一个关键因素: 商家怎么配置主题, 以及配置了主题之后的效果是什么.
而正是出于此, 我们除了要学习前端最基本的技术: html,css,js以为, 我们还需要去学习Shopify提供给我们的liquid模版语言(如果你之前做过php开发, 应该对它会非常熟悉, 也许之后我们可以介绍介绍模版服务….), 所以我想你大概对我们作为开发者要做什么有了一个基本的了解了, 主题开发也是一个非常有趣的事情, 我们会在接下来的篇章从liquid到我们最终实现一个基于Shopify的电商网站, 以及进阶的功能: 网站性能优化, 创意模块, 视觉效果, 转化率监测等等…
这是展示给用户看的, 但是当我们的客户(也就是商家)想要对我们完成的主题theme做更多的操作, 或者需要更精细的控制Shopify主题时, 我们就需要用到Shopify APP的开发!
什么是Shopify的app
app的产生:
当商家在对我们交付的主题编辑时, 商家其实对于主题的可控度是有限的, 这一点在商家面对一些更复杂的需求时更加明显, 比如: 商家想要的在它的Shopify管理台看到页面中一个表单提交的情况, 但是我们交付给商家的却只有一个主题的编辑, 这时候商家就需要借助app的功能来实现!
所以Shopify的app就是一个类似插件的东西, 帮助商家完成主题以外的功能, 并且这些功能一般不会影响到主题, 具体的app的功能取决于商家遇到了怎样的需求!
实现一个不错的APP不仅仅需要去了解Shopify的数据结构类型, 以及如何获取, 其实更重要的是先搞清楚Shopify的APP的分区(即: 必须要在初始化时清楚知道APP的功能范围).
小结
我们主要说了Shopify的最重要的两个技术: theme和app, 接下来我们会开始介绍Shopify的theme开发, 从0到1的实现一个Shopify的theme主题, 并且这些主题的代码最终都会开源出来!
标签：Shopify,商家,一个,APP,主题,theme,我们 From： https://blog.csdn.net/qq_66118130/article/details/143761856原文链接：https://juejin.cn/post/7436667191540301834