(EC CUBE2.11.4) パンくずリストの作り方

EC CUBE2.11.4には商品リストと商品詳細のページで

デフォルトでパンくずリストが表示されません。

パンくずリストとは

「ホーム　＞　カテゴリ一覧　＞　商品」

上記のものがページの左上に一般的にあるものです。

SEOでも大切なものなのでカスタマイズして表示させてみました。

商品リストでのパンくずリスト

商品リストでのパンくずリストを作ります。

LC_Page_Products_Detail.phpを編集

data/class/pages/products/LC_Page_Products_List.php

function action() {
    $objQuery   =& SC_Query_Ex::getSingletonInstance();
    $objProduct = new SC_Product_Ex();

・・・中略・・・

    // 商品一覧パンくずリストを取得
    $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']);
        $breadcrumb = '<li><a href="/index.php">ホーム</a>&gt;</li>';
        foreach($arrCatId as $key => $val){
            $arrCatName = $objDb->sfGetCat($val);
            if($val != $this->arrForm['category_id']){
                $breadcrumb .= '<li><a href="./list.php?category_id=' .$val. '">'. $arrCatName['name'] . '</a>&gt;</li>';
            }else{
                $breadcrumb .= $arrCatName['name'];
            }
        }
    }else{
        $breadcrumb = '<li><a href="/index.php">ホーム</a>&gt;</li>' . $this->arrForm['name'] . " の検索結果";
    }
    $this->Breadcrumb = $breadcrumb;
}

検索結果でもパンくずが出るように

カテゴリーidがない場合で分岐させています。

テンプレートの編集

次にテンプレートの編集です。

/data/Smarty/templates/default/products/list.tpl

<!--▼CONTENTS-->
<ul id="breadcrumb">
    <!--{$Breadcrumb}-->
</ul>
・・・中略・・・

「▼CONTENTS」のすぐ下にパンくずリストが出るようにしています。

パンくずリストの見た目の調整

最後にパンくずリストの見た目の調整です。

商品一覧ページに使っているどれかのCSSに以下を書きます。

#breadcrumb li {
    display: inline;
}

以上で商品一覧ページのパンくずリストができました。

商品詳細でのパンくずリスト

商品詳細でのパンくずリストを作ります。

LC_Page_Products_Detail.phpを編集

data/class/pages/products/LC_Page_Products_Detail.php

function action() {
    $objQuery   =& SC_Query_Ex::getSingletonInstance();
    $objProduct = new SC_Product_Ex();

・・・中略・・・

    // 商品一覧パンくずリストを取得
    $objDb = new SC_Helper_DB_Ex();
    $arrCatId = $objDb->sfGetParents("dtb_category", "parent_category_id", "category_id", $this->arrForm['category_id']);
    $breadcrumb = '<li><a href="/index.php">ホーム</a>&gt;</li>';
    foreach($arrCatId as $key => $val){
        $arrCatName = $objDb->sfGetCat($val);
        if($val != $this->arrForm['category_id']){
            $breadcrumb .= '<li><a href="./list.php?category_id=' .$val. '">'. $arrCatName['name'] . '</a>&gt;</li>';
        }else{
            $breadcrumb .= $arrCatName['name'];
        }
    }
    $this->Breadcrumb = $breadcrumb;
}

商品リストと違って検索結果はないので

そのままパンくずリストとして変数に入れていきます。

テンプレートの編集

次にテンプレートの編集です。

/data/Smarty/templates/default/products/detail.tpl

<!--▼CONTENTS-->
<ul id="breadcrumb">
    <!--{$TopicPath}-->
    <li><!--{$arrProduct.name|h}--></li>
</ul>

・・・中略・・・

「▼CONTENTS」のすぐ下にパンくずリストが出るようにしています。

商品リストと違って、商品名がパンくずリストの最後に来るようにします。

パンくずリストの見た目の調整

最後にパンくずリストの見た目の調整です。

商品詳細ページに使っているどれかのCSSに以下を書きます。

#breadcrumb li {
    display: inline;
}

これは、商品リストと同じ内容なので

商品リストとまとめてもいいと思います。