Shopifyストアでカートに特定商品が投入されているか検知する方法

ECサイトには多くの場合、カートページと呼ばれるものが存在します。カートページではユーザーが決済前にカート投入した商品の内訳や合計金額などを確認することができます。

カートページに重要な情報を表示する

この記事ではShopify ストアで特定商品がカート投入されたかどうかを検知させる処理について紹介したいと思います。

注意: 本記事で紹介する方法では Shopifyテーマのソースコードを直接編集する必要があります。本番テーマを予め複製しバックアップをとっておいてください。また作業を行う場合はできるだけ Shopify テーマ開発に知見がある方へお願いするようにしてください。

カート内で特定商品を検知させる

Shopifyテーマのディレクトリからカートページに当たるテンプレートを探してファイルを開きます。一般的なテーマであれば “cart-template.liquid”という名称でテンプレートが用意されているかと思います。

今回の処理ではカート投入されている商品の情報を取得したいので Shopify で予め用意されている Cartオブジェクトを活用します。またカート投入されている全商品の情報を参照する際には ”items” プロパティが利用できます。

cart.items
カート内に存在する全てのアイテムを返します。

Cartオブジェクトには他にも以下のプロパティが用意されていますのでぜひ活用してみてください。

• cart.attributes
• cart.cart_level_discount_applications
• cart.currency
• cart.discount_applications
• cart.item_count
• cart.items
• cart.items_subtotal_price
• cart.note
• cart.original_total_price
• cart.total_discount
• cart.total_price
• cart.total_weight

The cart object

“cart.items” で返される値を出力するには for文を使います。特定商品を検知するには各商品に対して割り振られるユーニークな商品IDを利用するのがいいでしょう。商品IDは “product.id” で取得することができます。

The product object

以下の処理ではカートに 123456789 の商品IDを持つ商品があればテキストを表示させるようにしています。商品IDは Integer型なので String型にしないよう注意してください。

{% for item in cart.items %}
  {% if item.product.id == 123456789 %}
    <p>商品ID 123456789 の商品がカート投入されました</p>
  {% endif %}
{% endfor %}

まとめ

Shopify で予め用意されているオブジェクトを使えば以上のように数行の記述で効率良く処理を書くことができます。また、Shopifyテーマ開発で便利なチートシートも用意されていますので興味のある方はぜひ以下リンクも参照してみてください。

Shopify Cheat Sheet - A resource for building Shopify Themes with Liquid