Cart attributes の内容をチェックアウトページで表示する方法について

[GOENINC]

いつもお世話になっております。

Cart attributes

と

Line Item Property

を使用して

商品ページに商品ごとの独自の入力項目を設け、

カートページにも、注文全体のメッセージを入力してもらうカスタム備考欄を設置しています。

参考
https://www.shopify.jp/blog/partner-shopify-theme-customize-cart-attributes-line-item-property-custo...

【やりたいこと】

カートページに設定した Cart attributes の属性値をチェックアウトページに表示させたいです。

※ 購入確定前に、顧客に入力内容の確認ができるようにしたいためです。

Line Item Property で商品ごとに設置した属性値はチェックアウトページでも商品ごとに表示されているので、同じように表示できればと思っています。

Cart attributesで設定した入力項目ではなく、デフォルトの note の内容でも構いません。

なにか方法があればご教示ください。
よろしくおねがいします。

[KOICHI_KAMIZURU · Accepted solution]

ご利用中のShopifyプランは何になりますでしょうか？

以下のスレッドでも回答がありますが、チェックアウトページのliquidを編集するにはShopify Plusプランでないと編集ができません。

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAQ-A/%E6%B1%BA%E6%B8%88%E7%94%BB%...

今回のご要望内容とは異なるかもしれませんが、注文状況ページ(決済後のチェックアウト最終ページ)は追加スクリプトを利用することでカスタマイズ可能です。

https://help.shopify.com/ja/manual/orders/status-tracking/customize-order-status

また、チェックアウトページの文言のみ変更したいという場合は、Shopify Plusプランではなくとも強引な手段で可能なようです。

この方は言語の設定をうまく使われているようです。

https://qiita.com/one_o_two/items/918c15cff66afe464f94

[Jizo_Inagaki · Accepted solution]

横から失礼します。
例えば下記のような内容をcart.liquidなどに記載して、チェックアウト画面で出力したいということでしょうか？

<p class="cart-attribute__field">
  <label for="your-name">Your name</label>
  <input id="your-name" type="text" name="attributes[Your name]" value="{{ cart.attributes["Your name"] }}">
</p>

その場合でしたらKOICHI_KAMIZURUさんがご提示されました「追加スクリプト」で以下のように記載すれば表示可能かと思います。

<script>
{% assign cart_attributes = attributes["Your name"] %}
{% if cart_attributes %}
    Shopify.Checkout.OrderStatus.addContentBox(
     '<h2>Your name</h2>',
     '<p>{{cart_attributes}}</p>'
    )
{% endif %}
</script>

参考:

https://help.shopify.com/ja/manual/orders/status-tracking/customize-order-status#part-ff4af52688daf4...

https://shopify.dev/docs/themes/liquid/reference/objects/cart#cart-attributes

以上ですが私が対象を勘違いしていましたら申し訳ありません。

[追記]

noteの場合でも以下のように差し替えれば可能かと思います。

<script>
{% if note %}
    Shopify.Checkout.OrderStatus.addContentBox(
     '<h2>Note</h2>',
     '<p>{{note}}</p>'
    )
{% endif %}
</script>

[KOICHI_KAMIZURU · Accepted solution]

ご利用中のShopifyプランは何になりますでしょうか？

以下のスレッドでも回答がありますが、チェックアウトページのliquidを編集するにはShopify Plusプランでないと編集ができません。

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAQ-A/%E6%B1%BA%E6%B8%88%E7%94%BB%...

今回のご要望内容とは異なるかもしれませんが、注文状況ページ(決済後のチェックアウト最終ページ)は追加スクリプトを利用することでカスタマイズ可能です。

https://help.shopify.com/ja/manual/orders/status-tracking/customize-order-status

また、チェックアウトページの文言のみ変更したいという場合は、Shopify Plusプランではなくとも強引な手段で可能なようです。

この方は言語の設定をうまく使われているようです。

https://qiita.com/one_o_two/items/918c15cff66afe464f94

[GOENINC]

KOICHI_KAMIZURU 様

ご回答、ありがとうございます。

BASICプランなので直接手を加えられないことは理解しておりましたが、
商品ページのpropertiesが表示できていたので「もしや」と思って聞いてみました。
やはり仕様に無いものは難しいのですね。一方で参考に送っていただいた
「チェックアウトページの文言のみ変更したいという場合」
についてはとても良い学びになりました！

色々丁寧に教えてくださり心から感謝しております。今後ともよろしくおねがいします。

[Jizo_Inagaki · Accepted solution]

横から失礼します。
例えば下記のような内容をcart.liquidなどに記載して、チェックアウト画面で出力したいということでしょうか？

<p class="cart-attribute__field">
  <label for="your-name">Your name</label>
  <input id="your-name" type="text" name="attributes[Your name]" value="{{ cart.attributes["Your name"] }}">
</p>

その場合でしたらKOICHI_KAMIZURUさんがご提示されました「追加スクリプト」で以下のように記載すれば表示可能かと思います。

<script>
{% assign cart_attributes = attributes["Your name"] %}
{% if cart_attributes %}
    Shopify.Checkout.OrderStatus.addContentBox(
     '<h2>Your name</h2>',
     '<p>{{cart_attributes}}</p>'
    )
{% endif %}
</script>

参考:

https://help.shopify.com/ja/manual/orders/status-tracking/customize-order-status#part-ff4af52688daf4...

https://shopify.dev/docs/themes/liquid/reference/objects/cart#cart-attributes

以上ですが私が対象を勘違いしていましたら申し訳ありません。

[追記]

noteの場合でも以下のように差し替えれば可能かと思います。

<script>
{% if note %}
    Shopify.Checkout.OrderStatus.addContentBox(
     '<h2>Note</h2>',
     '<p>{{note}}</p>'
    )
{% endif %}
</script>

[GOENINC · Accepted solution]

jizo 様

アドバイスありがとうございます。

追加スクリプトにはhtmlを挿入したことはあったのですがnoteやattributeも挿入できるのですね！

可能であれば、line.propertiesのように決済される前に備考欄を確認できたらと思っていたのですが、
ご提案いただいたように、決済後の注文状況ページで確認できるだけでもかなり違います。

今回はnote機能で、下記のように追加してみました。
意図通りに動作しております。

{% if note != blank %}
<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>注文備考:</h2>',
'<p>{{ note }}<p>'
)
</script>
{% endif %}

cart.attributeでの記述法も試してみたいと思います。

本当に助かりました。感謝しております。

今後ともよろしくおねがいします。