(佐賀→熊本)マークアップエンジニアのググる生活

地方のWEB制作会社で働く、フロントエンドエンジニア。
HTML、CSS、JavaScript(jQuery)、PHP、Smary、EC-CUBE、WordPress、Movable Type等々で解らない時に、Googleで検索したら解決した話や、「閃いた!」などをほとんど自分用にメモとして残すブログです。

※URLがあったら元記事を参照推奨です!
※ほとんどの事は検証はしていますが、あくまでも参考程度にお願い致します!
※記載が不正確であったことにより生じたいかなる損害に関しても、当ブログは責任を負いかねます。自己責任でよろしくおねがいいたします。

タグ:jQuery

メモメモ

if (typeof $.fn.プラグイン名 === 'function') {
  // ~プラグインが読み込まれていた場合の処理~
}

jQueryの
bxsliderプラグインの
slideMarginオプションを設定した場合には、

bx-viewportのcssのwidthを設定しないと
クローンを生成した時にカラム落ちが発生し、
ループしなくなる。


- プラグイン情報
bxslider v4.1.2(執筆時)

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

取り急ぎ先人様のやり方を調べてみたところ、
いろいろ触らないといけないファイルが多かった&上手くいかなかったので、
jQueryを使って実装してみました。


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

list.tpl 変更前
<!--★価格★-->
<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 変更後
<!--★価格★-->
<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 変更前
<!--★販売価格★-->
<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 変更後
<!--★販売価格★-->
<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
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でも動いたので大丈夫なはずです。

終わり!

導入 http://h2ham.seesaa.net/article/123196931.html 別窓
参考 http://linker.in/journal/2011/04/mt-8.php 別窓

■チェックボックスの場合。

○選択
jQuery(function($) {
    $('div#show_fields-field').each(function(){
        $(this).find(':checkbox').attr('checked', 'checked');
    });
});

○解除
jQuery(function($) {
    $('div#show_fields-field').each(function(){
        $(this).find(':checkbox').attr("checked",false);
    });
});

上記両ブログ様ありがとうございます。感謝です。
jQueryなのでMTでは無くても、いろいろ活用できそうです!

このページのトップヘ