在庫ステータスをリアルタイムに更新する
DAWNテーマの商品ページには在庫ステータスというセクションブロックがあります。この在庫ステータスは商品ページを開いたとき又はバリエーションピッカーでバリエーションを選択したときに在庫の状況と現在の在庫値を表示します。この在庫ステータスは自動で更新される訳ではなく、閲覧者が何らかの操作を介入しないと更新されません。フラッシュセールなどで在庫が刻々と変わるような場合、商品ページを開いたままだと古い在庫ステータスが表示されたままとなります。セクションレンダリングAPIを利用してリアルタイムに更新する方法を探っていきます。
セクションレンダリングAPIとは？
セクションレンダリングAPIとはページ中の特定のセクションに対するHTMLデータを要求するAPIです。このAPIを利用することで最新のHTMLデータを取得し、ページ全体をリロードせずにセクションの特定の要素を書き換えることで動的な更新（つまりAJAX）を実現します。
例えば、次のようにリクエストすると、
fetch('/?sections=header,footer')
結果は次のようになります。
{
"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>"
}
または、特定のセクションをリクエストすると、
fetch('/?section_id=<セクションID>'）
結果は次のようになります（単一の場合はHTMLデータのみです。）。
<section id="shopify-section-template--16029730013378__main" class="shopify-section section" data-shopify-editor-section="{"id":"template-
・・・
（中略）
・・・
</section>
このようにして、ページ全体のHTMLデータを取得することもリロードすることもなく、セクションのタイプやID、その他のパラメータを追加することでさまざまなデータ取得が可能です。
在庫ステータスを一定間隔で更新するようセットアップする
さて、ここからが本題です。前述までのようにセクションレンダリングAPIの利用してセクションごとにデータを取得できることがわかりました。在庫ステータスの例にとり、APIを利用してHTMLデータを一定間隔で取得して在庫状況を更新するスクリプトを作成してみましょう。
まず、最初に商品ページのセクションファイル（main-product.liquid）を編集します。'{%- when 'inventory' -%}'を検索して、
<p>タグで囲まれたコードをすべてコメントアウトします。
</div>
{%- when 'inventory' -%}
<p
class="product__inventory no-js-hidden{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}{% if product.selected_or_first_available_variant.inventory_management != 'shopify' %} visibility-hidden{% endif %}"
{{ block.shopify_attributes }}
id="Inventory-{{ section.id }}"
role="status"
>
{% comment %}
{%- if product.selected_or_first_available_variant.inventory_management == 'shopify' -%}
{%- if product.selected_or_first_available_variant.inventory_quantity > 0 -%}
{%- if product.selected_or_first_available_variant.inventory_quantity <= block.settings.inventory_threshold -%}
<svg width="15" height="15" aria-hidden="true">
<circle cx="7.5" cy="7.5" r="7.5" fill="rgb(238,148,65, 0.3)"/>
・・・
(中略）
・・・
{%- endif -%}
{%- endif -%}
{%- endif -%}
{% endcomment %}
</p>
{%- when 'description' -%}
続いて、
<p>タグのすぐ下に以下のコードを挿入します。
<span id="realtime">現在の在庫数 : {{ product.selected_or_first_available_variant.inventory_quantity }}</span>
最終的なコードは以下のようになります。
</div>
{%- when 'inventory' -%}
<p
class="product__inventory no-js-hidden{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}{% if product.selected_or_first_available_variant.inventory_management != 'shopify' %} visibility-hidden{% endif %}"
{{ block.shopify_attributes }}
id="Inventory-{{ section.id }}"
role="status"
>
<span id="realtime">現在の在庫数 : {{ product.selected_or_first_available_variant.inventory_quantity }}</span>
{% comment %}
{%- if product.selected_or_first_available_variant.inventory_management == 'shopify' -%}
{%- if product.selected_or_first_available_variant.inventory_quantity > 0 -%}
{%- if product.selected_or_first_available_variant.inventory_quantity <= block.settings.inventory_threshold -%}
<svg width="15" height="15" aria-hidden="true">
<circle cx="7.5" cy="7.5" r="7.5" fill="rgb(238,148,65, 0.3)"/>
・・・
(中略）
・・・
{%- endif -%}
{%- endif -%}
{%- endif -%}
{% endcomment %}
</p>
{%- when 'description' -%}
続いて、テーマのカスタマイザーを開きます。商品情報に在庫ステータスとカスタムLiquidのブロックを追加します。
カスタムLiquidには次のコードを挿入します。更新間隔（setInterval）の値はお好みで調整してください。
<script>
setInterval(myTimer, 5000);
function myTimer() {
const realtime = document.getElementById('realtime');
const section_id = '{{ section.id }}';
const params = new URLSearchParams(window.location.search);
let variant = '';
if (params.has('variant')) {
variant = params.get('variant');
} else {
variant = '{{ product.selected_or_first_available_variant.id }}';
}
fetch(window.location.pathname + '?variant=' + variant + '§ion_id=' + section_id)
.then((response) => response.text())
.then((responseText) => {
const html = new DOMParser().parseFromString(responseText, 'text/html');
realtime.innerHTML = html.getElementById('realtime').firstChild.nodeValue;
});
}
</script>
在庫ステータスの更新をテストする
セットアップまで完了したら、管理画面で在庫を開き、該当する商品の在庫を変更してみてください。
商品ページでは指定した間隔（＋α）を経過すると該当する商品（正確にはバリアント）の在庫数が自動で更新されることが確認できます。
まとめ
この例のように、セクションレンダリングAPIを利用することで商品ページを見ている閲覧者に在庫数の変化を伝え、購入を促す効果が期待できます。また、在庫数をほぼリアルタイムに表示するだけではなく、さまざまな利用の仕方があると思いますので、ぜひ一度試してみてください。