バージョン1.2.0以降

セール中の商品のみ、商品名の前にセール中表示をしたいとします。

商品のセール設定方法はこちら

この場合、

セール中の商品の時に表示したいものと、セール中でない商品の場合に表示したいものをテンプレートに記述しておく必要があります。

商品一覧ページ(または商品詳細ページ)に上のイメージの様に、

セール中の設定をした商品の上にセール中という表示、

セール中でないものにはセール中ではありませんという表示をしたいとします。

(今回は商品一覧ページにセール中の表示する手順を記載します)

商品一覧ページのテンプレート編集画面を開き、

セールに関する表示をしたい箇所を探します。

今回は画像の上に表示するので、

<!-- block:id="item_list" -->
	<div>		
		<p><img cms:id="item_small_image" /></p>
	</div>
<!-- /block:id="item_list" -->

イメージタグの上にセールに関するタグを記述していきます。

<!-- block:id="item_list" -->
	<div>
		<!-- cms:id="on_sale" -->セール中<!-- /cms:id="on_sale" -->
		<p><img cms:id="item_small_image" /></p>
	</div>
<!-- /block:id="item_list" -->

商品設定がセール中になっている場合、

cms:id="on_sale"で囲まれた内容が表示されます。

(テキストだけでなく、画像も表示可能です。)

次にセール中ではない商品の時に何かしらを表示したい場合は

<!-- block:id="item_list" -->
	<div>
		<!-- cms:id="on_sale" -->セール中<!-- /cms:id="on_sale" -->
		<!-- cms:id="not_on_sale" -->セール中ではありません<!-- /cms:id="not_on_sale" -->	
		<p><img cms:id="item_small_image" /></p>
	</div>
<!-- /block:id="item_list" -->

cms:id="not_on_sale"で囲まれた内容が表示されます。

cms:id="on_sale"内では、

他の商品に関するcms:idも表示可能で

 <!-- block:id="item_list" -->
	<!-- cms:id="on_sale" -->
	<div class="sale"> 
		<p><img cms:id="item_small_image" /></p>
		<dl>
			<dt cms:id="item_name"><a>商品名</a></dt>
			<dd class="price" cms:id="item_price">1000円/100g</dd>
		</dl>
		<p class="cart_btn"><a cms:id="item_cart_link">カートに入れる</a></p>
	</div>
	<!-- /cms:id="on_sale" -->

	<!-- cms:id="not_on_sale" -->
	<div class="notsale"> 
		<p><img cms:id="item_small_image" /></p>
		<dl>
			<dt cms:id="item_name"><a>商品名</a></dt>
			<dd class="price" cms:id="item_price">1000円/100g</dd>
		</dl>
		<p class="cart_btn"><a cms:id="item_cart_link">カートに入れる</a></p>
	</div>
	<!-- /cms:id="not_on_sale" -->
<!-- /block:id="item_list" -->

上記の記述法の様に

セール中か否かによって、商品表示を大きく変更することも可能です。

Tweet