從零開始開發Shopify主題:(3)自定義配置文件

在創建主題時,可以爲客戶預留一些自定義的配置,是Shopify主題模板常用的做法。Shopify使用settings_schema.json文件提供了這個自定義配置的方式。

在Shopify主題的config目錄中,在此文件中定義一些對象屬性,就可以實現自定義的配置選項。當你選擇在線商店 》 模板 》自定義按鈕,就可以看到控制面板中這些選項。

配置文件的文件格式
settings_schema.json文件,本身是個JSON文件,那麼他需要遵守JSON文件規範,這裏所有的數據都用[]括起來。在此範圍內,你可以將相關選項組合在一起。每個分組都有一個名稱,然後是定義這個組的配置。比如:

[
    {
        "name" : "顏色",
        "settings" : [ ]
    }
]

然後,每個選項都是設置數組中的一個對象。 像這樣的東西:

[
  {
    "name": "Shopify119",
    "theme_name": "Shopify119 theme",
    "theme_version": "1.0.0",
    "theme_author": "Leo",
    "theme_documentation_url": "https://shopify119.blog.csdn.net",
    "theme_support_url": "https://shopify119.blog.csdn.net"
  },
  {
    "name" : "顏色",
    "settings" : [
      {
        "type": "color",
        "id": "color_background",
        "label": "背景顏色",
        "default": "#e5e5e5",
        "info" : "這個將調整背景顏色"
      },
      {
        "type": "color",
        "id": "color_body_text",
        "label": "內容文字顏色",
        "default": "#2980b9",
        "info" : "這個將調整內容文字顏色"
      }
    ]
  },
  {
    "name": "Logo",
    "settings": [
      {
        "type": "image",
        "id": "logo.png",
        "label": "Logo",
        "info": "這裏可以改變店鋪的Logo"
      }
    ]
  }
]

上面的例子中,在自定義設置的側欄上,你可以看到標籤“顏色”,當你單擊他時,可以選擇設置背景顏色和內容文字顏色;選擇Logo可以更改店鋪的Logo。
在這裏插入圖片描述
配置文件的屬性
每個設置都有5個屬性:type、id、label、default、info

類型 是否必填 描述
type 必填 定義選項所需的輸入類型
id 必填 id必須唯一,這將在主題中引用它
label 必填 向用戶描述了該選項的用途,可以用中文
placeholder 可選 輸入的佔位符文本的值。這僅適用於基於文本的設置類型。
default 可選 該選項的默認值
info 可選 爲用戶提供該選項的詳細使用信息
常規設置類型
下表描述了允許的常規輸入類型,每個值在type屬性中設置。

值 說明
text 允許用戶輸入單行文本字段
textarea 允許用戶輸入多行文本字段
image 允許用戶上傳圖片
radio 允許用戶使用單選按鈕
select 允許用戶從下拉列表中進行選擇
checkbox 允許用戶選中一個框,返回true或false值
image type
需要注意的是,用這種方式上傳的圖片將保存在模板的assets文件夾中。該文件使用id中定義的名稱和格式進行保存。所以,即使上傳的是.jpg文件,但是id定義的是logo.png,圖片也將會保存爲.png文件。

radio和select type
由於radio和select有多個值可提供選擇,因此還需要設置額外的屬性。比如:

{
		  "type":      "radio",
		  "id":        "id",
		  "label":     "Text",
		  "options": [
		    { "value": "one", "label": "Radio One" },
		    { "value": "two", "label": "Radio Two" }
		  ],
		  "default":   "one",
		  "info":      "Text"
}

特殊設置類型
特殊設置類型的定義訪問和常規設置類型相似,不同之處在於這些設置,將爲用戶提供內置或特定的選擇信息。比如:產品類型是下拉列表,但只允許用戶從已經在商店中定義的產品類型中進行選擇。

值 說明
color 允許用戶使用顏色選擇器窗口小部件選擇顏色
font 允許用戶從可用字體列表中進行選擇
collection 允許用戶選擇商店中可用的產品系列
product 允許用戶選擇商店中可用的產品
blog 允許用戶從商店中設置的博客列表中進行選擇
link_list 允許用戶從可用菜單中進行選擇
page 允許用戶選擇商店中定義的特定頁面
snippets 允許用戶選擇主題中可用的特定代碼段
Blog Type
Shopify內置了博客,你可以添加博客文章。還可以把這些博客文章添加到不同的博客中。blog type設置下拉列表允許你選擇要用於改設置的博客。

Snippet Type
代碼片段在模板中的snippets目錄裏面定義。

信息設置

Shopify還允許將創建主題的作者信息放入側邊欄中,它們只有3個屬性:type, content, info

類型 是否必填 描述
type 必填 定義選項所需的輸入類型。 對於側邊欄設置,這隻能是標題或段落
content 必填 文本內容
info 可選 向用戶提供有關該選項的其他信息。
在模板中調用配置信息
現在已經可以創建設置信息了,但是如何在實際的模板中調用並使用它們?這將是下篇文章的內容。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章