注文状況JavaScriptアセット

注意

これは高度なチュートリアルであり、Shopifyでは対応していません。HTML、CSS、JavaScript、Liquidといったウェブデザイン言語の知識が必要です。以下のチュートリアルを実行するのが不安な場合は、Shopifyパートナーを雇う ことをおすすめします。

メモ

注文状況ページをカスタマイズする追加スクリプトは非推奨です。

Basic、Shopify、Advancedプランのマーチャントは、チェックアウト・アカウントエディタを使用して、注文状況ページをカスタマイズできます。Shopify Plusマーチャントは、Checkout Extensibilityを使用して、注文状況ページをカスタマイズできます。

Shopify.Checkout.OrderStatusの注文状況JavaScriptアセット (特定の商品に関するメモ - 個々の配送方法の手順 - デジタル商品のダウンロードリンクなど) を使用して、注文状況ページにカスタムコンテンツを追加できます。

管理画面からこのJavascriptアセットを追加するには、[設定] > [チェックアウト] に移動します。[注文状況ページ] セクションまでスクロールダウンし、Javascriptアセットを [追加スクリプト] ボックスに追加します。

このJavaScriptアセットは、ScriptTag経由でアクセスすることもできます。

機能概要

Shopify.Checkout.OrderStatus には、新しいコンテンツを生成する機能があります。

addContentBox(params)

この機能によりコンテンツボックスが追加され、関数に渡された各パラメーターが個別の行にレンダリングされます。

HTML5は関数内でサポートされており、関数の外ではLiquidを使用することができます。

例

特定の配送方法を使用している場合、コンテンツを追加することができます。このコードでは、お客様がストアの配送方法で受取を選択すると、注文状況ページにストアの営業時間が追加されます。

<script>
  {% if checkout.shipping_method.title == 'Pick-up at the store' %}
    Shopify.Checkout.OrderStatus.addContentBox(
     '<h2>Pick-up in store</h2>',
     '<p>We are open everyday from 9am to 5pm.</p>'
    )
  {% endif %}
</script>