📁

【Shopify.dev和訳】Themes/Architecture/Settings/Overview

2021/09/18に公開約9,400字

この記事について

この記事は、Themes/Architecture/Settings/Overviewの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Settings

マーチャントがテーマを簡単にカスタマイズできるようにするために、JSON を使用して、テーマエディターからアクセスできる設定を作成できます。

Settings の作成

設定は以下の場所で作成できます。

settings_schema.json

settings_schema.json ファイルは、テーマエディタのテーマ設定エリアのコンテンツを制御します。このファイル内の設定は、グローバルなテーマ設定に変換され、Liquid settings オブジェクトからアクセスできます。

Section schema

section schem では、section settingsblock settings を作成することができます。これらの設定は、それぞれ section オブジェクトblock オブジェクトsettings 属性を通じてアクセスできます。

Setting types

settings には 2 つのカテゴリがあります。

  • Input settings - これらは値を保持することができ、マーチャントによって設定可能です。
  • Sidebar settings - これらは値を保持できず、設定もできません。Sidebar settings は、入力設定の詳細をわかりやすくするための情報要素です。

Settings の翻訳

設定スキーマのさまざまな属性を、オンラインストアのアクティブな言語に応じて翻訳することができます。これらの翻訳はschema の locale ファイルに保存されます。

Settings へのアクセス

作成された場所に応じて、3 つの異なる Liquid オブジェクトを介して設定にアクセスできます。

特定の設定にアクセスするには、アクセスするオブジェクトに関連する設定の id 属性を追加します。

例えば、各 Liquid オブジェクトに次のような設定を実装していたとします。

{
  "type": "text",
  "id": "message",
  "label": "Message",
  "default": "Hello!"
}

そうすると、次の Liquid は以下のような出力をします。

Input
// Settings
Message: {{ settings.message }}
// Section
Message: {{ section.settings.message }}
// Block
Message: {{ block.settings.message }}
Output
// Settings
Message: Hello!
// Section
Message: Hello!
// Block
Message: Hello!

値のチェック

設定を参照する際には、その値が期待通りの形式であることを常に確認する必要があります。自動的にデフォルト値が設定されていない設定では、値がなく、空の文字列になってしまう可能性があります。

例えば、idmessage の設定があった場合、次の Liquid は値によって次のような出力をします。

Input
// No value
Setting: {{ settings.message }}
// With value
Setting: {{ settings.message }}
Output
// No value
Setting:
// With value
Setting: Message value

blank 演算子を使用して、値が空の文字列であるかどうかを確認できます。例えば:

{% unless settings.message == blank %}
  {{ settings.message }}
{% endunless %}

Resource-based settings

空の文字列にならないように、値が期待する形式になっているか確認してください。リソースが選択されていない、選択されたリソースが存在しない、または選択されたリソースが非表示になっている可能性があります。

例えば、以下のようなpageタイプの設定があったとします。

{
  "type": "page",
  "id": "page",
  "label": "Page"
}

次に、次のように空をチェックできます。

{% if settings.page != blank %}
  {{ settings.page.title }}
  {{ settings.page.content }}
{% else %}
  No page, or invalid page, selected.
{% endif %}

LEGACY RESOURCE-BASED SETTINGS

従来、リソースベースの設定では、関連するリソースのハンドルが返され、そのハンドルを使ってリキッドから実際のオブジェクトにアクセスする必要がありました。

例えば、以下のような製品の設定があった場合、以下のように製品オブジェクトにアクセスする必要があります。

Settings
{
  "type": "product",
  "id": "product",
  "label": "Product"
}
Access setting
{% unless settings.product == blank %}
  {% assign product = all_products[settings.product] %}
  {% if product %}
    {{ product.title }} - {{ product.price }}
  {% else %}
    No product, or invalid product, selected.
  {% endif %}
{% endunless %}

Dynamic sources

JSON テンプレートに含まれるセクションの設定には、設定の種類に応じて、マーチャントが 1 つまたは複数の動的ソースを設定に接続するオプションがあります。Dynamic sources は次のいずれかです。

  • メタフィールドの値
  • リソース属性

利用可能な値

Shopify は、利用可能な各 Dynamic sources タイプの値を、以下に基づいて決定します。

  • セクションが入っているテンプレートに関連するリソース
  • 現在の設定のコンテキストでのリソース設定

例えば:

Conditions Description
製品テンプレートの一部として含まれているセクション 製品に関連するメタフィールドや属性は、以下のようになります。
・section の settings
・セクション内の任意の block の settings
product type の settingが含まれているセクション 製品に関連するメタフィールドや属性は、以下のようになります。
・section の settings
・セクション内の任意の block の settings
product type の settingが含まれているセクションのブロック その製品のメタフィールドと属性は、ブロックの setting で使用できます。

次の表に、使用可能なリソースとそれに関連する属性を示します。

Resource Attributes
product title
vendor

以下に、互換性のある settingメタフィールドのタイプの概要を示します。

Setting Metafield(s)
color color
image_picker file_reference
page page_reference
product product_reference
richtext single_line_text_field
multi_line_text_field
number_integer
number_decimal
date
date_time
weight
volume
dimension
text single_line_text_field
number_integer
number_decimal
date
date_time
weight
volume
dimension
url url

デフォルト値

Dynamic sources を参照するように設定のデフォルト値を構成することができます。ただし、この設定は、Dynamic sources の値が存在するコンテキストでセクションやブロックをレンダリングする場合にのみ行ってください。たとえば、次のようなセクションで製品関連の値を使用しないでください。

  • 製品以外のテンプレートでもレンダリングできる
  • 必要な値を提供するための製品タイプの設定が明示されていない

このメソッドを使用する場合、Additional Liquid は無効なので、値を直接参照することしかできません。もし Additional Liquid を入れた場合は、エラーになります。

以下は、Dynamic sources を参照するdefault設定の例です。

{
  "type": "text",
  "id": "featured_product_title",
  "label": "Featured product title",
  "default": "Featuring: {{ product.title }}"
}

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます