Shopify二次开发之一：项目结构解析

SuppperSA

已于 2024-01-19 14:52:14 修改

阅读量1k

点赞数 2

分类专栏： shopify 文章标签：前端 shopify

于 2023-11-03 20:05:00 首次发布

本文链接：https://blog.csdn.net/SupperSA/article/details/134201781

版权

shopify 专栏收录该内容

8 篇文章 12 订阅

订阅专栏

二次开发要求

关于每个template的页面解释

二次开发要求

需要了解开发语言 Liquid
了解html代码
需要安装Shopify CLI所需要的环境

以shopify cli2命令二次开发商店，通过以下命令去登录商店、拉取代码、推送代码。

登录
shopify login --store {stroeName}.myshopify.com

退出登录
shopify logout

拉代码
shopify theme pull

推代码
shopify theme push

运行
shopify theme serve

拉取下来的项目结构如下

├── assets //静态资源文件
    └── test.png
├── config  //全局配置
    └── settings_schema.json   //全局theme配置，通过shopify admin设置
    └── settings_data.json       //全局数据，在liquid模板可以通过 {{ settings_data.color_page_bg }} 访问
├── layout
    └── theme.liquid  //主题模板入口文件
├── locales  //配置不同地区的文字
├── sections //模板中的块，用于构建页面的不同部分
    └── header.liquid
    └── ...
├── snippets  //可复用的代码片段，可以传入”props“
└── templates //商店模板，每个模板对应于一个特定类型的页面，比如首页、产品页面、购物车页面等
    └── customers
    └── page.json
    └── index.json 或 index.liquid
    └── 404.json

提示：对于shopify新手开发，可能并不知道templates下的文件是如何配置并对应到商店中的，也不知道section是什么，肯定很懵，再加上有之前的编程经验，可能会惯性思考想到vue或者react中的配置路由，或者next项目下配置文件夹结构来显示不同的页面，components编写组件。但是不用疑惑，在shopify中需要摒弃以上所有的项目经验，模板页面都是shopify规定好的，所对应“路由”，不可重命名，结构如下。

关于每个template的页面解释

.json是页面配置信息，以下称模板，当然它并不是一个模板而是一个json配置，用于告诉shopify需要给我渲染对应的内容。

customers：文件夹用于处理与顾客账户和注册/登录相关的页面和功能。

404.json：在访问页面不存在的页面路径时，shopify会自动处理跳到404.json配置下的模板中。

article.json：在后台编辑，Organization可以选择创建人Author和所属Blog，然后用article模板去渲染。

blog.json：文章列表模板。

cart.json：购物车模板。

collection.json：产品集合模板，比如summer集合，具有某些条件去筛选产品。

gift_card.liquid： 礼品卡模板，通过后台邮箱去发送给指定邮箱。

index.json： 主页模板，网站的门面。

list-collections.json： 产品类型集合模板，比如卖衣服的商店，比如春、夏、秋、东，四种集合，或短袖、长袖集合，可以在网站的任何地方通过 collections['handle']去获取集合信息。

以上frontpage就是一个句柄，在liquid模板中通过collections['frontpage']去访问

{% for product in collections['frontpage'].products %}
  {% render 'product-item', product: product %}
{% endfor %}

page.json和page.contact.json：两个页面模板以及别的page.xxx.json的模板，page.json可以是网站的简介模板也可以是其他的一些信息，page.contact.json 是联系商店的页面模板，在后台可以添加多个page，可以选择page模板中的其中一个充当渲染模板。

xxx可以是“about”，也可以是“随意命名”，生成之后Theme template就会有相应的选择。

Theme template

Default page对应page.json模板，contact对应的page.contact.json模板。

product.json：配置产品详情模板，可以浏览产品并添加进购物车。

search.json：配置搜索关键字的模板。

password.json: 配置商店密码访问模板，商店开发阶段需要通过输入商店的后台设置的密码访问商店网站，一旦商店准备好正式上线，商店所有者可以在 Shopify 后台取消密码保护，从而使商店对所有人开放。

注意：以上所有页面名称不可更改！！！都是shopify模板规定好的，在通过链接页面跳转时页面都会跳到对应的网站路径渲染不同的模板。

值得注意的是，我们看到上面templates有.liquid和.json, 是因为

1、任何template可以是.json也可以是.liquid文件，.liquid section在admin后台编辑器中是无法看到

Add section这个选项, 而.json能看到并配置section块。

2、但不是所有sections下的section.liquid在编辑器中section列表查看，需要配置section.liquid下schema中的presets。
  "presets": [
    {
      "name": "Slideshow",  设置名字后就可以在后台编辑器中Add section的列表中看到
    }
  ]
如果没有配置presets将无法在上述列表中看到Slideshow这个section。