商品一覧を価格の高い順(降順)に表示する(カラーミーショップ)

日々カラーミーに関する様々なご相談が寄せられますが、先日伺ったのが「商品一覧を価格の高い順に表示したい」というもの。

たしかに「価格の安い順」は標準機能で用意されていますが、高い順はありません。

結論から言うと、「実装は可能だが、商品数が多いショップ様だと作業工数が増える」です。

「価格の安い順」を逆回しで表示する

価格の高い順ということは、価格の安い順をひっくり返せば良いので、テンプレートのsectionループにstep=-1を指定すると反対から表示されます。

<{section name=n loop=$productlist step=-1}>
  loop content
<{/section}>

価格降順以外は逆回しにしたくないので、実装する際は分岐させる必要があります。

<{* 一例 *}>
<{if $smarty.get.sort == 'p_desc'}>
  <{* 価格降順のときのループ*}>
 <{section step=-1 loop=$list}>
    処理
  <{/section}>
<{else}>
  <{* それ以外のとき *}>
  <{section loop=$list}>
  上と同じ処理
  <{/section}>
<{/if}>

余談ですが、smartyには Array|@array_reverse という配列をひっくり返す修飾子もあるのですがカラーミーショップでは使用できません。これが使えればもっと楽に記述できるのですが残念です(余談おわり)。

ただし、これで解決できるのは「商品一覧が1ページに収まる場合のみ」です。

$productlist には該当ページの商品データしか入っていない

商品一覧のリスト情報である $productlist という変数(独自タグ)には、そのページに必要な商品の情報しか入っていません。

たとえば、全100商品で、1ページずつの表示件数を10件にしている場合、1ページ目の$productlistには1番~10番までの10商品データ。… 10ページ目には91番~100番までの10商品 という感じです。

このように複数ページに渡る状態で価格の安い順を逆にしたとしても、一番高い商品は最後のページに存在するままですので意味がありません。

この問題をクリアするためには、1ページの表示件数 > 全商品数 に設定しておく必要があります。

*1ページあたりの表示件数は、 管理画面 > デザイン > 「商品の表示順・表示数の設定」 で指定できます。

商品数が多いショップはどうするのか

ミフネWEBで担当させていただいているショップ様の中には、1万点以上の商品を扱っておられるお店もいくつかあります。

そんなショップ様が1ページに全件表示なんてしたら大変なことになります。せいぜい100件 / 1ページ ぐらいです。

このような1ページ全件表示が難しいショップ様にご提案できるのは以下3通りです。

案1:全件表示にして、ロード時は一部を表示する

(共通の前提で、全100件・10件ずつ表示したい とします。)

ぺージ読み込み時点では最初の10件だけを表示。11件目以降はcssで非表示にしておき、「もっと見る」ボタンを追加して10件ずつ表示を増やしていく。または、底まできたら自動で続きを表示する。

どちらもJavaScriptで表示/非表示を制御します。

Lighthouseから「DOMが多い」という文句は出るかも知れません。

案2 :APIを利用

全件表示の方法は使用せず、APIから商品情報を取得し価格降順で10件ずつ表示する。

カラーミーの商品APIは最大1,000件までしか取得できないのですが、大体のショップ様ならこれで解決できるのではないかと思います。

1,000点を超えるショップ様はAPIサーバを自作するなりして対応することになります。

案3 : 諦める

「価格降順にする」ことに、そこまでの必要性が無いのであれば潔くあきらめましょう。

もしかすると、降順にこだわるよりもっと大切なことが他にあるかも知れません。

まとめ

商品数がすくなければ、<{section name=n loop=$productlist step=-1}> でOK。

商品数が多いときは、なんらかのJS処理で対応するか諦めましょう。

カスタマイズ
シェアする
カラーミーショップ制作パートナー ミフネWEB
タイトルとURLをコピーしました