shopify 二开内容

一、主题目录

Layout    —————  存放theme,liquid文件,布局模板,全局文件围绕此文件来渲染
Templates   ————— 模板文件,对应每个模板的jason数据
Sections    ————- 区块代码文件夹,二次开发主要在此文件夹新建、编辑,文件类型为liquid
Snippets   ————- 一些重复的代码片段,供sections引用
Assets   —————- 静态资源文件夹(放入第三方库,图片等等)
Config   ————– 配置主题文件
Locales   ————— 存放多语言文件

包含主题布局模板,默认情况下是 theme.liquid

content_for_header,content_for_index,content_for_layout

{{ content_for_header }}对象 这个对象必须放在Layout/theme.liquid模板的 内,它将Shopify所需的所有脚本动态加载到文档头中。这些脚本包括Shopify分析,Gооgle Analytics(分析)以及Shopify应用所需的脚本

{{ content_for_layout }} 这个对象必须放在Layout/theme.liquid模板的 内。它动态加载由其他模板(例如index.liquid或)生成的内容product.liquid

{{ content_for_index }} 对象 这个对象此对象必须包含在中templates/index.liquid中。它包含的是在主页上呈现的动态内容部分

二、新建区块步骤

1、进入代码编辑模块,在文件夹Section下,带点击“Add a new section”,文件名称为Test(名称可以根据需要取)

shopify 二开内容_第1张图片

2、复制下面这个文件,作为开发内容

*

{%- schema -%} { “name”: “Table”, “tag”: “section”, //编辑区域顶部标题 “settings”: [ { “type”: “text”, //配置区域的类型,此处为文本输入,输入内容为锚点文案 “id”: “text_anchor_1”, //配置区域的id都唯一 “label”: “anchor text 1”, //对应文本输入的标题 “default”: “Overview” //默认值 }, ], “blocks”: [ //局部区块 { “type”: “col”, “name”: “col”, “settings”: [ ] } ], “presets”: [ { “name”: “Table”, “category”: “Homepage”, “blocks”: [ ] } ] } {%- endschema -%} {%- javascript -%} {%- endjavascript -%}

3、一个前台配置的表格

{%- liquid
  assign sid = section.id
  assign se_stts = section.settings
  assign se_blocks = section.blocks
  assign col = se_stts.col_wide
  assign more_url = se_stts.b_link

  if col == “1”
    assign col_wide_class = “col_text1”
    assign col_wide_class_left = “col_rigth1”

  elsif col == “2”
    assign col_wide_class = “col_text2”
    assign col_wide_class_left = “col_rigth2”

  elsif col == “3”
    assign col_wide_class = “col_text3”
    assign col_wide_class_left = “col_rigth3”

  elsif col == “4”
    assign col_wide_class = “col_text4”
    assign col_wide_class_left = “col_rigth4”

  elsif col == “5”
    assign col_wide_class = “col_text5”
    assign col_wide_class_left = “col_rigth5”

  elsif col == “6”
    assign col_wide_class = “col_text6”
    assign col_wide_class_left = “col_rigth6”

  elsif col == “7”
    assign col_wide_class = “col_text7”
    assign col_wide_class_left = “col_rigth7”

  elsif col == “8”
    assign col_wide_class = “col_text8”
    assign col_wide_class_left = “col_rigth8”

  endif

-%}

{{se_stts.header}}

//{%- for block in se_blocks -%}标签内容为,for循环,主要是循环blocks,配置里面的内容,必须有结束标签 {%- for block in se_blocks -%} {%- liquid assign bk_stts = block.settings assign col_color = bk_stts.col_color assign col_bottom_border = bk_stts.col_bottom_border assign col_font_weight = bk_stts.col_font_weight if col_color == “1” assign col_blc_color = “col_blackgound” else assign col_blc_color = “” endif if col_bottom_border == “1” assign col_boder = “col_boder” else assign col_boder = “” endif if col_font_weight == “1” assign font-weight = “font-weight” else assign font-weight = “” endif -%}
{{bk_stts.title_des}}
{{bk_stts.text_des}}
{%- endfor -%}
{%-liquid if more_url != blank assign more_learn = “” else assign more_learn = “col_hide” endif -%} {%- schema -%} { “name”: “Table”, “tag”: “section”, “class”: “t4s-section t4s-section-all t4s_bk_flickity t4s_tp_cdt t4s-collection-banner t4s_tp_cd”, “settings”: [ { “type”: “header”, “content”: “1. General options” }, { “id”: “header”, “type”: “text”, “label”: “header”, “default”:”Table” }, { “type”: “url”, “id”: “b_link”, “label”: “Learn More” }, { “type”: “select”, “id”: “col_wide”, “label”: “col wide”, “default”: “1”, “options”: [ { “value”: “1”, “label”: “1/10” }, { “value”: “2”, “label”: “3/20” }, { “value”: “3”, “label”: “1/5” }, { “value”: “4”, “label”: “1/4” }, { “value”: “5”, “label”: “1/4” }, { “value”: “6”, “label”: “3/10” }, { “value”: “7”, “label”: “2/5” }, { “value”: “8”, “label”: “1/2” } ] } ], “blocks”: [ { “type”: “col”, “name”: “col”, “settings”: [ { “type”: “text”, “id”: “title_des”, “label”: “title”, “default”:”Table” }, { “type”: “text”, “id”: “text_des”, “label”: “text”, “default”:”Table” }, { “type”: “select”, “id”: “col_color”, “label”: “col background”, “default”: “2”, “options”: [ { “value”: “1”, “label”: “add” }, { “value”: “2”, “label”: “none” } ] }, { “type”: “select”, “id”: “col_bottom_border”, “label”: “col bottom border”, “default”: “2”, “options”: [ { “value”: “1”, “label”: “add” }, { “value”: “2”, “label”: “none” } ] }, { “type”: “select”, “id”: “col_font_weight”, “label”: “col font weight”, “default”: “2”, “options”: [ { “value”: “1”, “label”: “add” }, { “value”: “2”, “label”: “none” } ] } ] } ], “presets”: [ { “name”: “Table”, “category”: “Homepage”, “blocks”: [ { “type”: “col”} ] } ] } {%- endschema -%} {%- javascript -%} {%- endjavascript -%}

你可能感兴趣的:(java,前端,javascript)