商品一覧ページの並び替えについて [らくうるカート]

らくうるカート / / カスタマイズ

らくうるカートの商品一覧ページ（カテゴリ・キャンペーン・検索結果）の並び順は、以前までは「価格の安い順・高い順・更新日順」の3パターンでしたが、2021年6月から「名前順・おすすめ順」の２つが加わり、５パターンの並び替えが可能となっています。

並び替えの設定は　商品管理 > 商品一覧表示設定 からできますが、 「2021年6月8日以前に追加したテンプレートでは初期表示順に「商品名順」「優先設定順」を利用いただけません。」 と表示が出てくるので諦めた方もいるかもしれません。しかし古いテンプレートのままでも数行のコードを書き加えれば新しい並び替えに対応できます。

諦めかけていた方からご相談を受けたので、そのやり方を紹介しておこうと思います。

新しい２種類の並び替えを追加する

商品一覧のテンプレートをひらくと、下のようなコードがあるので、

{% set sortOrder = '&sortKind=1' %} 
{% if sortKind == '2' %}
{% set sortOrder = '&sortKind=2' %} 
{% elseif sortKind == '3' %}
{% set sortOrder = '&sortKind=3' %} 
{% endif %}

下のように４と５を追加。

{% set sortOrder = '&sortKind=1' %} 
{% if sortKind == '2' %}
{% set sortOrder = '&sortKind=2' %} 
{% elseif sortKind == '3' %}
{% set sortOrder = '&sortKind=3' %} 
{# ここから追加 #}
{% elseif sortKind == '4 %}
{% set sortOrder = '&sortKind=4' %} 
{% elseif sortKind == '5' %}
{% set sortOrder = '&sortKind=5' %} 
{# ここまで #}
{% endif %}

あとは、並び替え用のボタンがある箇所に４と５用のリンクを追加してやれば対応終了です。状況によって４のみ、または５のみ。あるいは１と３と５のみ、のような設定でも問題ありません、

{% if sortKind == '1' %}
<li><span>価格の低い順</span></li>
<li><a href="/item-list?sortKind=2{{ condition }}">価格の高い順</a></li>
<li><a href="/item-list?sortKind=3{{ condition }}">更新日順</a></li>
<li><a href="/item-list?sortKind=4{{ condition }}">名前順</a></li>
<li><a href="/item-list?sortKind=5{{ condition }}">おすすめ順</a></li>
{# 以下略 #}

ただし、並び替え項目が増えることでデザインがずれると思いますので、そこはCSSで各自調整してください。

関連投稿