EC-CUBEの小技:商品詳細ページに商品規格一覧を表示

2012年4月20日 11:49
ECCUBEでは、規格登録商品というものがあります。
例えば、Tシャツを売るのであれば、色、サイズなどが必要になりますが、それぞれを1商品として登録するのでは、無駄が多いという事で、1商品の中にプルダウンして選択させる機能を持たせた商品という事です。

Tシャツならば、サイズがや色が変わっても価格が一緒な場合はありますが、他の商品では、そうもいきません。
さらに、セット商品等も同じ商品内に置き、比較させてより多くの商品を販売するという手もあります。

しかし、その商品価格の表示がないというのが、ECCUBEです。
価格は、選択して初めて表示が切り替わるというもので、不親切極まりないです。

ということで、その表示方法を御紹介。
この記事は最終更新日から1年以上が経過しています。

3ファイルのコードを書き換え

参考記述:[EC-CUBE 2.11.2] 商品詳細ページに商品規格一覧を表示する | NAKWEB × EC-CUBE

data/class/pages/products/LC_Page_Products_Detail.php
113行目付近、action() 内に以下を追加

// 商品規格情報の取得
$this->arrProductsClassList = $this->lfGetProductsClass($product_id);

data/Smarty/templates/default/products/detail.tpl
75行目付近、div id=”detailphotobloc”内、span下に以下を追加

<!--{* 規格テーブル *}-->
<!--{if $arrProductsClassList|@count > 1}-->
<table>
    <tr>
        <th>規格名</th>
        <th>価格</th>
    </tr>
    <!--{section name=i loop=$arrProductsClassList}-->
    <tr>
        <td><!--{$arrProductsClassList[i].classcategory_name1|h}-->
            <!--{if $arrProductsClassList[i].classcategory_name2 != ''}-->
                : <!--{$arrProductsClassList[i].classcategory_name2|h}-->
            <!--{/if}-->
        </td>
        <td>
            <!--{$arrProductsClassList[i].price02|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->円
        </td>
    </tr>
    <!--{/section}-->
</table>
<!--{/if}-->

html/user_data/packages/default/css.table.css
30行目付近に以下を追加

/* 規格テーブル
----------------------------------------------- */
#detailphotobloc table {
    margin: 15px 0;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    width: 90%;
    border-collapse: collapse;
    text-align: left;
}
#detailphotobloc table th {
    padding: 5px 8px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: #333;
    background-color: #f0f0f0;
    font-weight: normal;
}
#detailphotobloc table td {
    padding: 5px 8px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

以上です。
最後のCSSは、おまけみたいなものです。
あんまり縦に場所をとると、見辛くなってしまうので、多少いじってみました。

いいものなので、ECCUBEには標準装備して欲しいものです。

ブログ運営

株式会社ちょもらんま

https://qomolangma.jp