ひとりまとめ

もろもろのメモ

shopifyで表示をちょっとカスタマイズしたい!

海外のネットショップ作成サービスに「Shopify」というのがあります。

www.shopify.com

 

ネットショップに必要な一通りの機能を備えていて、見た目のテーマを選んで商品を登録するだけで、すぐに使うことができるサービスです。

このテーマ自体も種類があり、また、様々なデザインのテーマの販売も行われているため、設定画面からぽちぽち選んでいくだけで、大抵のことは出来てしまうようです。

 

ただ、そんな時でも「ちょーっとここにこう言う表示を出したいんだよなー」ということはあります。今回、まさにそういうちょっとだけイジリたい事態になったため、調べたことを備忘録。

 

どういう作りなのか?

Rubyのliquidというテンプレートエンジンが使われているようです。なので、文法に困ったらRubyで検索!

 

どこでいじれるのか?

管理画面から「Online Store」

f:id:g2_girichan:20160123124649p:plain

「Themes」を選んで

f:id:g2_girichan:20160123124740p:plain

目的のテーマを見つけて、「・・・」というボタンを押してプルダウンから「Edit HTML/CSS」を選びます。

f:id:g2_girichan:20160123124904p:plain

 

ファイル構成は?

・Layout:ページ全体の構成

・Templates:各ページのテンプレート

・Snippets:テンプレートから呼び出されるメニューなどの構成パーツ

・Assetes:cssや画像など

・Config:設定系のjson(ぽい。きちんと調べてません・・・)

・Locales:言語ファイル(ぽい。これまたきちんと調べてません!)

ページの一部をちょこっとイジル分には、TemplatesとSnippetsを触ればOKそうです。

 

いじり方

・テンプレート

見ていくとすぐわかると思いますが、主なページはそれぞれこんな感じ。

 TOPページ:index.liquid

 商品詳細ページ:product.liquid

 カテゴリーの商品一覧ページ:collection.liquid

 

続いて、処理のいろいろ

・任意のSnippetを呼び出す

 {% include '呼び出すSnippetのファイル名(拡張子の.liquidは不要)' %}

 

・変数の値を表示

{{ 変数名 }}

WordPressDrupalをイメージするとわかりやすいかも。システムがすでにテンプレートに引き渡している変数がいろいろあります。

既存のテンプレートを参照することでわかると思いますが、shopifyでよく使う変数の一部を列挙してみます。

 カテゴリー名:collection.title

 商品の名前:product.title

 商品の詳細:product.description

 

複数の値が入った中身をループで処理

一覧ページなどや、商品自体に複数ついているタグなどは、ループを回して処理をしたりします。ある商品のタグをループして全部表示するとかってときは、こんな感じ。

 {% for tag in product.tags %}

  {{ tag }}

 {% endfor %}

 

・変数に値を入れる

テンプレートの中で何らか変数を使いたい場合は、こうしました。

 {% assign hoge = 'ほげ' %}

これを後でifで処理したり表示させたり。

 

・ある値を処理して表示

フィルタと言って、シェルのパイプみたいな感じで、値を利用していけるようです。

こちらを参考にさせていただきました。

www.slideshare.net

 

 

ほんの少し書き換えただけで、後で忘れてしまいそうだったため、ひとまずすぐ思い出せる程度にメモでした。