Shopifyで特定の商品を取得して表示させる方法! ループは回さずall_products[hoge]で取得しよう!

悩んでいる人

Shopifyである特定の商品情報だけを取得して表示させたいんだけどどうしたらいいんだろう?

本記事では上記の悩みを解決します。

本記事の信頼性

本記事を書いている僕はWeb制作歴2年です。
現在は、Shopify Experts認定企業でエンジニアとして勤務しています。
副業ではWordPressやShopify案件も行いながら、本業とは別でも毎月20万円以上は収益を得ることができています。
現在興味あるのは、Shopifyアプリ開発・React・バックエンド・ネットワーク・ブログ分析あたり。

特定の商品を取得する方法はいくつかあるのですが、簡単に取得する方法を見つけたのでご紹介します。

いままでループを回して取得していたりしたので、このやり方を知ってビックリしました!

かなり簡単に扱えるのでおすすめです👍🏻

スポンサーリンク

目次

解説

カートページの下に特定の商品を表示させます。

↓追加するコード

{%- assign product = all_products["test"] -%}
<div class="product-card">
  <img src="{{ product.featured_image | img_url: "master" }}" alt="{{ product.featured_image.alt }}">
  <p class="product-card__title">商品タイトル:{{ product.title }}</p>
  <span class="product-card__price">価格: {{ product.price | money }}</span>
</div>

ポイントはall_products["handle"] です!

※ちなみにhandleは商品情報の一番下から確認可能です。

変数product に特定の商品の情報をつっこみ、product.titleproduct.priceで商品情報にアクセスできるようにしています。

最終的に下記のような画面を作ることができました!^^

まとめ

今回、お客様からカートページに特定の商品だけをだしたいと言われた際にこちらで実装しました!

既存のコンポーネントで対応もできるのですが、共通化されていたりして柔軟に対応できないこともあるかと思います。

そういうときに、コードで自由に対応できるかなりカスタマイズできるようになるのでいいですね^^

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる