Liquid、JavaScriptなどに関する質問
いつもお世話になっております。
Cart attributes
と
Line Item Property
を使用して
商品ページに商品ごとの独自の入力項目を設け、
カートページにも、注文全体のメッセージを入力してもらうカスタム備考欄を設置しています。
【やりたいこと】
カートページに設定した Cart attributes の属性値をチェックアウトページに表示させたいです。
※ 購入確定前に、顧客に入力内容の確認ができるようにしたいためです。
Line Item Property で商品ごとに設置した属性値はチェックアウトページでも商品ごとに表示されているので、同じように表示できればと思っています。
Cart attributesで設定した入力項目ではなく、デフォルトの note の内容でも構いません。
なにか方法があればご教示ください。
よろしくおねがいします。
解決済! ベストソリューションを見る。
成功
ご利用中のShopifyプランは何になりますでしょうか?
以下のスレッドでも回答がありますが、チェックアウトページのliquidを編集するにはShopify Plusプランでないと編集ができません。
今回のご要望内容とは異なるかもしれませんが、注文状況ページ(決済後のチェックアウト最終ページ)は追加スクリプトを利用することでカスタマイズ可能です。
https://help.shopify.com/ja/manual/orders/status-tracking/customize-order-status
また、チェックアウトページの文言のみ変更したいという場合は、Shopify Plusプランではなくとも強引な手段で可能なようです。
この方は言語の設定をうまく使われているようです。
https://qiita.com/one_o_two/items/918c15cff66afe464f94
成功
横から失礼します。
例えば下記のような内容を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://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 様
アドバイスありがとうございます。
追加スクリプトにはhtmlを挿入したことはあったのですがnoteやattributeも挿入できるのですね!
可能であれば、line.propertiesのように決済される前に備考欄を確認できたらと思っていたのですが、
ご提案いただいたように、決済後の注文状況ページで確認できるだけでもかなり違います。
今回はnote機能で、下記のように追加してみました。
意図通りに動作しております。
{% if note != blank %}
<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>注文備考:</h2>',
'<p>{{ note }}<p>'
)
</script>
{% endif %}
cart.attributeでの記述法も試してみたいと思います。
本当に助かりました。感謝しております。
今後ともよろしくおねがいします。
成功
ご利用中のShopifyプランは何になりますでしょうか?
以下のスレッドでも回答がありますが、チェックアウトページのliquidを編集するにはShopify Plusプランでないと編集ができません。
今回のご要望内容とは異なるかもしれませんが、注文状況ページ(決済後のチェックアウト最終ページ)は追加スクリプトを利用することでカスタマイズ可能です。
https://help.shopify.com/ja/manual/orders/status-tracking/customize-order-status
また、チェックアウトページの文言のみ変更したいという場合は、Shopify Plusプランではなくとも強引な手段で可能なようです。
この方は言語の設定をうまく使われているようです。
https://qiita.com/one_o_two/items/918c15cff66afe464f94
ご回答、ありがとうございます。
BASICプランなので直接手を加えられないことは理解しておりましたが、
商品ページのpropertiesが表示できていたので「もしや」と思って聞いてみました。
やはり仕様に無いものは難しいのですね。一方で参考に送っていただいた
「チェックアウトページの文言のみ変更したいという場合」
についてはとても良い学びになりました!
色々丁寧に教えてくださり心から感謝しております。今後ともよろしくおねがいします。
成功
横から失礼します。
例えば下記のような内容を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://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 様
アドバイスありがとうございます。
追加スクリプトにはhtmlを挿入したことはあったのですがnoteやattributeも挿入できるのですね!
可能であれば、line.propertiesのように決済される前に備考欄を確認できたらと思っていたのですが、
ご提案いただいたように、決済後の注文状況ページで確認できるだけでもかなり違います。
今回はnote機能で、下記のように追加してみました。
意図通りに動作しております。
{% if note != blank %}
<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>注文備考:</h2>',
'<p>{{ note }}<p>'
)
</script>
{% endif %}
cart.attributeでの記述法も試してみたいと思います。
本当に助かりました。感謝しております。
今後ともよろしくおねがいします。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024