shopify 初级入手教程

shopify 初级入手教程

1. 后台代码框架结构

   
   点击 编辑代码 （edit code）进入代码模板编辑界面
   
   代码模板分为以上几个目录

   Layout：

   主题布局模板，默认情况下是theme.liquid。
   所有的前台界面都走这个界面 所有我们可以把一些公共的文件在这里引入

   Template

   1 模板文件夹 有自己的命名规则
   2 可为 product和catalog 等 提供不同的模板
   3 可通过 一下代码 引入 sections/product-template.liquid 文件

   {% section 'product-template' %}
   

   Sections

   1 组成主题的一个个可复用的模块。
   可通过配置结构 在 可视化模板 里面进行修改文案或者设置
   但是一个模块只有一种文案设置
   2 使用一下代码 引入 snippet 的文件

   同步 assign 定义变量 可被snippet 文件调用
   {%- assign collection = collections[section.settings.collection] -%}
   1 不可传输 变量  已被弃用
   {% include 'product-grid-item' %}
   2 可传输变量
   {% render 'product-grid-item', aa:"55","bb":"66" %}
   // product-grid-item.liquid 
   // <p>name: {{aa}}</p>
   

   snippet

   Liquid代码片段文件

   assets

   img、js、scss 样式 存放的地方即主题使用的所有资源，包括图像、样式表和javascript文件

   config

   一个settings_schema.json文件和一个settings_data.json文件。

   settings_schema.json
   可以配置些公共的变量

   {
    "name": {
      "en": "Extras",
      "zh-CN": "小部件",
     },
     //"name": {"Extras"},
    "settings": [
      {
        "type": "checkbox",
        "id": "show_breadcrumbs",
        "label": "Show breadcrumbs"
      },
      {
        "type": "checkbox",
        "id": "extras-mm-count-down-open",
        "label": "是否开启倒计时"
      },
      {
        "type": "text",
        "id": "extras-mm-count-down-time",
        "label": "请输入结束时间"
      }
    ]
   ``
   #### Locales
   主题的翻译locale文件，为主题提供相关语言的内容。
   
   

2. sections文件的配置

   {% schema %}
   {  
    "name": "Section name",
    "settings": [
    	{
    		type": "link_list",
            "id": "main_menu_link_list",
            "label": "Navigation",
            "default": "main-menu"
    	}
    ]
    }
    {% endschema %}
   

``

属性	描述
name	定义section名称
class	为section的包装器指定额外的class
tag	指定渲染section时的tag
settings	使用与settings_schema.json相同
blocks	blocks是可以在sections中任意添加排序删除的一个内容（在下面详细讲）
max_blocks	指定blocks的最大数量
presets	预置即将自己包含在 content_for_index 对象中，添加进主题主页
default	默认配置
locales	翻译

type的常规输入属性如下

值	说明
text	允许用户输入单行文本字段
textarea	允许用户输入多行文本字段
image_picker	允许用户上传图片
radio	允许用户使用单选按钮
select	允许用户从下拉列表中进行选择
checkbox	允许用户选中一个框，返回true或false值
range	滑块选择，限定范围内的值

type的特殊输入属性如下

值	说明
color	允许用户使用颜色选择器窗口小部件选择颜色
font_picker	允许用户从可用字体列表中进行选择
collection	允许用户选择商店中可用的产品系列
product	允许用户选择商店中可用的产品
blog	允许用户从商店中设置的博客列表中进行选择
link_list	允许用户从可用菜单中进行选择
page	允许用户选择商店中定义的特定页面
url	允许用户链接到以下资源之一:文章、博客、收藏、网页或产品或外部url(例如https://example.com)
video_url	允许用户选择主题中可用的特定代码段
richtext	可以使用richtext设置允许基本格式的文本内容。支持的格式选项有粗体、斜体、下划线、链接和段落。
html	允许商家添加自定义html代码，该代码呈现为块的内容。未关闭标记在保存设置时自动关闭。
article	允许用户引用Shopify商店中的文章。

信息设置
Shopify还允许将创建主题的作者信息放入侧边栏中，它们只有3个属性：type, content, info

类型	是否必填	描述
type	必填	定义选项所需的输入类型。 对于侧边栏设置，这只能是标题或段落
content	必填	文本内容
info	可选	向用户提供有关该选项的其他信息。

调用

{{ settings.对应属性的id }}
例如：{{ settings.color_borders }}

4. 模板语言

   {{ }}表示输出

   {{ product.title }}
   

   {% %}表示逻辑和控制流

   {% if product.available %}
    <h2>Price: $99.99</h2>
    {% else %}
    <h2 class="sold-out">Sorry, this product is sold out.</h2>
    {% endif %}
   

   参考文档
   https://www.shopify.com/partners/shopify-cheat-sheet

5. 接口类

   官方文档
   https://shopify.dev/docs/themes/ajax-api
   示例
   获取当前用户的购物车数据
   https://域名/cart.js

说明文档
https://blog.csdn.net/clinslia/article/details/105203696
模板代码处理文档
https://www.shopify.com/partners/shopify-cheat-sheet
官方ajax文档
https://shopify.dev/docs/themes/ajax-api