ググらずには前へ進めないフロントエンドエンジニアが書く、次はググらなくてもできますように…とメモを残すブログです!

EC-CUBE 2.13.2 販売価格(税抜)を表示したときに規格があると上手くいかない場合

2014/08/26
⚠️投稿日または最終更新日から8年以上経過している内容です。

タイトル通りを EC-CUBEバージョン 2.13.2 にて実装。

取り急ぎ先人様のやり方を調べてみたところ、

いろいろ触らないといけないファイルが多かった&上手くいかなかったので、

jQueryを使って実装してみました。

まずは普通に list.tpl と detail.tpl に税別を表示させます。

list.tpl 変更前

html
<!--★価格★-->
<div class="pricebox sale_price">
    <!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):
    <span class="price">
        <span id="price02_default_<!--{$id}-->"><!--{strip}-->
            <!--{if $arrProduct.price02_min_inctax == $arrProduct.price02_max_inctax}-->
                <!--{$arrProduct.price02_min_inctax|number_format}-->
            <!--{else}-->
                <!--{$arrProduct.price02_min_inctax|number_format}--><!--{$arrProduct.price02_max_inctax|number_format}-->
            <!--{/if}-->
        </span><span id="price02_dynamic_<!--{$id}-->"></span><!--{/strip}-->
</span>
</div>

list.tpl 変更後

html
<!--★価格★-->
<div class="pricebox sale_price sale_price_inctax">
    <!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):
    <span class="price">
        <span id="price02_default_<!--{$id}-->"><!--{strip}-->
            <!--{if $arrProduct.price02_min_inctax == $arrProduct.price02_max_inctax}-->
                <!--{$arrProduct.price02_min_inctax|number_format}-->
            <!--{else}-->
                <!--{$arrProduct.price02_min_inctax|number_format}--><!--{$arrProduct.price02_max_inctax|number_format}-->
            <!--{/if}-->
        </span><span id="price02_dynamic_<!--{$id}-->"></span><!--{/strip}-->
    </span>
</div>
<div class="pricebox sale_price sale_price_noinctax">
    <!--{$smarty.const.SALE_PRICE_TITLE}-->(税抜):
    <span class="price">
        <span id="price02no_default_<!--{$id}-->"><!--{strip}-->
            <!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
                <!--{$arrProduct.price02_min|number_format}-->
            <!--{else}-->
                <!--{$arrProduct.price02_min|number_format}--><!--{$arrProduct.price02_max|number_format}-->
            <!--{/if}-->
        </span><span id="price02no_dynamic_<!--{$id}-->"></span><!--{/strip}-->
    </span>
</div>

detail.tpl 変更前

html
<!--★販売価格★-->
<dl class="sale_price">
    <dt><!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):</dt>
    <dd class="price">
        <span id="price02_default"><!--{strip}-->
            <!--{if $arrProduct.price02_min_inctax == $arrProduct.price02_max_inctax}-->
                <!--{$arrProduct.price02_min_inctax|number_format}-->
            <!--{else}-->
                <!--{$arrProduct.price02_min_inctax|number_format}--><!--{$arrProduct.price02_max_inctax|number_format}-->
            <!--{/if}-->
        <!--{/strip}--></span><span id="price02_dynamic"></span>
    </dd>
</dl>

detail.tpl 変更後

html
<!--★販売価格★-->
<dl class="sale_price sale_price_inctax">
    <dt><!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):</dt>
    <dd class="price">
        <span id="price02_default"><!--{strip}-->
            <!--{if $arrProduct.price02_min_inctax == $arrProduct.price02_max_inctax}-->
                <!--{$arrProduct.price02_min_inctax|number_format}-->
            <!--{else}-->
                <!--{$arrProduct.price02_min_inctax|number_format}--><!--{$arrProduct.price02_max_inctax|number_format}-->
            <!--{/if}-->
        <!--{/strip}--></span><span id="price02_dynamic"></span>
    </dd>
</dl>
<dl class="sale_price sale_price_noinctax">
    <dt><!--{$smarty.const.SALE_PRICE_TITLE}-->(税抜):</dt>
    <dd class="price">
        <span id="price02no_default"><!--{strip}-->
            <!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
                <!--{$arrProduct.price02_min|number_format}-->
            <!--{else}-->
                <!--{$arrProduct.price02_min|number_format}--><!--{$arrProduct.price02_max|number_format}-->
            <!--{/if}-->
        <!--{/strip}--></span><span id="price02no_dynamic"></span>
    </dd>
</dl>

そして税抜き計算jQuery

javascript
jQuery(function($) {
    $('div#undercolumn form[name^="product_form"], body.LC_Page_Products_Detail #form1').change(function() {
        var inctax = $(this).find('span[id^="price02_dynamic"]');
        var noinctax_f = $(this).find('span[id^="price02no_default"]');
        var noinctax_y = $(this).find('span[id^="price02no_dynamic"]');

        if ( inctax.is(":visible") ) {
            //console.log('計算したよー');
            var inctax_text = inctax.text();
            var inctax_value = inctax_text.replace(',','');
            var noinctax_value = Math.floor(inctax_value / 1.08);
            var noinctax_value = String( noinctax_value ).replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, '$1,'); // <http://so-zou.jp/web-app/tech/programming/javascript/grammar/data-type/string/comma-formatting.htm>
            noinctax_f.hide();
            noinctax_y.show().text(noinctax_value);
        } else {
            //console.log('計算やめたー');
            noinctax_f.show();
            noinctax_y.hide();
        }
    });
});

Math.floor(inctax_value / 1.08);

らへんが税率計算!消費税10%になったら1.10に。

とりあえず切り捨て(Math.floor)にしてるので変更したいのであればお好きにどうぞ!

3桁ずつ小数点は so-zou.jp 様より!

稚拙ではありますが、ieTesterでも動いたので大丈夫なはずです。

終わり!