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 %}