shopify使用记录（未完待续....）

schema主题模块开发详解
https://help.shopify.com/en/themes/development/theme-editor/settings-schema#creating-from-scratch
liquid语法手册
https://liquid.bootcss.com/tags/iteration/

开发前要有一个好习惯呦

添加下面代码到settings中下次找文件的时候很方便

{
      "type": "text",
      "id": "private",
      "label": "程序参考字段默认勿动",
      "default": "product-page-text"
}

俺们常用的属性集合

"type": "text"    //输入框
"type": "checkbox"    //多选框
"type": "html"    //html代码块
"type": "image_picker"    //图片
"type": "textarea"    //文本域
"type": "richtext"    //富文本
"type": "collection" //选择产品分类
"type": "url"         //链接

模块开关

{% if section.settings.enable %}
	//把代码放到开关里然后在schema创建一个checkbox	.........
{% endif %}

块的使用

{%- for block in section.blocks -%}
    <div class="point-item">
        <img src="{{ block.settings.icon | img_url: '300x300' }}"/>
        <div class="point-content">
            <span>{{ block.settings.title | strip }}</span><br>
            {{ block.settings.infos | strip }}
        </div>
    </div>
{%- endfor -%}
/*-----------schema--------------*/
  "blocks": [
      {
        "type": "default",
        "name": "利益点",
        "settings": [
            {
                "id": "icon",
                "type": "image_picker",
                "label": "图标"
            },
              {
                "id": "title",
                "type": "text",
                "label": "标题"
            },            
            {
                "id": "infos",
                "type": "richtext",
                "label": "描述文字"
            }
        ]
      }
  ]

根据产品标签判断

{% assign productTags = product.tags | join:',' %}//声明一个变量productTags获取产品标签
{% if productTags contains 'photo-mistakes' %}//判断productTags是否包含我们后台创建的photo-mistakes标签
    …………
{% endif %}

根据产品sku判断

{% for block in section.blocks %} {% comment %}循环块{% endcomment %}
	{% include 'func-verify_rules', contain: block.settings.contain, detail: product %}{% comment %}引入判断sku的文件{% endcomment %}
	{% unless verify__rules_result == false %}    
		<div class="product-explain">{{ block.settings.txt }}</div>
    {% endunless %}
{% endfor %}
{% schema %}
    "blocks": [
        {
          "type": "text",
          "name": "添加集合",
          "settings": [
            {
              "type": "richtext",
              "id": "txt",
              "label": "添加文案"
            },
            {
              "type": "textarea",
              "id": "contain",
              "label": "显示规则",
              "info": "{\"handle\": \"a,b,c...\", \"sku\": \"C021,C022...\"}"
            }
          ]
        }  
    ]

{% endschema %}

块里多个section使用

{% for block in section.blocks %}
    {% case block.type %}
        {% when 'block-section1' %}
             <div>{{ block.settings.title }}<div>
        {% when 'block-section2' %}
             <div>{{ block.settings.txt }}<div>
    {% endcase %}
{% endfor %}

{% schema %}

"blocks": [
      {
        "type": "settings1",
        "name": "标题",
        "settings": [
            {
            "type": "text",
            "id": "title",
            "label": "这是一个标题"
            }
        ]
      },
      {
        "type": "settings2",
        "name": "内容",
        "settings": [
            {             
            "type": "text",
            "id": "txt ",
            "label": "这是内容"
            }
        ]
      }
    
]
{% endschema %}

判断页面是 首页 || collection || product || pages

{% comment %}判断 首页{% endcomment %}
{% if handle == blank %}
    …………
{% endif %}

{% comment %}判断 collection页面{% endcomment %}
{% if collection %}
    …………
{% endif %}

{% comment %}判断 product页面{% endcomment %}
{% if product %}
    …………
{% endif %}

{% comment %}判断 pages页面{% endcomment %}
{% if pages and handle != blank %}
    …………
{% endif %}