新型コロナウィルス の影響で独自ECサイトを持とうという企業が増えてきました。
EC CUBE、BASEとさわって最近はshopifyをカスタマイズ出来るように指令が出たので勉強を始めてみたいと思います。
shopifyでは「liquid」というテンプレート言語を使用しています。
一から覚えないといけないですが、ループの特性などを覚えれば比較的カスタマイズはしやすいという印象です。
shopifyでは基本的に
- トップページ
- コレクションページ(タグ、カテゴリーページ)
- 検索ページ
- プロダクトページ(個別商品ページ)
- カート
といった構成ではないでしょうか？
カスタマイズ方法ですが、基本的にFTPなどで直接アップロードはできないので管理画面からコードをいじっていくことになります。
基本となるループ方法
トップページ等で一覧を出したい場合
特定のコレクションは選択せず全商品の中から12商品出力する場合
今回出力するものはイメージ画像(thumbnail)、商品名(タイトル)、商品価格
12商品分出したいので、ループ回数は12回で設定する
{% paginate collections.all.products by 12 %}
<ul>
{% for product in collections.all.products %}
<li>
<a href="{{ product.url }}">
{%- assign featured_image = product.featured_media.preview_image %}
{% if featured_image.src == blank %}
<img src="{{ featured_image.src | img_url: 'medium' }}" alt="{{ featured_image.alt | escape }}" title="{{ featured_image.alt | escape }}">
{% else %}
<img src="{{ featured_image.src | img_url: 'medium' }}" alt="{{ featured_image.alt | escape }}" title="{{ featured_image.alt | escape }}">
{% endif %}
<p>{{ product.title }}</p>
<p>{{product.price | money}}</p>
</a>
</li>
{% endfor %}
</ul>
{%- if paginate.pages > 1 -%}
{%- include 'pagination' -%}
{%- endif -%}
{% endpaginate %}
最初に商品画像は下記のようなテンプレートコードを使ってみたのですが、1商品に複数画像を使用していた場合、画像をループして複数の画像が出力されてしまいました。
{% for image in product.images %}
<img src="{{ image.src | product_img_url: 'medium' }}">
{% endfor %}代表の1枚だけを出力したいので下記に変更しました。
{%- assign featured_image = product.featured_media.preview_image %}
{% if featured_image.src == blank %}
<img src="{{ featured_image.src | img_url: 'medium' }}" alt="{{ featured_image.alt | escape }}" title="{{ featured_image.alt | escape }}">
{% else %}
<img src="{{ featured_image.src | img_url: 'medium' }}" alt="{{ featured_image.alt | escape }}" title="{{ featured_image.alt | escape }}">
{% endif %}下記コードの12という数字ですが、これはループ回数です。
{% paginate collections.all.products by 12 %}ループした回数以上の商品登録数があった場合、ページネーションが必要です。
その場合は下記コードを記述します。
{% paginate collections.all.products by 12 %}
{% for product in collections.all.products %}
ここはループ
{% endfor %}
{%- if paginate.pages > 1 -%}
{%- include 'pagination' -%}
{%- endif -%}
{% endpaginate %}
特定のコレクション(カテゴリー)に所属してる商品のみ出したい場合
下記コードに入っている「all」をコレクションのハンドル名に変更する
例えば「お肉」というコレクションでこのページのハンドル(スラッグ名)が「meat」だった場合
{% paginate collections.all.products by 12 %}
{% for product in collections.all.products %}
↓
{% paginate collections.meat.products by 12 %}
{% for product in collections.meat.products %}