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 標簽中預設數據將會自動在模板中啟用。

 

 

 

 如果有不對的地方，歡迎指出。