はじめに

今回は、以下の記事の翻訳です。

Section Rendering API

それでは、頑張っていきましょう。

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

それではリクエストの具体例を見ていきましょう。

.liquid

request = new XMLHttpRequest()
request.open('GET', ‘/?section_id=social’, true)
request.send()
request.responseText

レスポンス:

.html

<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 機能を実現することができます。