見出し画像

【Shopify】今週の振り返り5

monchan_shopify



Javascriptのmessageイベント

以前もあった、Shopifyテーマ開発あるあるの、アプリで作成されたUIをテーマ側から変更する作業ですが、今回も同じような作業だったのですが、初めて使ったコードがあったのでまとめていきます。

今回は見た目…というよりは、アプリ側から情報を渡してもらって、それを使用するという内容なので、上記とは少し異なる内容になりますが、内容としては以下の形です。

アプリ側から特定のデータ（今回はURL）を渡してもらい、それをテーマ側で使用する方法です。

つまり、アプリベンダーさんと連携が必要であることが前提です。
（もしかしたら、ベンダーさんの方で事前にいろいろ準備してくれているかも？）

今回使用したのが以下のコードです。

window.addEventListener('message', (e) => {
  if (e.data.action === 'setId') {
		const id = e.data.id;

		if(id) {
			// 情報を使用して実行するコード
		}
  }
});

window.addEventListener('message') は、異なるオリジン間でデータを安全に送受信するためのブラウザのAPIです。

例えば、 <iframe> 内の別のページや別のウィンドウにデータを送るときに使用されます。

  • message イベントは、別のウィンドウやフレームから送られてきたメッセージを受け取る際に発火。

  • e には送られてきたデータが格納される。

事前にアプリベンダーさんとaction名を決めておきます。
すると下記の形で、情報を取得することができます。

例）action名をsetIdとしていた場合

if (e.data.action === 'setId') {
		const id = e.data.id;

		if(id) {
			// 情報を使用して実行するコード
		}
  }

これで、アプリ側から渡されたデータもテーマ側で使用できるようになります！


ちなみにアプリ側（データを渡す側）には下記のようなコードを書くようです。

window.parent.postMessage({
  action: 'setId',
  id: '12345'
}, '*');


まだまだ、知らないことだらけで、日々勉強です…
最近shopifyのアップデートもあったし、年末はゆっくりしつつ、アップデートの内容を確認していきたいなぁと思っています。

ちなみに、このアップデートで（？）Shopify Flowで使用できるトリガーに、顧客セグメントに追加されたら（セグメントから外されたら）というトリガーが使用可能になりましたね！

このトリガーも早速使用してみました！
例えば、定期購入している商品がある人セグメントを作って、そこに追加されたらタグXXXをつける、セグメントから外れたらタグをとる。

最後の購入から3ヶ月経った人セグメントを追加して、セグメントに追加されたらメールを送る…（これは試してはいませんが笑）など、使い勝手がいいトリガーだと思います。

余談…

少し前に、社内でのポジションが変わりPM的な立ち位置になりました。
まだまだ、PMとは…
というぐらいの理解度ですが、なんとか頑張っています。

あと1週間で仕事納めなのですが、予定通り進んでいないタスクも多く、スケジュール立てるのって難しいんだなぁと実感しています。

また、コードを書く時間が少なくなり、管理や調整、調査が増え、なんだか寂しくなりつつあります笑

来年はもっとゆとりを持って、スケジュール調整ができるように、試行錯誤していきたいです。

きっと来週は、仕事納め後でお休み気分になっているので笑、今年はこれで最後になる予定です。

記事数にすると5つほどで、内容も簡単なものが多いですが、3日坊主の私が、期間にすると1ヶ月以上、継続して記事を書くことができている事に驚いています…笑
来年も引き続き、楽しみながら記事を書いていきたいです。

Shopifyに特化したWEB制作会社で勤務しています。
Shopifyについての学びを発信中です。
記載されている内容をストアで使用する際は自己責任にてお願いいたします。


いいなと思ったら応援しよう！