Liquid、JavaScriptなどに関する質問
注文時に顧客が記入する「注文メモ」(備考欄?)を注文確認メールに反映させる方法を知りたいのですが教えていただけませんでしょうか?
カスタマーサポートの方曰く、
{{ cart.note }}を通知メールに追加されれば可能。
https://community.shopify.com/c/Shopify-Discussion/Order-note-added-to-confirmation-emails/td-p/1585...
とのことでしたが、通知メールの編集画面までいけてもどこに挿入したらいいかわからず困っております。
また他にも方法があれば教えていただきたいです。
解決済! ベストソリューションを見る。
成功
補足です。
こちら実装したところ、
cart.note ではうまく表示されませんでしたが下記のように記載したら実装できました。
ちなみに、!= blank は「カートメモが空欄ではない場合」という指示になります。
{% if note != blank %}
<p><b>注文備考:</b></p>
<p>{{ note }}</p>
{% endif %}
<p></p>
こちらのコードをコピーしてご使用ください。
{% if cart.note != blank %}
<p><b>注文備考:</b></p> <p>{{ cart.note }}</p> {% endif %}
<p></p>
※コードの意味は、「注文備考に記載があった場合、注文備考:を表示させます」です。
(注文備考:はお好きなものに変更してご使用ください。)
挿入場所はこちらになります。
---省略---
<p><b>配送先住所:</b></p> <p>{{ shipping_address.name }}</p> <p>{{ shipping_address.street }}</p> <p>{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}</p> <p>{{ shipping_address.country }}</p> <p>{{ shipping_address.phone }}{% endif %}</p> <p></p>
{% if cart.note != blank %}
<p><b>注文備考:</b></p>
<p>{{ cart.note }}</p>
{% endif %}
<p></p>
{% if shopify_shipping_enabled %} <p>以下で時間とお金を節約する <a href="{{ fulfillment_url }}">Shopify Shippingでフルフィルメント</a></p> <p></p> {% endif %}
試しに配送先住所の下に入れてみましたが、
上に表示させたい場合は、{% if ... %}コード{% endif %}の外に入れていただければよろしいかと思います。
----------------------------
念のため、コードの反映場所についても記載します。
▼反映場所
◯お客様の入力情報を店舗側で確認したい場合
[管理画面ログイン] > [左下の設定] > [通知] > [(スタッフ注文通知の中の)新しい注文]
◯お客様の入力情報を注文確認としてそのまま連絡したい場合
[管理画面ログイン] > [左下の設定] > [通知] > [(お客様通知の中の)注文の確認]
から変更していきますのでよろしくお願いします。
成功
補足です。
こちら実装したところ、
cart.note ではうまく表示されませんでしたが下記のように記載したら実装できました。
ちなみに、!= blank は「カートメモが空欄ではない場合」という指示になります。
{% if note != blank %}
<p><b>注文備考:</b></p>
<p>{{ note }}</p>
{% endif %}
<p></p>
tuple様
こちらのコードで私もうまく行きました。
大変助かりました。
ありがとうございました。
おそらく、!=blank の条件式は省略出来ると思います。
Arai様
ありがとうございます。
こちらのコードでは反映されませんでしたが、貼り付け場所はわかりやすく助かりました。
tableタグで挿入しないと左右の余白が気になったのでこちらにメモ代わりに投稿させていただきます。
差し込み箇所として、個人的には注文概要の下、お客様情報のtableタグの上辺りが良さそうに思いました。
通知テンプレート設定箇所のURL: https://shopify.com/admin/email_templates/order_confirmation/edit
{% comment %}表示を確認する際は↓このcommentを外します。{% endcomment %}
{% comment %}
{% assign note = "領収書お願いします。宛名は「山田太郎」です。" %}
{% endcomment %}
{% if note != blank %}
<table class="row">
<tr>
<td class="">
<center>
<table class="container">
<tr>
<td>
<p><b>注文備考</b></p>
<p>{{ note }}</p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
{% endif %}
> Horai様
centerは廃止されているタグなので、使用するのは適切ではないと思います。
また、テキストを中央揃えにするためにtableを入れ子で使うのも無駄が多いように思います。
この場合の一例としましては以下のような形が簡素かなと思います。
<div style="text-align:center;">
<p><b>注文備考</b></p>
<p>{{ note }}</p>
</div>
※クラスをつけてインラインスタイルシートを使った方が良いと思いますが、説明がややこしくなるのでstyle属性で記載しています。
※bタグも適切なタグとCSSを使用する形に変更した方がよいと思いますが、こちらもややこしくなるのでそのままにしています。
なお記載されましたコーディング内容に中央揃え以外の意図がありましたら、私の書き込みは出過ぎたものとなりますので、その際は申し訳ありません。
@Jizo_Inagaki ご確認いただきありがとうございます!
コードの意図を補足させていただきますと、主に周辺のHTMLと同じになるようにした感じです。
最初私もシンプルに書いたのですが表示が崩れてしまい...
周辺で使われているHTMLタグと同じように書いてあげることで周りと同じcssがあたるように極力同じメールテンプレート内にあるHTMLタグ、クラスをそのままにしておきました。
なので中央寄せがしたいわけではなく(実際には左寄せになります)、周辺の余白などに馴染むように表示させたかった、が真意でしてその場合に自分でスタイリングするより他と同じHTMLタグを利用する方が手っ取り早くスタイリングを合わせたかったためでした。
> Horai様
差し出がましい投稿となってしまい申し訳ありませんでした。
背景となる意図など承知いたしました。
その流れであれば、記載されておられた形にする方が確かに整えやすいと思います。
また、スレッドに記載されていたコードがpタグで構成されていたのでその前提だと思い込んでいましたが、Shopifyのデフォルトとしてはテーブルコーディングの上でcenterタグも使われていますし、使用されているタグに関してどうこういうのは筋が違いますね。
失礼な書き込みとなりましたこと、改めてお詫び申し上げます。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024