shopfiy 二次开发之自定义 sections

sections 我认为是页面中的某个独立的块，可以是一个静态资源，也可以是一个功能。

命名规则

某种情况下，它是一个代码的片断，在载入某个页面时，每个 section 都有一个 id。如果 section 的名称为 cart-template.liquid  ，那么页面中的 id="shopify-section-cart-template"，以 "shopify-section-" 作为 id 前缀。

 

 

 

 使用变量 {% section 'cart-template' %} 调用：

// 可以加个判断，如果当前模板为 product 时，加载这个 section

    {% if product %}
    <div class="cart-template-fixed">
      {% section 'cart-template' %}
    </div>
    {% else %}

 

数据访问及变量调用

1. sections 可以与其它的模板访问相同的全局对象，数组，标签等。
2. 在 section 外创建的私有变量，section 内部是不能调用的 , 同样的， 在 section 内部创建的变量，它的外部也是不能调用的。
3. 如果 section include 一个 snippet，在 snippet 中是可以调用在 section 中创建的变量的。

Section 支持3种 Liquid 标签，分别是：

{% schema %}
{% javascript %}
{% stylesheet %}

{% schema %} 标签：Schema 标签可以定义 Section 的结构，它的结构代码不会在页面中输出。

每个 section 都可以有一个 schema 标签，标签必须使用 JSON 格式，schema 标签可以在任意一个 section 中使用，但是不能嵌套在另一个 section 中。

以下为 schema 的属性：

 

{

name：“Section 的名称”， class：“Section 指定的其它 class 名称”， tag：“指定当前 html 的节点名称为 section，也可以指定其它标签，比如 div, span, footer, header等。如果没有指定标签，默认为 div 标签”， settings：“section 是一个数组， setting id 必须在当前 section 中是唯一的，每一个 setting 都有自己独立的值，不怎么用”， blocks：“不怎么用”， max_blocks：“不怎么用”， presets：“不怎么用”， default：“不怎么用”， locales：“语言环境，可以对当前 section 进行多语言翻译”

}

 

{% javascript %}与{% stylesheet %}  js与css 标签：Section 中可以独立使用这两个标签，分别加载当前 Section 自己的样式或脚本，使用方式如下：

{% javascript %}
  //直接写js脚本
  $('.slideshow').slideshow();
{% endjavascript %}

{% stylesheet %}
   //直接写 css 样式
  .slideshow {
    /* default styles */
  }
{% endstylesheet %}

 

Page template 模板中使用 Section

静态调用方法 {% section ‘section文件的名称’ %}  

如果在 section 中使用了 schema 标签，schema 标签中预设数据将会自动在模板中启用。

 

 

 

 如果有不对的地方，欢迎指出。