FROM CACHE - jp_header
解決済

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

GOENINC
Shopify Partner
41 4 10

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

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 の内容でも構いません。

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

3 件の受理された解決策

KOICHI_KAMIZURU
Shopify Partner
56 21 62

成功

ご利用中の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

上水流 弘一 (Kamizuru Koichi)
アプリ開発、テーマのカスタマイズ承っております。
お気軽にご相談ください。

元の投稿で解決策を見る

Jizo_Inagaki
Shopify Partner
990 373 690

成功

横から失礼します。
例えば下記のような内容を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>

 

 

 

 

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

GOENINC
Shopify Partner
41 4 10

成功

jizo 様

 

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

 

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

 

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

 

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

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

 

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

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

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

元の投稿で解決策を見る

4件の返信4

KOICHI_KAMIZURU
Shopify Partner
56 21 62

成功

ご利用中の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

上水流 弘一 (Kamizuru Koichi)
アプリ開発、テーマのカスタマイズ承っております。
お気軽にご相談ください。
GOENINC
Shopify Partner
41 4 10

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

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

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

Jizo_Inagaki
Shopify Partner
990 373 690

成功

横から失礼します。
例えば下記のような内容を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>

 

 

 

 

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
GOENINC
Shopify Partner
41 4 10

成功

jizo 様

 

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

 

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

 

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

 

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

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

 

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

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

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