✨

【Shopify.dev和訳】Section Rendering API

2021/11/06に公開

Shopify

tech

この記事について

この記事は、Section Rendering APIの記事を和訳したものです。

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

Shopify アプリのご紹介

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

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

Section Rendering API

Section Rendering API を使用すると、AJAX リクエストを使用してテーマセクションの HTML マークアップを要求することができます。これにより、特定の要素のみをフェッチして動的に置き換えることで、ページ全体をリロードすることなくページコンテンツを更新することができます。

たとえば、セクションレンダリング API を使用して、ページ間のフルページリロードを行わずに検索結果をページ分割することができます。

Request sections

sections クエリパラメータを使用すると、セクション ID で識別される最大 5 つのセクションをレンダリングすることができます。レスポンスは、各セクションの ID とそれに対応するレンダリングされた HTML のペアを含む JSON オブジェクトとなります。

sections パラメータには、ID をカンマで区切ったリストまたは配列を指定します。

Example

?sections=header,footer
?sections[]=header&sections[]=footer

セクションは、ページの URL に sections パラメータを追加することで、任意のページのコンテキストで表示することができます。たとえば、ルートページには /?section=header を、特集コレクションページには /collections/featured?section=header をリクエストすることができます。

次のコード例では、JavaScript の XMLHttpRequest を使って 2 つのセクションをリクエストしています。

Example

request = new XMLHttpRequest();
request.open('GET', '/?sections=header,footer', true);
request.send();
JSON.parse(request.responseText);

Response

{
  "header": "<div id=\"shopify-section-header\" class=\"shopify-section\">\n<!-- section content -->\n</div>",
  "footer": "<div id=\"shopify-section-footer\" class=\"shopify-section\">\n<!-- section content -->\n</div>"
}

Error response

レンダリングに失敗したセクション (公開テーマに存在しないために失敗したセクションを含む) は、JSON レスポンスで null として返されます。レスポンスのステータスが HTTP 200 であっても、レンダリングに失敗したセクションが 1 つ以上含まれている場合があります。このため、null のセクションが存在する可能性を考慮する必要があります。

単一のセクションをリクエストする

sections パラメータとその JSON レスポンスは、単一のセクションのレンダリングなど、ほとんどの場合に使用できます。別の方法として、section_id クエリパラメータを使用して単一のセクションをリクエストすることもできます。

Example

?section_id=header

section_id クエリパラメータに応答してレンダリングされたセクションは、HTML として直接返されます。また、sections と同様に、このパラメータを使用して、任意のページのコンテキストでセクションをレンダリングすることができます。

Error response

リクエストされたセクション ID がテーマ上に存在しない場合、サーバーは 404 ステータスで応答します。

Find section IDs

セクション ID にアクセスするには 2 つの方法があります。

section.id を使って、Liquid のsection objectからアクセスする。
セクションのラッパーの ID 属性から抽出する。

ラッパーからセクション ID を抽出する

セクションのラッパーの ID 属性からセクション ID を抽出することができます。例えば、セクション・ラッパーの一般的なフォーマットは以下の通りです。

Section wrapper format

<div id="shopify-section-[section-id]" class="shopify-section">
  <!-- section content -->
</div>

Shopify アプリのご紹介

Discussion

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