ナビゲーションページとは

おすすめ商品を表示したり、サイトの新着情報を載せるというような一般的なサイトのトップページにあたるページです。

今回はトップページの作成し、おすすめ商品を表示してみます。

トップページに最近入荷した商品をおすすめ商品として表示したいとします。

始めに商品の詳細画面でおすすめ商品に設定するをチェックし、商品の更新をします。

続いて、

テンプレート管理のテンプレート一覧にあるナビゲーションページの編集を開きます。

テンプレートの編集画面にソースコードを記述し、おすすめ商品を表示したい箇所を選びます。

<h3>おすすめ商品</h3>
<div class="indent">
	<div class="recommend clearfix">
		<p><a href="商品のURL">サムネイル画像を貼る予定</a></p>
		<dl>
			<dt>
				<a href="商品のURL">
					<span>商品名が表示されます</span>
				</a>
			</dt>
			<dd>商品の説明が表示されます</dd>
			<dd>商品の価格が表示されます</dd>
		</dl>
	</div>
</div>

始めにおすすめ情報に関する箇所全体をショップモジュールで囲み、

商品表示に関する箇所をブロックで囲みます。

<!-- shop:module="common.recommend_items" -->
<h3>おすすめ商品</h3>
<div class="indent">
	<!-- cms:id="recommend_item_list" -->
	<div class="recommend clearfix">
		<p><a href="商品のURL">サムネイル画像を貼る予定</a></p>
		<dl>
			<dt>
				<a href="商品のURL">
					<span>商品名が表示されます</span>
				</a>
			</dt>
			<dd>商品の説明が表示されます</dd>
			<dd>商品の価格が表示されます</dd>
		</dl>
	</div>
	<!-- /cms:id="recommend_item_list" -->
</div>
<!-- /shop:module="common.recommend_items" -->

<!-- shop:module="common.recommend_items" -->で囲った箇所は、おすすめ商品が存在した場合のみ表示されます。

おすすめ商品が存在した場合、<!-- cms:id="recommend_item_list" -->で囲まれた箇所が繰り返し表示されます。

次に商品情報として表示したいものを追加します。

<!-- shop:module="common.recommend_items" -->
<h3>おすすめ商品</h3>
<div class="indent">
	<!-- cms:id="recommend_item_list" -->
	<div class="recommend clearfix">
		<p><a cms:id="item_link"><img cms:id="item_small_image" /></a></p>
		<dl>
			<dt>
				<a cms:id="item_link*">
					<span cms:id="item_name">商品名が表示されます</span>
				</a>
			</dt>
			<dd cms:id="item_description">商品の説明が表示されます</dd>
			<dd cms:id="item_price">商品の価格が表示されます</dd>
		</dl>
	</div>
	<!-- /cms:id="recommend_item_list" -->
</div>
<!-- /shop:module="common.recommend_items" -->

以上のコードを入力したら、ナビゲーションページテンプレート作成は終了です。

商品リストの追加と同様にナビゲーションページを追加し、ページを確認してみます。

おすすめ商品の設定でチェックした商品がナビゲーションページに表示されていれば、設定は終了です。

cms:idに関してはこちらを御覧下さい。

Tweet