Craft CMS

DATE 2019.09.04 | UPDATE 2019.09.04

製品紹介サイト、カタログサイトのサンプル

製品情報などを扱うようなコンテンツを想定してのサンプルです。

目次

  1. 掲載コンテンツイメージ
  2. 管理画面イメージ
  3. 実装内容

掲載コンテンツイメージ

掲載するコンテンツのイメージです。

トップページ

製品詳細ページ

カテゴリアーカイブ

カテゴリ内の製品をメーカーごとに分けて表示しています。

メーカーアーカイブ

メーカーの製品を一覧にしています。

管理画面イメージ

セクション

セクションは製品、メーカー、カテゴリ、の構成です

製品編集画面

製品情報を編集する画面

カテゴリ編集画面

カテゴリ情報を編集する画面

メーカー編集画面

メーカーの情報はメーカー名しか利用していませんが、メーカーロゴやメーカーのURLなど必要に応じて入力欄を増やせるでしょう。


実装内容

セクション

こちらも出版社サンプルのような形でセクションは
・製品(チャンネル)
・カテゴリ(ストラクチャ)
・メーカー(チャンネル)
としてあります。

カテゴリでメーカーを選べるようにしてあるのはカテゴリページでメーカーごとに製品を並べるときにそのメーカーの並び順を指定するために設定しています。

メーカーの並び順を考慮せずシステム任せで良い場合は製品のデータからカテゴリが該当するものからメーカー単位で取り出していけばよさそうです。

エントリ選択での分類

製品はエントリ選択フィールドで「カテゴリ」「メーカー」を選択するUIになります。

基本的に複数項目選択することは考えにくいですが、こちらで選択することでアーカイブページの作成が可能になります。

カテゴリのページ

カテゴリページに製品を一覧にするときに、メーカーごとに並べたいという要件を想定しています。

製品が持っているデータから表示制御することもできますが、メーカーの表示順制御の自由度が下がるため、カテゴリのエントリでメーカーを選択出来るようにしました。

カテゴリのエントリでメーカーのエントリを選択する

カテゴリはストラクチャのエントリであるため子エントリとしてメーカーを作ることも可能です。

しかしメーカーによっては複数カテゴリの製品をもつ場合に複数カテゴリに作る必要があるため今回はエントリ選択の方法にしました。

ストラクチャによるデータの並び替え

メーカーのエントリ自体はストラクチャのセクションで作られているため、並び替えが容易です。

並び順変更

並び順変更前

並び順変更後

入力欄のカスタマイズ例

製品情報などの入力欄は定型パターンでの情報が多くなりがちです。

1つ1つのフィールドを想定していますが、 SuperTable プラグインなどを利用することでコンパクトな見た目・データ管理にすることが可能です。

プラグインでの拡張になるのでメリット・デメリットはありますが、それらを考慮して採用しても良いでしょう。

管理画面上でカテゴリ、メーカーの製品一覧を見れるようにする

この製品の分類方法の欠点としては管理画面上でそのエントリ(メーカー、カテゴリ)に属している製品の情報を取ることができない点があります。

フィールドのハンドルで検索すれば可能ではあります。

ただそれだとわかりにくい、日常的に使いづらい等の場合もあると思います。

    プラグインを使うことで、エントリに関連付けられているエントリなどを見ることは出来るようになるので代用出来る可能性はあります。


    拡張・改善例

    • 製品でのメーカー、カテゴリ登録とカテゴリ内でのメーカーの登録の手間軽減
    • お問合せフォームを作ったときに製品からフォームへ遷移するときに製品情報を流用する

    コンテンツ

    PAGETOP