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

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

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

2014年08月

タイトル通りを 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でも動いたので大丈夫なはずです。

終わり！
タグ ：
EC-CUBE
jQuery

結論から言うと再インストールすると直りました。


（・。・） < iPac Chomeはキャッシュが強い？ >

先日、javascriptやcssを変更したけど反映されないということが。

キャッシュかな？と思ってブラウザのキャッシュを消し消し。

いざ更新！　あれ変わらん・・・。

なぜ！

記述を間違えたかな？ってことでもう一回変更して更新してみたけどダメ。

で、javascriptやcssにタイムスタンプを加えてみたところ、ここでやっと変更部分が反映されました。

この件はまあそれほど気づくのに時間はかからなかった…。


（・。・） < iPac Chomeで取得したユーザーエージェントがおかしい >

普通に
<script>document.write(window.navigator.userAgent);</script>
で、取得しようとする。

一応取得はされるが、何か値がおかしい。

CriOSの記述が無いし、それにいつもの半分ぐらいの値しか取得出来ていませんでした。

メモしていなかったのでその時の値はもう無いのですが…。

とりあえず、これもchromeの再インストールで直りました！

未だにもやもや感がありますが、取り急ぎ解決したのでメモメモ。
タグ ：
Chrome

最近 float での横並びをあまり使用せずに、
inline-block を使って横並びを実装するのが私の中で話題に！

float では高さの違う横並びをする時は、親要素で囲ってあげないと行が増えた場合に上下が揃わなくなったりするので、今まで面倒でしたが、inline-block を使用することで快適に。

ただその際に要素と要素の間に空白が出来てしまいます。
html を工夫して消すことも出来ますが、可読性が著しく低下するので、
css をもっと工夫して消しましょう！

親要素 {
display: table;
letter-spacing: -1em;
width: 100%;
}
子要素 {
display: inline-block;
letter-spacing: 0;
vertical-align: top;
}


こんな感じで。

だがしかし！ 親要素に display: table; が使えない時には

親要素 {
letter-spacing: -0.285529em;
}
子要素 {
display: inline-block;
letter-spacing: 0;
vertical-align: top;
}

な感じでも対応できます！

-0.285529em; は割と細かく検証してみました。

このページのトップヘ