はじめに
今回は、以下の記事の翻訳です。
それでは、頑張っていきましょう。
Section Rendering API
セクションレンダリングAPIを使用して、AJAXリクエストを通して単一のテーマセクションのHTMLマークアップを要求することができます。これにより、ページ全体をリロードするのではなく、ページの部分的な要素だけをフェッチすることでページの内容を更新することができます。例えば、ページ間でフルページのリロードを行わずに検索結果をページ分割するために Section Rendering API を使用することができます。
Section Rendering APIは、非同期通信を行うことで、ページの部分的なフェッチを行う際に利用するAPIです。
Requesting sections
section_idパラメータを使用して、任意のページのコンテキストでセクションをリクエストすることができます。
ストアフロントの任意のページにsection_idを追加すると、そのページのコンテキストでレンダリングされます。
ページ全体をレンダリングする際に重要視されるクエリパラメータ(p= や page=)は、セクションがレンダリングされる際にも重要視されます。
Query parameters
セクションをレンダリングする際、section_idは必須です。
Example request
それではリクエストの具体例を見ていきましょう。
request = new XMLHttpRequest()
request.open('GET', ‘/?section_id=social’, true)
request.send()
request.responseText
レスポンス:
<div id="shopify-section-social" class="shopify-section social-1">
[content of the section]
</div>
Error response
リクエストされたセクションIDがテーマに存在しない場合、サーバーは404ステータスで応答します。
Finding specific section IDs
特定のセクションIDを見つける方法は、静的セクションを探しているのか、動的セクションを探しているのかによって異なります。
Static sections
静的セクションのIDはセクションファイルの名前です。sections/social.liquidをレンダリングする必要がある場合は、/?section_id=socialとします。
Dynamic sections
動的セクションのIDは、Liquidではsection.idとして利用可能です。また、ホームページでレンダリングされたときにセクションをラップするdivタグのid属性からセクションIDを抽出することもできます。
例えば、<div id="shopify-section-[id]">とすることで、動的セクションのIDを抽出できます。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。