有限会社スプレッドワークス/Spread Works Inc.
ECサイト構築Webサイト構築Webシステム開発マーケティング支援制作実績課題解決
SERVICESサービス紹介
ECサイト構築・運用
CASES / WORKS課題解決 / 制作実績
NEWS / COLUMNお知らせ / ナレッジ・コラム
技術アーカイブス

EC-CUBE4で商品一覧を「更新順」にカスタマイズする方法:画面設定から処理追加まで

EC-CUBE4がリリースされ1ヵ月が経ちました。 「EC-CUBE 開発コミュニティ」でもEC-CUBE4の質問が多くなってきました。 今回はコミュニティで回答させていただいた商品一覧ページのソート順のカスタマイズについて詳しく説明しようと思います。

「更新順」のソートを実装していきます。手順は以下のようになります。

  1. 画面に「更新順」を追加
  2. 「更新順」の処理を追加

1. 画面に「更新順」を追加

商品一覧画面を見るとセレクトボックスで「価格が低い順」「価格が高い順」「新着順」の3つがあります。

管理画面のマスター管理を利用し、「更新順」を追加していきます。 管理画面->設定->システム設定->マスターデータ管理を選択。 マスターデータ管理画面にある「mtb_product_list_order_by」を選択します、

マスターデータの入力欄に「価格が低い順」「価格が高い順」「新着順」が確認できます。 最終行に、IDを4、NAMEを更新順と入力し保存してください。※1

ショップ画面で確認し、更新順が追加されていることを確認してください。

2. 追加したソート順の処理を追加

更新順にソートするif文を追加していきます。

GitHub 該当コード

新着順のコードを参考に更新順のifを追加し2点を修正してください。

  1. ifの条件を更新順IDの4にする
  2. orderByを「update_date」に変更する
/src/Eccube/Repository/ProductRepository.php#L167-L204
        // 新着順
        } elseif (

        ~省略~

        // 更新順
        } elseif (!empty($searchData['orderby']) && $searchData['orderby']->getId() == 4) {
            // 在庫切れ商品非表示の設定が有効時対応
            // @see https://github.com/EC-CUBE/ec-cube/issues/1998
            if ($this->getEntityManager()->getFilters()->isEnabled('option_nostock_hidden') == true) {
                $qb->innerJoin('p.ProductClasses', 'pc');
                $qb->andWhere('pc.visible = true');
            }
            $qb->orderBy('p.update_date', 'DESC');
            $qb->addOrderBy('p.id', 'DESC');
        } else {

以上となります。

今回は、EC-CUBE4の本体カスタマイズになりましたが、バージョン3と同様にカスタマイズも簡単にできるようになっています。 次回は、EC-CUBE4で追加されたカスタマイズフォルダを利用し、本体をカスタマイズせずに 商品一覧ページのソート順の追加をしていきます。

参考

商品一覧を更新順で表示させたい | EC-CUBE 開発コミュニティ

https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic\_id=21013&forum=11

※1 EC-CUBE4 ver4.0.0では、IDの入力欄が2つある状態になっています。左側がIDになるので4を入力。 右側がNAMEになるので更新順と入力してください。

このコラムに関連するサービス・製品

ECサイト構築サービス with EC-CUBE

EC-CUBEを活用したECサイト構築サービスでは、オリジナルデザインや高機能プラグインを活用し、業種や規模に応じた柔軟なカスタマイズを提供します。小規模から大規模まで対応可能で、安定稼働と高水準のセキュリティを実現。

カテゴリー
  • すべて

  • 雑記

  • 技術アーカイブス

Powered by SPREAD Commerce on EC-CUBE.copyright © Spread Works Inc. all rights reserved.