Shopify二次开发之二：配置schema

目录

阐述

配置schema

name：可以在商城后台看到对应的section

tag：section的标签，默认是div，也可以设置为article、aside、footer、header、section

class：section的class

limit：可以添加section的最大数量

settings：input settings可以通过商城后台配置的数据模型以供模板访问

blocks&max_blocks：可以在section中配置block，在后台添加、删除、排序

presets: 一组section预设，可以在添加section的时候提前给出多组预设值

default： section的默认值

locales：提供一组翻译字符串,相分离于locales文件下的翻译配置

enabled_on同disabled_on

---

阐述

通常来说，Shopify开发是不需要和后端程序员进行数据对接的，可以通过section中的 .liquid文件配置，但也不乏特定场景，需要ajax进行接口请求。

当进行Shopify二次开发时，模板访问模型数据是至关重要的一步。在Shopify中，由schema定义数据模型以及其他，模型则包含实际的数据（可以在admin后台去配置数据）由模板去进行访问，这就是为什么不需要后端的原因，因为数据完全来自于商城后台。

至于如何在scheme中配置可以通过查阅shopify theme  Input settings 官方文档进行学习

需要注意的是每个section只能有一个{% schema %}标记，且仅有section能配置schema ，schema不能嵌套另一个schema，也就是说一个section里不能{% section 'xxx' %}另一个section，否则会报错。

配置schema

schema包含以下配置

• name
• tag
• class
• limit
• settings
• blocks
• max_blocks
• presets
• default
• locales

name：可以在商城后台看到对应的section

tag：section的标签，默认是div，也可以设置为article、aside、footer、header、section

\

class：section的class

另外，每一个section都有一个独特的id，这样写class的时候就会与其他section的样式进行隔离

shopify-section-{{ section.id }}

limit：可以添加section的最大数量

当添加三个Featured collection的时候就会报出这个错误。

settings：input settings可以通过商城后台配置的数据模型以供模板访问

基础input settings

• checkbox
• number
• radio
• range
• select
• text
• textarea

checkbox

    {
      "type": "checkbox",
      "id": "checkbox",
      "label": "isShow",
      "default": true
    }

number

{
  "type": "number",
  "id": "products_per_page",
  "label": "Products per page",
  "default": 20
}

range

    {
      "type": "range",
      "id": "font_size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Font size",
      "default": 16
    },

等等..以上是三个示例，此外还有特定的input settings，包括

• article
• blog
• collection
• collection_list
• color
• color_background
• color_scheme
• color_scheme_group
• font_picker
• html
• image_picker
• inline_richtext
• link_list
• liquid
• page
• product
• product_list
• richtext
• text_alignment
• url
• video
• video_url

blog

    {
      "type": "blog",
      "id": "blog",
      "label": "Blog"
    }

collection

    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    }

其他的都可通过查阅官方文档去进行配置

blocks&max_blocks：可以在section中配置block，在后台添加、删除、排序

{% schema %}
{
  "name": "Slideshow",
  "tag": "section",
  "class": "slideshow",
  "max_blocks": 4,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Slideshow"
    }
  ],
  "blocks": [
     {
       "name": "Slide",
       "type": "slide",
       "settings": [
         {
           "type": "image_picker",
           "id": "image",
           "label": "Image"
         }
       ]
     }
   ]
}
{% endschema %}

type并不是特定的，只是为了能区分block的一个标识，根据block的定义来，可以是slide，也可以是card，或者其他随意的名字xxx。

block里的settings同section的settings配置。

presets: 一组section预设，可以在添加section的时候提前给出多组预设值

  "presets": [
    {
      "name": "Slideshow",
      "settings": {
        "title": "Slideshow"
      },
      "blocks": [
        {
          "type": "slide"
        },
        {
          "type": "slide"
        }
      ]
    },
    {
      "name": "Slideshow1",
      "settings": {
        "title": "Slideshow1"
      },
      "blocks": [
        {
          "type": "slide"
        }
      ]
    }
  ]

default： section的默认值

default和presets配置是相似的，相当于"presets的一组预设"

  "default": {
    "settings": {
      "title": "Slideshow"
    },
    "blocks": [
      {
        "type": "slide"
      },
      {
        "type": "slide"
      }
    ]
  }

注意，default和presets不能同时配置

locales：提供一组翻译字符串,相分离于locales文件下的翻译配置

  "locales": {
    "en": {
      "title": "Slideshow"
    },
    "fr": {
      "title": "Diaporama"
    }
  }

在模板中渲染

  
{{ 'title' | t }}

通过filter "t",在英文语言下渲染的是Slideshow，在法语配置下模板渲染的是Diaporama

可通过后台更改语言环境

此外还有别的配置enabled_on和disabled_on

enabled_on同disabled_on

  "enabled_on": {
    "templates": ["*"]  //  or ["index"],
    "groups": ["footer"]  //  or ["header"]
  }

这表示该section是否禁止和可用于某些templates

["*"]表示适用/禁用于所有template