目次
はじめに
makeshopのカテゴリーページや商品検索結果ページで「価格の安い順」や「おすすめ順」などの並べ替えのソートのリンクにアクティブ状態にして欲しいとご要望があったので実装した件についてご紹介します。
使用テンプレート
「Complete」というテンプレートを使用しています。
PR
実際の並べ替えのソートのリンクの表示
makeshopの管理画面側で入力されているHTML
並べ替えソート機能はmakeshopのテンプレートタグで実装されています。
実際に管理画面で入力されているHTMLは下記になります。
<dl class="list-head-sort">
<dt>並び替え：</dt>
<dd><a href="<{$category.sort_low_price_url}>">価格の低い順</a></dd>
<dd><a href="<{$category.sort_high_price_url}>">価格の高い順</a></dd>
<dd><a href="<{$category.sort_recommend_url}>">おすすめ順</a></dd>
<dd><a href="<{$category.sort_new_url}>">新着順</a></dd>
</dl>makeshopの商品カテゴリーページの並び替えのテンプレートタグについて
以下は上記のHTML内のテンプレートタグの説明です。
$category.sort_recommend_url 並び替えURL（おすすめ順） $category.sort_new_url 並び替えURL（新着順） $category.sort_high_price_url 並び替えURL（価格が高い順） $category.sort_low_price_url 並び替えURL（価格が低い順）
引用：makeshopクリエイターモード商品カテゴリー並び替え
また上記は、「商品カテゴリー」ページで入力されているHTMLです。「商品検索結果」ページでは「$category」となっている部分が「$search」に変わります。「商品検索結果」ページの並び替えのテンプレートタグは下記に掲載されています。
makeshopの管理画面側で入力されたHTMLの出力結果
<dl class="list-head-sort">
<dt>並べ替え：</dt>
<dd><a href="/view/category/all_items?sort=price">価格の低い順</a></dd>
<dd><a href="/view/category/all_items?sort=price_high">価格の高い順</a></dd>
<dd><a href="/view/category/all_items?sort=recommend">おすすめ順</a></dd>
<dd><a href="/view/category/all_items?sort=order">新着順</a></dd>
</dl>makeshopの商品カテゴリーページや商品検索結果ページで現在の並べ替えのソートのリンクをアクティブ状態にする方法
デフォルトのHTMLでは、アクティブ状態になりません。なのでHTMLをカスタマイズする必要があります。
以下のHTMLに変更してください。
<dl class="list-head-sort">
<dt>並び替え：</dt>
<dd><a <{if $category.is_sort_low_price_selected }> class="is-active"<{/if}> href="<{$category.sort_low_price_url}>">価格の低い順</a></dd>
<dd><a <{if $category.is_sort_high_price_selected }> class="is-active"<{/if}> href="<{$category.sort_high_price_url}>">価格の高い順</a></dd>
<dd><a <{if $category.is_sort_recommend_selected }> class="is-active"<{/if}> href="<{$category.sort_recommend_url}>">おすすめ順</a></dd>
<dd><a <{if $category.is_sort_new_selected }> class="is-active"<{/if}> href="<{$category.sort_new_url}>">新着順</a></dd>
</dl>下記テンプレートタグを使用して、条件分岐をすることで並べ替えのソートをアクティブ状態にできるようになります。
「おすすめ順」で並べ替えたときには「おすすめ順」のクラス名に「is-active」が付与されるようになります。
デフォルトでは「新着順」に「is-active」が付与されます。
後は適宜cssをご調整ください。
$category.is_sort_recommend_selected おすすめ順かどうか（真偽値） $category.is_sort_new_selected 新着順かどうか（真偽値） $category.is_sort_high_price_selected 高価格順かどうか（真偽値） $category.is_sort_low_price_selected 低価格順かどうか（真偽値）
