0%

Programmingプログラミングナレッジ

Posted:2020.04.24

Shopifyで販売元とコレクションの情報を使ったカスタマイズ

最近話題になることが多い海外製ECカートASPの「Shopify」ですが、先日カスタマイズの案件があり、そこで使えそうなものがあったのでメモとして残しておきたいと思います。Shopifyでは商品を登録する際にいろんな関連情報も入力できるのですが、中でも、コレクションと呼ばれる商品のカテゴライズグループ機能と、販売元の設定はうまく使うことでデザインにも活用できます。

 

Shopifyはカスタマイズも容易で、洗練されたモダンな管理画面が用意されており、これまでのECカートASPにはない、快適なコーディング環境が整っている印象です。ページ自体は「Liquid」と呼ばれるRuby製のテンプレートエンジンを採用しており、独自のテンプレートタグが使えます。

【Liquid template language】
https://shopify.github.io/liquid/

 

また、商品などの情報はオブジェクトとしてデータを取得でき、それらをページ上に展開することも可能です。Shopifyの開発者向けドキュメントに詳しく載っていますので、こちらをご参考ください。

【Liquid template language reference】
https://shopify.dev/docs/themes/liquid/reference

 

今回は、コレクションと販売元の情報を使ったカスタマイズのTipを見ていきたいと思います。

 

1. 販売元(Vendor name)の出力

商品情報の販売元の値には、productオブジェクトのhandleを使ってアクセスすることができます。変数化しておくことで、ページ上のいろんな箇所に表示させることができます。

【Liquid】

{% assign vendor_handle = product.vendor | handle %}
{{ vendor_handle }}

 

 

2. 販売元別にコレクションを登録して、そのアーカイブページへのリンク出力

先ほどの販売元を出力する変数を使った応用です。販売元でコレクションを登録しておき、販売元別のアーカイブページURLを出力する方法です。collectionsオブジェクトで販売元の値から配列のインデックスで情報を取得しています。

【Liquid】

{% assign vendor_handle = product.vendor | handle %}
{% assign collection_for_vendor = collections[vendor_handle] %}
<a href="{{ collection_for_vendor.url }}">

 

collectionsオブジェクトが取得できないような場面では、コレクションのアーカイブページのルーティングに沿って直接指定する方法が使えます。

【Liquid】

{%- assign vendor_handle = product.vendor | handle -%}
<a href="/collections/{{ vendor_handle }}">

 

 

3. 販売元別のコレクションに登録されたアイコン画像を出力する

同じく、販売元を出力する変数を使った応用で、コレクションに登録できるアイコン画像を出力します。ここではコレクションのアイコン画像に販売元に関するイメージを登録しておくことで、販売元のアイコン画像として表示させることができます。collectionsのオブジェクトに含まれているimageのキーから画像のURLパスを取得できます。またここでは合わせてサイズ指定もできます。

【Liquid】

{%- assign vendor_handle = product.vendor | handle -%}
{%- assign collection_for_vendor = collections[vendor_handle] -%}
<img src="{{ collection_for_vendor.image | img_url: 'small' }}" alt="Icon">

 

今回まとめている方法で、販売元別の商品一覧と、その一覧ページ内で各商品の販売元アイコン画像を表示させることができます。販売元別で商品をカテゴライズする場合には使えるテクニックかと思いますので、ご参考にどうぞ!

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】