Section-值结构

Section-值

在商家端后台，模版装修，点击卡片后，在右侧对卡片进行配置，配置完成后，点击发布，就会将section配置的值进行保存

这些值保存的位置

1.layout/theme.liquid中通过 {% section 'xxx' %} 引入的section

• 和全局配置的值保存一样，都保存到文件：config/settings_data.liquid
• 打开这个文件，保存到：current.sections

2.header和group部分（头部和尾部）

• 保存到了sections文件里面
• 譬如：头部保存到了文件：sections/header-group.liquid

3.content部分（每个页面都有一个内容部分）

• 保存到了templates里面
• 譬如：首页的内容部分，对应的文件是：templates/home.json

Section-值结构

打开文件：templates/home.json

一：整体介绍

1.sections

• sections里面是section的配置，每个section有一个key，譬如：slider-3GSZxxXG7S

2.order

• 数组的内容：sections里面section的key，用于前台商城显示section的顺序，按照这个顺序显示各个section的内容

{
  "sections": {
    "slider-3GSZxxXG7S": {

    },
    "banner-with-slider-3apvhWWOtl": {

    },
    "rich-text-u9s91sMegJ": {

    },
    "collection-tabs-INyrSO8psF": {

    }
  },
  "order": [
    "slider-3GSZxxXG7S",
    "banner-with-slider-3apvhWWOtl",
    "rich-text-u9s91sMegJ",
    "collection-tabs-INyrSO8psF"
  ]
}

二：section结构

1.section id

• 对于对象的key：slider-3GSZxxXG7S，这个就是section id

2.name

• 卡片的名称

3.type

• section的type，用来对应文件section文件，slider对应的就是sections/slider.liquid

4.block_order：

• 子卡片的排序

5.settings

• 卡片的配置信息,是一个对象
• 里面是key：value的键值对，value可以是数字，字符串，对象，数组等类型
• 可以通过 {{ section.settings.xxx }} 进行取值
• 譬如：container的值，在html部分取值： {{ section.settings.container }}

{
    "slider-3GSZxxXG7S": {
      "name": {
        "text": "幻灯片",
        "lang_params": {
          "en": "Slideshow",
          "tw": "幻燈片"
        }
      },
      "type": "slider",
      "blocks": {},
      "block_order": [
        "slider_item_1",
        "slider_item_2",
        "slider_item_3"
      ],
      "settings": {
        "cardID": "slider-3GSZxxXG7S",
        "visibility": true,
        "container": "w-full",
      }

    }
  }

6.blocks：子卡片配置

• block id：slider_item_1就是block id
• name: block的名称
• type：block的name，在presets里面可以用到
• settings：block的配置值，是一个key：value对

通过上面可以看到block的值结构，和section的值结构是类似的

{
  "blocks": {
    "slider_item_1": {
      "name": {
        "text": "图片幻灯片",
        "lang_params": {
          "en": "Image slide",
          "tw": "圖片幻燈片"
        }
      },
      "type": "slider_item",
      "settings": {
        "background": {
          "src": "",
          "alt": {
            "text": "",
            "lang_params": []
          },
          "width": "",
          "height": "",
          "ratio": "",
          "type": ""
        },
        "mb_background": {
          "src": "",
          "alt": {
            "text": "",
            "lang_params": []
          },
          "width": "",
          "height": "",
          "ratio": "",
          "type": ""
        },
        "content_in_container": false,
        "content_position": "center middle",
        "text_alignment": "center",
        "text_size": "medium",
        "text_color": "black",
        "subheading": {
          "text": "",
          "lang_params": []
        },
        "title": {
          "text": "New Collection",
          "lang_params": []
        },
        "description": {
          "text": "<p>Tell your campaign through images</p>",
          "lang_params": []
        },
        "image_link": {
          "url_type": "",
          "url_value": "",
          "object_id": "",
          "object_title": ""
        },
        "button_text": {
          "text": "Shop now",
          "lang_params": []
        },
        "button_link": {
          "url_type": "",
          "url_value": "",
          "object_id": "",
          "object_title": ""
        },
        "button_style": "f-button--primary",
        "button_size": " ",
        "second_button_text": {
          "text": "",
          "lang_params": []
        },
        "second_button_link": {
          "url_type": "",
          "url_value": "",
          "object_id": "",
          "object_title": ""
        },
        "second_button_style": "f-button--primary",
        "second_button_size": " ",
        "show_footer": false,
        "footer_alignment": "end",
        "footer_text": {
          "text": "New Collection",
          "lang_params": []
        },
        "footer_button": {
          "text": "Shop Now",
          "lang_params": []
        },
        "footer_link": {
          "url_type": "",
          "url_value": "",
          "object_id": "",
          "object_title": ""
        },
        "enable_preload_image": null
      }
    }
  }
}

调用方式

{% for block_key in section.block_order %}
  {% assign block = section.blocks[block_key] %}
  {% assign enable_preload_image = block.settings.content_position %}
{% endfor %}