商品一覧ページを第一階層ごとにデザインを変える【ECキューブ2.12】

公開日: : 最終更新日:2014/09/27 副業で稼ぐ仕組みの作り方

商品のカテゴリが数百とある場合、クライアントが欲しい商品を探すのに苦労してしまいます。

はじめに

商品カテゴリが100を超えた場合、クライアントが欲しい商品を探しにくくなるので離脱率が上がってしまいます。そこで、お勧めの分け方が第一カテゴリごとにデザインを変える方法です。

注意事項

ECキューブはバージョンやサーバーによって出来ない事があるので注意して下さい。

カテゴリの考え方

カテゴリが非常に多い場合、見る側の方からすると正直商品を探しにくいと感じさせてしまうケースもございます。

例えば家電を取り扱っている場合

  • 洗濯機
  • 冷蔵庫
  • 掃除機
  • テレビ

このカテゴリ内にさらに

  • 各メーカーごとに選ぶ
  • 色で選ぶ
  • 機能で選ぶ

など選び方のカテゴリを追加した場合全ての商品一覧ページに同じものを表示させるよりも冷蔵庫であれば冷蔵庫のカテゴリのみを表示させる方が購入に繋がりやすくなるかと思います。

そこで、今回カスタマイズした内容が第一カテゴリ(洗濯機や冷蔵庫など)ごとにレイアウトやデザインを変える方法です。

カスタマイズしよう

まずは、以下のファイルに追加で書き加えます。

data/class_extends/page_extends/products/LC_Page_Products_List_Ex.php


class LC_Page_Products_List_Ex extends LC_Page_Products_List {
    public function doDefault($objProduct) {
        parent::doDefault($objProduct);
        
        // 第一カテゴリを取得する
        $db = new SC_Helper_DB_Ex();
        $this->rootCategory = $db->sfGetFirstCat($this->arrForm['category_id']);
    }
}

商品一覧をカスタマイズしよう

私の場合は商品一覧ページのサイドメニューを第一カテゴリごとにデザインの変更や表示させる物を変更したのでこういった書き方になります。

<!--{if $rootCategory.id == 1}-->
 <!--{include file=`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/洗濯機.tpl}-->
<!--{elseif $rootCategory.id == 2}-->
 <!--{include file=`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/冷蔵庫.tpl}-->
<!--{elseif $rootCategory.id == 3}-->
 <!--{include file=`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/掃除機.tpl}-->
<!--{elseif $rootCategory.id == 4}-->
 <!--{include file=`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/テレビ.tpl}-->
<!--{else}-->
<!--{/if}-->
  • 洗濯機がカテゴリ1
  • 冷蔵庫がカテゴリ2
  • 掃除機がカテゴリ3
  • テレビがカテゴリ4

以上の条件の場合で洗濯機用のサイドメニューのtplファイルを取得している場合の書き方です。

さいごに

見やすくわかりやすく

商品の販売をする際に出来るだけわかりやすく、かつ見やすくする事で購入率や滞在時間を伸ばす事が出来るので、売上の向上に繋がります。

私の場合は取扱い商品が2,500商品ほどあり、カテゴリも300を超えています。

各商品ページからのアクセスはありますが、ついでにこれも購入すると言う状況になる事がすくなかったのですが、カテゴリをうまく整理し、見せ方を変えただけでついで購入が増えました。

やはり、見やすくわかりやすいと言うのは非常に大切な事なんだなと感じました。

副業でドロップシッピングをする場合は取扱い商品の多さで売上などが変わってくるので、このやり方は覚えていても損はないでしょう。

関連記事

contact form 7で自動返信メールのカスタマイズ

ワードプレスでのお問い合わせフォームcontact form 7を導入後に、必ずやっておきたい自動返

記事を読む

アメブロのRSS内にあるPRを削除してワードプレスに表示させる方法

アメブロのRSSに「PR」と言う広告が出てしまい何とか削除したい人へ はじめに ワードプレスにア

記事を読む

データベースのバックアップ用プラグインWP-DBManager(ワードプレス)

副業をするのに、ワードプレスを導入した方は必ずバックアップをとっておいてください。今回は自動でバック

記事を読む

Jetpackの購読

ブログの更新やコメントをした際にすぐに知らせてくれるのがこの購読機能です。 はじめに ワードプレ

記事を読む

no image

PS Auto Sitemapでサイトマップを自動生成(ワードプレス)

ブログやホームページを見に来られた人向けのサイトマップをワードプレスであれば自動生成してくれるプラグ

記事を読む

URLを入力するだけでfacebookのようなリンクを表示させる方法

リンクを入力するだけでアイキャッチや文章を表示させる方法をご紹介いたします。 はじめに 自分の過

記事を読む

EC CUBEでSSLページのみに表示させる方法

EC CUBEでSSLページにだけ違うデザインをしたい時に使えるコードです。 はじめに EC C

記事を読む

EC-CUBEでPHPを使う方法

EC-CUBEでもPHPが使えました!これで色々捗るね はじめに 私みたいなコピペでしか

記事を読む

bxsliderの画像を中央揃え出来る簡単な方法

bxsliderを導入したものの画像が左側に寄ってcssで戻せない・・・ はじめに レスポンシブ

記事を読む

no image

圧縮と解凍のインストール

知り合いに電話で「圧縮してからファイルを送って」と言った時に圧縮と言う言葉を知らない人が多いんだなと

記事を読む

Message

現在の総記事数: 310件

SEO対策はコンテンツだけで勝負してみた結果

SEO対策にもう被リンクは本当に必要がないのか実際にテストしてみました

Huluのここがクソ!色々改悪されすぎ

Huluを契約して2年経過しましたが、使いにくくなりすぎてもう解約しま

SBIの貸株を解除する方法

SBI証券で貸株をしている人で解除方法がわからない人に

Gooogleの著作権侵害による削除依頼をしてみた

ある日うちが取り扱いをしている商品が詐欺サイトに掲載されていたので早速

WordPressが書き換えられた時の対処方

アクセス先のサイトで「不正なソフトウェアを検出しました」と表示されると

→もっと見る

PAGE TOP ↑