Shopify小技：サンキューページに特定商品の注文に応じたコンテンツを表示する

FRACTA ｜トータルブランディングパートナー

2020年8月27日 09:30

こんにちは。TSディビジョンの森田です。
Shopifyの良いところとして「API等がしっかり作られている」「情報を探せば何かしら手がかりはある」といったことが挙げられます。

・・・が！実際に運用されているブランドの方には、調べて試すのに時間がかかったり、読み解くのに技術用語を調べたりと、小さい手間が積み重なり、諦めてしまうケースも多いかと思っています。

そんな時に役に立つよう「小技」を書いていこうと思います。
本当に小さい内容になってしまうかもしれませんが、私たちの知見がブランドの現場の方々のお役に立てば幸いです。

※コード記載の場合、単純なケースの確認しかしていませんので、きちんとしたパターン検証はご自身でご確認ください。

小技：【追加スクリプトを利用：サンキューページに特定商品の注文に応じたコンテンツを表示する】

このように、特定商品を購入したらサンキューページにhtmlを表示することができます。htmlが出力できるので、画像・動画・テキストで表現ができそうですね。

通常、サンキューページはplusプラン以外では編集できず、コンテンツを置くならアプリ利用になりますが、これくらいのちょっとしたことなら追加スクリプトでできそうです。
追加スクリプトとは、Shopify管理画面の設定＞チェックアウトにある、liquidコードを記載できる項目のことです。

上記の参考リンクでは商品名で判定していますが、下記はハンドル名にアレンジした版のコードです。

例：ハンドル名(各商品に付与できる英語のURLに使われる一意の名称)が「test_blue_handle」の場合、添付画像の赤枠位置にhtmlを描画します。

<script>
 {% for line in checkout.line_items %}
   // DEBUG looking at {{ line.handle }}
   {% if line.product.handle == 'test_blue_handle' %}
     Shopify.Checkout.OrderStatus.addContentBox(
       '<p>test_blue_handle your product <a href="#">Here!</a></p>'
     )
   {% endif %}
 {% endfor %}
</script>

知っておくと使えるかもしれないobject知識

ここからはおまけです。ちょっとシステムチックな話になるので、興味がなければ飛ばしてください。
ただ、知っていると、上述のようなコードで「商品名も出したいな・・・」といったことができるようになるはずです。

Shopifyは「オブジェクト」と呼ばれるデータ構造になっています。
商品だったらproductオブジェクト、顧客だったらcustomerオブジェクトといった具合です。

このデータ構造を知っていると便利です！

例えば、上述の小技の例：商品のハンドル名が知りたい場合、次のようにオブジェクトを参照していきます。

・checkout.line_items：購入商品が見れる(サンキューページで参照できるオブジェクト＝checkoutオブジェクト)
・1商品ずつ参照するためforでまわす
・line_item.product：line_itemオブジェクトを参照し、商品詳細情報を見る
・product.handle：productオブジェクトを参照し、ハンドル情報を得る

以上、追加スクリプトを利用したサンキューページに特定商品の注文に応じたコンテンツを表示する小技でした！

フラクタでは、ブランディングやEコマースに関する情報を発信しています。ぜひスキ、フォローしていただけるとうれしいです！

▼FRACTAについて

▼Twitterもやってます！
https://twitter.com/fracta_pr https://twitter.com/fracta_pr