前回はShopaholicをcomposerでインストールする方法を説明した。
今回は製品を登録して、フロントエンドサイトで製品を表示するところまでを説明する。
製品を登録する
"Catalog" メニューから製品を登録することができる。
URLはURL中でこの製品を特定するのに使用するユニークなキーを入れる。次のセクションで言及しているslugがこれである。
次に"Offer"について。
Productsの登録画面には価格を登録するところがない。価格はOfferで管理されているためだ。
Offerとは同じ製品に条件次第で異なる価格設定を登録するためにある。
例えば、セットで購入する場合に値段を割安にする、ということが考えられる。
ということでOffersタブから価格を登録する。
製品を表示する
表示するにはProductPageコンポーネントまたはProductDataコンポーネントを使用する。
これらは、ProductPageがslugプロパティで製品を指定するのに対して、ProductDataはget()メソッドにIDを渡して指定するだけの違いしかない（と思う。正直、２つある意味はよくわからない）。
どちらを使っても良いが、[ProductPageのドキュメント][ProductPage]から拝借したサンプルコード(を少し補完したもの)は下記のようになる。
[ProductPage]: https://github.com/lovata/oc-shopaholic-plugin/wiki/ProductPage
title = "Product"
url = "/product/:slug"
layout = "default"
is_hidden = 0
[ProductPage]
slug = "{{ :slug }}"
==
{# Get product item #}
{% set obProduct = ProductPage.get() %}
<div data-id="{{ obProduct.id }}">
<h1>{{ obProduct.name }}</h1>
{% if obProduct.preview_image is not empty %}
<img src="{{ obProduct.preview_image.path }}" title="{{ obProduct.preview_image.title }}" alt="{{ obProduct.preview_image.description }}">
{% endif %}
<span>Category: {{ obProduct.category.name }}</span>
<span>Brand: {{ obProduct.brand.name }}</span>
<span>Brand: {{ obProduct.brand.name }}</span>
{% set obOffer = obProduct.offer.first() %}
{% if obOffer.isNotEmpty()%}
<span>Price: {{ obOffer.price }} {{ obOffer.currency }}</span>
{% endif %}
<div>{{ obProduct.description|raw }}</div>
</div>
次回はアイテムをカートに入れるとこまで。