shopify 二开内容

Robin罗兵

已于 2023-11-29 16:30:10 修改

阅读量715

点赞数

文章标签： java 前端 javascript

于 2023-11-29 10:59:25 首次发布

本文链接：https://blog.csdn.net/lyb8010/article/details/134684637

版权

一、主题目录

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模板的<head> 内，它将Shopify所需的所有脚本动态加载到文档头中。这些脚本包括Shopify分析，Gооgle Analytics（分析）以及Shopify应用所需的脚本

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

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

二、新建区块步骤

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

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

*<style>标签内，编写样式
*<div>标签内，展示网页的内容，配置后台编辑模块，还需搭配liquid语言。
*{%- liquid -%}标签内，为对象申明
*{%- schema -%}标签，定义shopify后台编辑区域
*setting定义全局配置



{%- liquid
  assign sid = section.id
  assign se_stts = section.settings
  assign se_blocks = section.blocks
-%}

<style></style>

<div></div>

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

-%}

<div class=”t4s-container” style=”margin-top:60px;margin-bottom:30px;”>
    <div class=”t4s-top-heading t4s_des_title_ t4s-text-center”>
        <h3 class=”t4s-section-title t4s-fs-md-40″>
            <span>{{se_stts.header}}</span>
        </h3>
    </div>
</div>

<div class=”t4s-container” style=”margin-bottom:60px;”>
   //{%- 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 
        -%}

        <div class=”col_text {{col_blc_color}} {{col_boder}}”>
            <div class=”{{col_wide_class}} {{font-weight}} text_des”>{{bk_stts.title_des}}</div>
            <div class=”col_table_tr text_des {{col_wide_class_left}}”>{{bk_stts.text_des}}</div>
        </div>
     {%- endfor -%}
</div>

{%-liquid
    if more_url  != blank
        assign more_learn = “”
    else
      assign more_learn = “col_hide”
    endif
-%}

<div class=”t4s-container button-space {{more_learn}}” >
    <a href=”{{more_url}}” class=”More_style”>Learn More</a>
</div> 

<style>
    .col_hide{
        display:none
    }

    .col_text{
        width:100%;
        padding:10px 5px;
        display:flex;
        border-top: 1px solid hsla(216,6%,84%,.5);
    }

    .col_text1{
        width:10%;
    }

    .col_text2{
        width:15%;
    }

    .col_text3{
        width:20%;
    }

    .col_text4{
        width:25%;
    }

    .col_text5{
        width:30%;
    }

    .col_text6{
        width:10%;
    }

    .col_text7{
        width:40%;
    }

    .col_text8{
        width:50%;
    }

    .col_rigth1{
        width:90%;
    }

    .col_rigth2{
        width:85%; 
    }

    .col_rigth3{
        width:80%;
    }

    .col_rigth4{
        width:75%; 
    }

    .col_rigth5{
        width:70%;
    }

    .col_rigth6{
        width:65%; 
    }

    .col_rigth7{
        width:60%;
    }

    .col_rigth8{
        width:50%;   
    }

    .text_des{
        word-break:keep-all;
    }

    .col_blackgound{
        background:#F6F6F6;
    }

    .col_boder{
        border-bottom: 1px solid hsla(216,6%,84%,.5);
    }

    .font-weight{
        font-weight:600;
    }

    @media only screen and (max-width: 769px) {

      .col_table_tr{
        padding-left:10px
      }
    }

    .button-space{
        margin-top: 30px;
    }

    .More_style{
        margin: 0 auto;
        width:82px;
        color:#222;
        display:flex;
        justify-content: center;
        align-items: center;
        font-size:14px;
        border-bottom: 1px solid #222;
    }

    .More_style a:hover{
        border-bottom: 1px solid red;
    }

</style>

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