Labo

[EC-CUBE 2.12.1] 商品一覧に定価と○○%OFFを表示したい

2012年07月22日 / 投稿者名:fukap


以前、2.11.2 版で同様の内容を投稿しました。
https://ec-cube.nakweb.com/blog/806.html

 

その中のコメントで、「スマートフォンでもっと見るボタンを押した時にうまくいかない」というコメントが
ありましたので、2.12.1での挙動を試しつつ、コメントにお答えしたいと思います。

 

PCに関して言えば 2.12.1 でも以前の記事と同じコードで実現できました。
ちょっとコードを変えましたので、おさらいがてら記します。

 

1.data/class/pages/products/LC_Page_Products_List.php の 134行目あたりに以下のコードを挿入

        // 商品一覧データに割引率を追加
        foreach($this->arrProducts as $key => $val){
            // 商品一覧データに割引率を追加
            if(isset($val['price01_max'])){
                $this->arrProducts[$key]['drate_max'] = round(100 - $val['price02_max'] / $val['price01_max'] * 100);
            }
            if(isset($val['price01_min'])){
                $this->arrProducts[$key]['drate_min'] = round(100 - $val['price02_min'] / $val['price01_min'] * 100);
            }
        }

2.data/Smarty/templates/default/products/list.tpl の価格表示部分の上あたりに以下のコードを挿入

<!--★通常価格★-->
<!--{if $arrProduct.price01_max > 0}-->
    <dl class="normal_price">
        <dt><!--{$smarty.const.NORMAL_PRICE_TITLE}-->(税込):</dt>
        <dd class="price">
        <span id="price01_default">
        <!--{if $arrProduct.price01_min == $arrProduct.price01_max}-->
            <!--{$arrProduct.price01_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
        <!--{else}-->
            <!--{$arrProduct.price01_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->~<!--{$arrProduct.price01_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
        <!--{/if}-->
        </span><span id="price01_dynamic"></span>
        円
        </dd>
    </dl>
<!--{/if}-->

3.data/Smarty/templates/default/products/list.tpl の価格表示部分の下あたりに以下のコードを挿入

<!--★割引率-->
<!--{if $arrProduct.drate_min != ''}-->
<div class="pricebox sale_price">
    割引率:
    <span class="price">
            <!--{if $arrProduct.drate_min == $arrProduct.drate_max}-->
                <!--{$arrProduct.drate_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->%OFF
            <!--{else}-->
                <!--{$arrProduct.drate_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->~<!--{$arrProduct.drate_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->%OFF
            <!--{/if}-->
    </span>
</div>
<!--{/if}-->

これでPCには割引率が表示されたのではないでしょうか。

 

次に今回はスマホもやってみます。
スマホも基本的には同じなんですが、「もっと見る」ボタンを押した場合は、
getProducts関数を使って、各要素に値を挿入している点を考慮しないといけません。

 

4.data/Smarty/templates/sphone/products/list.tpl の価格表示部の上あたりに以下のコードを挿入

<!--★通常価格★-->
<p>
    <span class="pricebox sale_price"><span class="mini">通常価格(税込):</span></span>
    <span class="normal_price">
        <span id="price01_default_<!--{$id}-->">
            <!--{if $arrProduct.price01_min_inctax == $arrProduct.price01_max_inctax}-->
                <!--{$arrProduct.price01_min_inctax|number_format}-->
            <!--{else}-->
                <!--{$arrProduct.price01_min_inctax|number_format}-->~<!--{$arrProduct.price01_max_inctax|number_format}-->
            <!--{/if}-->
        </span><span id="price01_dynamic_<!--{$id}-->">
        </span>円
    </span>
</p>

5.data/Smarty/templates/sphone/products/list.tpl の価格表示部の下あたりに以下のコードを挿入

<!--★割引率-->
<div class="pricebox sale_price">
    割引率:
    <span class="drate">
            <!--{if $arrProduct.drate_min == $arrProduct.drate_max}-->
                <!--{$arrProduct.drate_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->%OFF
            <!--{else}-->
                <!--{$arrProduct.drate_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->~<!--{$arrProduct.drate_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->%OFF
            <!--{/if}-->
    </span>
</div>

6.data/Smarty/templates/sphone/products/list.tpl の getProducts関数の一部を以下のように書き換え

//通常価格をセット
var normal_price = $($(".list_area span.normal_price").get(maxCnt));
//通常価格をクリア
normal_price.empty();
var normalPriceVal = "";
//通常価格が範囲か判定
if (product.price01_min == product.price01_max) {
    normalPriceVal = product.price01_min_tax_format + '円';
} else {
    normalPriceVal = product.price01_min_tax_format + '~' + product.price01_max_tax_format + '円';
}
normal_price.append(normalPriceVal);

//販売価格をセット
var price = $($(".list_area span.price").get(maxCnt));
//販売価格をクリア
price.empty();
var priceVale = "";
//販売価格が範囲か判定
if (product.price02_min == product.price02_max) {
    priceVale = product.price02_min_tax_format + '円';
} else {
    priceVale = product.price02_min_tax_format + '~' + product.price02_max_tax_format + '円';
}
price.append(priceVale);

//割引率をセット
var drate = $($(".list_area span.drate").get(maxCnt));
//割引率をクリア
drate.empty();
//割引率が範囲か判定
var drateVal = "";
if(product.drate_min == product.drate_max){
    drateVal = product.drate_min + '%OFF';
} else {
    drateVal = product.drate_min + '~' + product.drate_max + '%OFF';
}
drate.append(drateVal);

まぁ、通常価格が0円の時に非表示になるようにせぃや~だの、いろいろ突っ込みどころはあるかと思いますが、
疲れたのでこの辺で。

[EC-CUBE 2.12.1] 商品一覧に定価と○○%OFFを表示したい への1件のコメント

  1. 横田 より:

    上記の記載通りに(PCのみ)やってみて、商品一覧ページでは割引率が表示されるのですが商品詳細ページには割引率が表示されません。

    どうしたらよろしいのでしょうか?
    バージョンは2.12.1です。

    また、割引金額を表示するようなことはできるのでしょうか?

横田 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

* Copy This Password *

* Type Or Paste Password Here *

*

コメント欄にコードを挿入したい場合は、[php][/php] を使ってください。