注文確認メールに注文メモを表示させる。

解決済
Yuya0210
観光客
6 0 0

注文時に顧客が記入する「注文メモ」(備考欄?)を注文確認メールに反映させる方法を知りたいのですが教えていただけませんでしょうか?

 

カスタマーサポートの方曰く、

{{ cart.note }}を通知メールに追加されれば可能。
https://community.shopify.com/c/Shopify-Discussion/Order-note-added-to-confirmation-emails/td-p/1585...

 

とのことでしたが、通知メールの編集画面までいけてもどこに挿入したらいいかわからず困っております。

 

また他にも方法があれば教えていただきたいです。

 

1 件の受理された解決策

ベストソリューション
tuple
観光客
6 1 4

成功

補足です。

こちら実装したところ、

cart.note ではうまく表示されませんでしたが下記のように記載したら実装できました。

ちなみに、!= blank は「カートメモが空欄ではない場合」という指示になります。

{% if note != blank %}
<p><b>注文備考:</b></p>
<p>{{ note }}</p>
{% endif %}
<p></p>

 

元の投稿で解決策を見る

9件の返信9
AraiTakayuki
Shopify Partner
57 25 63

こちらのコードをコピーしてご使用ください。

{% 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 %}の外に入れていただければよろしいかと思います。

 

----------------------------

念のため、コードの反映場所についても記載します。

▼反映場所

◯お客様の入力情報を店舗側で確認したい場合

[管理画面ログイン] > [左下の設定] > [通知] > [(スタッフ注文通知の中の)新しい注文]

◯お客様の入力情報を注文確認としてそのまま連絡したい場合

[管理画面ログイン] > [左下の設定] > [通知] > [(お客様通知の中の)注文の確認]

から変更していきますのでよろしくお願いします。

tuple
観光客
6 1 4

成功

補足です。

こちら実装したところ、

cart.note ではうまく表示されませんでしたが下記のように記載したら実装できました。

ちなみに、!= blank は「カートメモが空欄ではない場合」という指示になります。

{% if note != blank %}
<p><b>注文備考:</b></p>
<p>{{ note }}</p>
{% endif %}
<p></p>

 

元の投稿で解決策を見る

Yuya0210
観光客
6 0 0

Arai様

ありがとうございます。

こちらのコードでは反映されませんでしたが、貼り付け場所はわかりやすく助かりました。

Yuya0210
観光客
6 0 0

tuple様

こちらのコードで私もうまく行きました。

大変助かりました。

ありがとうございました。

_osamu_iwasaki_
開拓者
126 33 162

おそらく、!=blank の条件式は省略出来ると思います。

Horai
観光客
3 0 0

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 %}

 

 

 

Jizo_Inagaki
航海者
475 176 471

> Horai様

centerは廃止されているタグなので、使用するのは適切ではないと思います。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/center
https://momdo.github.io/html/obsolete.h...

また、テキストを中央揃えにするためにtableを入れ子で使うのも無駄が多いように思います。

この場合の一例としましては以下のような形が簡素かなと思います。

<div style="text-align:center;">
<p><b>注文備考</b></p>
<p>{{ note }}</p>
</div>

※クラスをつけてインラインスタイルシートを使った方が良いと思いますが、説明がややこしくなるのでstyle属性で記載しています。
※bタグも適切なタグとCSSを使用する形に変更した方がよいと思いますが、こちらもややこしくなるのでそのままにしています。

なお記載されましたコーディング内容に中央揃え以外の意図がありましたら、私の書き込みは出過ぎたものとなりますので、その際は申し訳ありません。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
Horai
観光客
3 0 0

@Jizo_Inagaki ご確認いただきありがとうございます!

コードの意図を補足させていただきますと、主に周辺のHTMLと同じになるようにした感じです。
最初私もシンプルに書いたのですが表示が崩れてしまい...

周辺で使われているHTMLタグと同じように書いてあげることで周りと同じcssがあたるように極力同じメールテンプレート内にあるHTMLタグ、クラスをそのままにしておきました。

なので中央寄せがしたいわけではなく(実際には左寄せになります)、周辺の余白などに馴染むように表示させたかった、が真意でしてその場合に自分でスタイリングするより他と同じHTMLタグを利用する方が手っ取り早くスタイリングを合わせたかったためでした。

Jizo_Inagaki
航海者
475 176 471

> Horai様

差し出がましい投稿となってしまい申し訳ありませんでした。

背景となる意図など承知いたしました。
その流れであれば、記載されておられた形にする方が確かに整えやすいと思います。

また、スレッドに記載されていたコードがpタグで構成されていたのでその前提だと思い込んでいましたが、Shopifyのデフォルトとしてはテーブルコーディングの上でcenterタグも使われていますし、使用されているタグに関してどうこういうのは筋が違いますね。

失礼な書き込みとなりましたこと、改めてお詫び申し上げます。

 

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。