Shopifyの自動通知メールをカスタマイズするための開発環境を作ってみた
Shopify でサイト構築を行う際は通知メールのテンプレートがあらかじめ用意されているため、一から作成する必要がありません。また通知内容も注文情報に応じて動的に切り替えられ、HTML メールで送信されます。
基本的にはノーコードもしくはローコードで簡単にセッアップ可能なのですが、テンプレートの内容を大きく編集する場合は Liquid と呼ばれるテンプレート言語を書き換える必要が出てきます。そのため、メールを HTML ファイルを用いてローカル環境で作成し、そのまま表示確認することが難しく何気に手間がかかります。
そこで通知テンプレートの改修やプレビューの手間を解消するため、ローカル環境で開発するためのスターターテンプレートを作成しました。
以下動画のように Liquid ファイルを編集するとその場で変更内容がブラウザに反映され、表示の確認が行えます。
特徴
- ローカルサーバーでのホットリロード&プレビュー機能
- Liquid, HTML の構文チェックおよびフォーマット機能
- 標準のメールテンプレートがセットアップ済み
- 多言語対応（英語・日本語）
利用条件
Node.js の実行環境があればすぐに開発が進められます。
- Node v18以上
- Shopify ストア
利用方法
以下リポジトリへアクセスし、Use this template を選択してください。
リポジトリのクローン
リポジトリのセットアップが完了したら、クローンします。YOUR-USERNAMEとYOUR-REPOSITORYは書き換えてください。
git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
パッケージのインストール
以下コマンドで必要なパッケージをインストールします。以降の解説では pnpm の利用を前提としています。npm 等をご利用の場合は読み替えてコマンドを実行してください。
pnpm install
.env の作成（任意）
プロジェクトのルート直下に.envファイルを作成し、ストア管理画面の URL を設定します。
.env.exampleファイルを参照してみてください。
ここで設定した情報はストア管理画面を展開する場合などで利用されます。ローカル環境で開発を進める上では設定していなくても問題ありません。
ADMIN_URL=https://your-shop-name.myshopify.com/admin/
開発スタート
以下コマンドで開発をスタートできます。
http://localhost:4000 を開いて表示確認できます。
pnpm start
以上で開発に必要な作業は完了です。
メールテンプレートの編集
メールテンプレート関連の内容を編集する場合はviewsフォルダー内のファイルを変更します。
英語、日本語の標準テンプレが格納されています。
- en: 英語テンプレート
- ja: 日本語テンプレート
通知の参照変数で扱われる値を変更したい場合はemailEnv.tsファイルで調整できます。
/server/constants/emailEnv.ts
便利コマンド
開発時に便利なコマンドをいくつか用意しています。たとえば、ストアの管理画面から通知設定画面を開く場合にも以下コマンドで展開が可能です。
pnpm admin
以下コマンドで Liquid や HTML の構文チェック、フォーマットをかけることができます。
pnpm format
その他コマンドに関しては以下リンク先で確認いただけます。
📝 コマンド一覧
作業フローイメージ
基本的に以下のような作業を想定しており、テンプレートを使えば 1~3 までの作業をカバーできるようになっています。
- ローカル環境でメールテンプレートの必要箇所を編集
- ブラウザで表示確認
- ストア管理画面を展開
- 変更した Liquid ファイルの内容をコピペ
- 管理画面でプレビュー
- テスト送信
- メールクライアントで表示確認
まとめ
まだ未完成な部分もありますが、shopify-email-notificationが Shopify 構築の手助けになれば幸いです。ぜひ使ってみた感想などあれば教えてください。
Discussion