EC-CUBEの商品一覧を品番順に並べる｜BtoBで探しやすくする設計ポイント

この記事でわかること
EC-CUBEの商品一覧に「商品コード順（品番順）」を追加すると、カタログや発注書の品番と照合しながら商品を探す運用に合わせられます。この記事では、過去のカスタマイズ例をもとに、品番検索との違い、コードの並べ方、規格ごとの商品コード、初期表示やページ切り替えの設計ポイントを解説します。

取引先が商品名よりも品番を手掛かりに発注する場合、価格順や新着順だけでは、いつもの商品を一覧から探しにくいことがあります。

品番順を追加するときは、選択肢の名前だけでなく、「どのコードを、どのルールで並べるか」を決めることが大切です。お客様が普段使っているカタログや発注書の並び方も確認します。

BtoBの商品一覧を、取引先の探し方に合わせる

品番で商品を指定する取引では、同じシリーズの番号をたどったり、発注書の順番に商品を確認したりする使い方があります。そのような運用では、商品コード順を選べることが、商品を探す手掛かりになります。

• カタログとの照合：紙やPDFのカタログに記載された品番を見ながら、商品を確認する。
• シリーズの比較：似た品番の商品を並べ、仕様や規格の違いを確認する。
• 継続的な発注：社内の発注書や品番表に合わせて、定番商品を探す。

一方で、初めて購入するお客様や、用途から商品を選ぶお客様には、カテゴリー、商品名、仕様による絞り込みが必要です。BtoBという理由だけで初期表示を品番順に固定せず、実際の商品選びに合わせて判断します。

過去の実装例：商品コード順を追加し、初期表示も変更

元記事では、BtoB向けECサイトに「商品コード順」を追加し、商品一覧の初期表示も商品コード順へ変更した例を紹介しました。以下の画像は当時の画面です。現在のバージョンやテンプレート、導入済み機能によって、選択肢や表示方法は異なります。

EC-CUBE 4系の商品一覧の表示例

公式の4系運用マニュアルでは、商品一覧の並び替えとして「価格が低い順」「価格が高い順」「新着順」が案内されています。下の画像でも、並び順をプルダウンから選択できます。

参考：EC-CUBE 2系の表示例

元記事に掲載していた2系の画像では、「価格順」「新着順」がリンクで表示されています。画面や内部構成が異なるため、4系と同じ変更方法を使えるとは限りません。

「商品コード順」を追加した画面

このカスタマイズでは、既存の選択肢に「商品コード順」を追加しました。また、ページを開いたときにも商品コード順で表示するようにしています。

初期表示を変えるか、選択肢の追加にとどめるかは、サイトの使われ方に合わせて決めます。この画像は、すべてのEC-CUBEに商品コード順が標準搭載されていることを示すものではありません。

品番で検索することと、品番順に並べることは別の機能

品番検索は、入力したコードに合う商品を絞り込む機能です。品番順の並び替えは、表示対象となった商品の順序を整える機能です。

例えば「ABC-001」を指定して探す場面では検索が役立ちます。一方で、あるカテゴリーの中で「ABC」から始まるシリーズを見比べたい場合には、カテゴリーや検索で対象を絞り、品番順で並べる使い方が考えられます。

EC-CUBEの公式ソース（4.3.1-p1）では、フロントの商品検索に商品コードも含まれています。ただし、実際の検索対象や一致の仕方は、利用バージョンや導入済み機能を確認してください。

完全な品番だけでなく、一部だけ入力した場合、ハイフンの有無、英字の大文字・小文字なども試します。検索で見つかったことと、その品番の規格が購入画面で選択されていることも別です。検索結果から規格選択・注文まで、意図した商品を確認できるようにします。

英数字・先頭ゼロ・未入力を含めて、並び方を決める

商品コードには、数字だけのもの、英字やハイフンを含むもの、先頭にゼロが付くものがあります。文字列として比較するか、数字の部分を数値として比較するかによって、並び方が変わります。

上記はルールを決めるための例です。英字の大小、全角・半角、記号を含むコードの比較結果は、実装方法やデータベースの設定によっても変わります。実際に使っている品番を並べ、取引先が期待する順序と一致するかを確認します。

見た目の並び順を整えるためだけに、基幹システムや発注書で使っている商品コードを書き換えないようにします。必要に応じて、表示・連携に使うコードは維持し、並び替え専用の値を別に持たせる方法を検討します。

同じ並び替え値の商品がある場合は、商品IDなどを二つ目の条件として使い、同順位の結果が不定にならないようにします。未入力の商品を先頭に出すか、末尾へまとめるかも決めておきます。

規格ごとの商品コードから、何を並び替えの基準にするか

EC-CUBE 4系では、商品コードを商品規格のデータに持つため、色やサイズなどの規格ごとに異なるコードを設定できます。例えば一つの商品に、Sサイズの「ABC-001-S」とMサイズの「ABC-001-M」がある場合です。

商品一覧を商品単位で表示するなら、一つの商品をどのコードの位置に置くかを決める必要があります。

• 代表コードを決める：商品を代表する規格のコードなどを基準にする。
• 対象規格のコードから決める：決めた比較ルールで最小となるコードなどを使う。
• 商品共通の並び替え値を持つ：規格コードとは別に、商品単位の順序を管理する。

検索で特定の規格が一致した場合に、その規格のコードを基準にするか、通常の代表コードを使うかも確認します。販売対象外の規格や在庫切れの規格を基準に含めるかによって、表示される位置が変わる場合があります。

また、「品番順に並べること」と「規格ごとに別の行・カードとして表示すること」は別の変更です。SKUごとの一覧が必要なら、件数の数え方、規格の選択、カートへの追加方法も合わせて設計します。

初期表示・検索条件・ページ切り替えまでそろえる

実装方法は、利用中のEC-CUBEのバージョン、テンプレート、検索や並び替えを変更するプラグインに合わせて検討します。選択肢を画面へ追加するだけでなく、商品を取得する処理にも対応する順序を設定します。

一覧全体を並べてから、ページごとの商品を表示する

1ページに表示された商品だけをブラウザー上で並べ替えても、全商品を通した品番順にはなりません。検索条件に一致する商品全体を対象に順序を決め、その結果からページごとの商品を表示します。

例えば1ページ20件なら、21件目以降も同じルールで並ぶ必要があります。規格データを使う場合は、同じ商品が重複したり、件数やページ数がずれたりしないかも確認します。

最初に開いたときと、お客様が選び直したときを区別する

初期表示は品番順でも、お客様が価格順や新着順へ変更できるようにする方法があります。全カテゴリー共通にするか、一部のカテゴリーだけで使うかも決めます。

並び順を変更したときは、検索キーワードやカテゴリーの条件を維持しつつ、必要に応じて先頭ページへ戻します。次のページへの移動、表示件数の変更、商品詳細から戻る操作でも、選んだ条件がどう扱われるかを確認します。

取引先別の公開範囲や在庫切れ商品の非表示など、既存の表示条件も維持します。商品数・規格数が多いサイトでは、実データに近い件数で表示速度を確認し、保守時に追える形で変更内容を記録します。

公開前に確認したい操作と運用

1. コードの種類：数字のみ、英数字、桁数の違い、先頭ゼロ、記号を含む品番が想定どおりに並ぶか。
2. 規格の違い：規格なし・規格ありの商品が混在しても、決めた基準で表示できるか。
3. 検索との組み合わせ：完全な品番や一部の文字で検索した後も、対象商品と並び順が正しいか。
4. ページをまたぐ表示：次のページや表示件数を変更した場合に、同じ商品が重複したり抜けたりしないか。
5. 例外と公開範囲：コード未入力、同じコード、非公開商品、在庫切れ、会員限定商品を適切に扱えるか。
6. 操作と更新：スマートフォンで並び順を選べ、CSVや基幹連携で商品情報を更新した後も想定した順序になるか。

ページをまたぐ確認では、同じ商品データの状態で表示結果を照合します。運用中に商品が追加・削除された場合の動きも別途確認します。

導入後は、取引先が品番順を利用しているか、商品を探すときにどこで迷うかを確認します。並び順だけで解決しない場合は、品番の表示、カテゴリー、検索方法も合わせて見直します。

まとめ

EC-CUBEの商品一覧に商品コード順を追加すると、品番で商品を確認する取引先の使い方に合わせられます。検索で対象を絞ることと、一覧の順序を整えることを分けて設計します。

英数字や先頭ゼロを含む品番、規格ごとのコード、同順位や未入力の扱いを決め、初期表示からページ切り替えまで確認します。実際の品番と発注の流れをもとに、探しやすい商品一覧を整えることが大切です。

あわせて読みたい

• EC-CUBEのおすすめ商品を複数枠で管理｜特集・新着・カテゴリー別の設計ポイント
• EC-CUBEの子カテゴリー表示｜カテゴリーページに画像リンクを追加する設計ポイント
• EC-CUBEの商品情報に独自項目を追加｜CSV登録・出力と運用のポイント

参考情報

• EC-CUBE 4 管理・運用マニュアル：標準装備の基本ページ
• EC-CUBE公式ソース：ProductRepository（4.3.1-p1）
• EC-CUBE公式ソース：ProductClass（4.3.1-p1）

公式資料は2026年10月27日に確認しています。実装時は、ご利用のバージョンと既存のカスタマイズを確認してください。