EC-CUBEで最初にやっておきたい10のカスタマイズ・7「パンくずリストを設置する」

読了時間:約 11分15秒

EC-CUBEで最初にやっておきたい10のカスタマイズ・7「パンくずリストを設置する」

引き続き、EC-CUBEを使ってECサイトを構築するときに、ぜひともやっておきたいカスタマイズをご紹介します。

今日は、「7.パンくずリストを設置する」です。

 

WEBサイトにパンくずリストを設置しておくと、今どこのページにいるのかひと目でわかるので、ユーザーが迷いにくくなります。

使いやすいサイトにするために、ぜひ設置しておきましょう。

もくじ

 

商品一覧・商品詳細ページのパンくずリスト

商品一覧・商品詳細ページのパンくずリストを表示するために、

data/class_extends/page_extends/products/LC_Page_Products_List_Ex.php

data/class_extends/page_extends/products/LC_Page_Products_Detail_Ex.php

をカスタマイズします。

 

【パンくずリストの例】

パンくずリスト

EC-CUBEのバージョンは、2.12.5で動作確認済みです。

(参考サイト:EC-CUBEでパンくずリストを設置してみる – log.SpecterAnt

 

ハイライト部分が、追加したソースです。

data/class_extends/page_extends/products/LC_Page_Products_List_Ex.php

[php highlight=”3,6-24″]
function process() {
parent::process();
$this->action();
}

function action() {
parent::action();
$objDb = new SC_Helper_DB_Ex();
if($this->arrForm[‘category_id’]) {
$arrCatId = $objDb->sfGetParents("dtb_category", "parent_category_id", "category_id", $this->arrForm[‘category_id’]);
$TopicPath = ‘<a href="../">トップページ</a>&nbsp;&gt;&nbsp;’;
foreach($arrCatId as $key => $val) {
$arrCatName = $objDb->sfGetCat($val);
if($val != $this->arrForm[‘category_id’]) {
$TopicPath .= ‘<a href="./list.php?category_id=’ .$val. ‘">’. $arrCatName[‘name’] . ‘</a>&nbsp;&gt;&nbsp;’;
}else {
$TopicPath .= $arrCatName[‘name’];
}
}
}else {
$TopicPath = ‘<a href="../">トップページ</a>&nbsp;&gt;&nbsp;’ . $this->arrForm[‘name’] . " の検索結果";
}
$this->TopicPath = $TopicPath;
}
[/php]

 

data/class_extends/page_extends/products/LC_Page_Products_Detail_Ex.php

[php highlight=”3,6-20″]
function process() {
parent::process();
$this->action();
}

function action() {
parent::action();
$objDb = new SC_Helper_DB_Ex();
$arrCategory_id = $objDb->sfGetCategoryId( $this->arrProduct[‘product_id’] );
$arrCatId = $objDb->sfGetParents( "dtb_category", "parent_category_id", "category_id", $arrCategory_id[0] );
$TopicPath = ‘<a href="../">トップページ</a>&nbsp;&gt;&nbsp;’;
foreach ( $arrCatId as $key => $val ) {
$arrCatName = $objDb->sfGetCat( $val );
$TopicPath .= ‘<a href="./list.php?category_id=’.$val.’">’.$arrCatName[‘name’].'</a>’;
if ( $val != $arrCategory_id[0] ) {
$TopicPath .= ‘&nbsp;&gt;&nbsp;’;
}
}
$this->TopicPath = $TopicPath.’&nbsp;&gt;&nbsp;’.$this->arrProduct[‘name’];
}
[/php]

 

そして、EC-CUBE管理画面の「デザイン管理>PC>ブロック設定」で新しいブロックを作り、

[html]
<div id="breadcrumb"><!–{$TopicPath}–></div>
[/html]

という内容で保存します。

 

「デザイン管理>PC>レイアウト設定」で、「商品一覧ページ」と「商品詳細ページ」の適切な場所に、先ほど作ったブロックを設置します。

 

【レイアウト設定】

レイアウト設定

 

デザインにもよりますが、メインの上あたりが良いと思います。

 

それ以外のページのパンくずリスト

EC-CUBE管理画面の「デザイン管理>PC>ブロック設定」で新しいブロックを作り、

[html]
<div id="breadcrumb"><a href="../">トップページ</a>&nbsp;&gt;&nbsp;<!–{$tpl_title|h}–></div>
[/html]

という内容で保存します。

 

そして、「デザイン管理>PC>レイアウト設定」で、先ほど作ったブロックを設置します。

 

【レイアウト設定】

レイアウト設定

 

なお、MYページ内の各ページについては、別のブロックを作って

[html]
<div id="breadcrumb"><a href="../">トップページ</a>&nbsp;&gt;&nbsp;<!–{$tpl_title|h}–>(<!–{$tpl_subtitle|h}–>)</div>
[/html]

という内容にすると、サブタイトルまで表示されるので、さらに分かりやすくなりますよ。

 

この記事が、EC-CUBEカスタマイズのお役に立てれば幸いです。

 

次回は「8.titleのカスタマイズと、OGPの設定をする」を解説します!

RSSフィードを購読する

ITポケットでは、ビジネスや生活が向上するTipsを発信しています。
よろしければRSSフィードをご購読ください。

シェアする

このエントリーをはてなブックマークに追加

関連記事

コメント

お仕事のご依頼について

コーポレートサイト、ECサイト、CMS、ブログなど、あらゆるWebサイトの制作をお手伝いいたします。

企画からデザイン、その後の運営や保守まで対応することが可能です。

自らECサイト運営を行っていることもあり、顧客目線でのサイトづくりが得意です。

得意なこと

HTML5 / CSS3 / JavaScript

WordPress

ECサイト(EC-CUBE / Zen Cart / カラーミーショップ)

各ブログのカスタマイズ

 

クライアントのご要望にお答えし、予算やケースにあった選択で、臨機応変に対応いたします。

ご相談・ご質問や、お見積もりのご依頼など、お気軽にお問い合わせください。

プロフィール

菊地翼

菊地翼(きくちつばさ)
WEBクリエイター。株式会社ウイングフォレスト代表取締役。マカー歴18年。IT・ガジェット・ライフハックと甘いものが大好き!

詳しくはこちら 

サイト内検索