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

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

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

カテゴリ: jquery

サイドバーを追従(固定)させるjqueryプラグイン「fitSidebar」を使用しています。
最近では css の position: sticky; だけで固定にすることができますが、 縦長の場合は見切れてしまい、下の方にあるコンテンツがいちばん最後までスクロールしないと見れない問題があり、ちょっと気になります。
fitSidebar だとスクロールに合わせてコンテンツも移動するので大変便利です。
それぞれ用途に合わせて使い分けています。

そこで fitSidebar を使っていて、更にヘッダーも固定の場合、 ページの下に行って、上に戻るときに、サイドバーの頭が見切れてしまう問題にぶつかりましたので、 余白を設けるカスタマイズを行ってみました。

サンプル(jquery-plugin-fitSidebar-headerfixed-top-margin.html)

メモメモ

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

ボクは boxer という jQuery プラグインが好きで、よく利用させてもらってます。

便利でクールですが、

閉じる動作が PC だとESCキーか、×ボタンしかありません!
タッチデバイスだとそれこそ×ボタンのみ…。

追記(2015/11/27)
オプションで mobile: true を付けると、
画像外クリックで閉じるが効かないだけ…ということでした…!

なので、 mobile: true を付与した用に追記致しました。

それだけだとちょっと面倒な感じがするので、
画像とテキストと他のボタン以外をクリック or タップした時に閉じるように追加してみました。

ミニファイ化されていないプラグインjsを編集します。

下記の関数を追加します。
どこでもいいと思いますが、
ボクは @name onKeypress のあとに追加しました。

  /**
   * @method private
   * @name onClickbody
   * @description #boxer or .boxer-container or .boxer-content Click for .boxer-close click trigger
   * @param e [object] "Event data"
   */
  function onClickbody(e) {
    var boxer_class = $('#boxer').attr('class');
    var target = $(e.target);
    var target_id = target.attr('id');
    var target_class = target.attr('class');
    if ( 
        boxer_class === 'mobile' &&
        (
             target_id === 'boxer'
          || target_class === 'boxer-container'
          || target_class === 'boxer-content'
        )
       ) {
      data.$boxer.find(".boxer-close").trigger("click");
    }
  }


そのあとに上記関数を動作させるために、
下記のイベントハンドルを追加します。
data.$body.on("touchstart.boxer click.boxer", "#boxer-overlay, #boxer .boxer-close", onClose)
の下あたりがいいかなーとは思います。

      data.$body.on("touchstart.boxer click.boxer", onClickbody);


これで完了です!

ミニファイ化はGoogleお手製のsimpleモードなら大丈夫でした。
プラグインのライセンスコメントをお忘れなく!

http://closure-compiler.appspot.com/home

※バージョン 1 ですm(_ _)m

簡単なオプション指定で、
カルーセルにもスライダーにもなれる
高機能で使いやすい Owl Carousel ですが、
Owl を指定した子要素のすべてに発火するようになっているので、
少し変えてみました。

noscript に反応してほしくなかっただけですが、
普段使う要素だけに絞った方が良い気がしたので、
下記の様に変更しました。

$elem.children()

↓↓↓↓↓

$elem.children('a, p, li, img, div')

エディタの置き換えで一発OKでした。


ミニファイに変換は恐らく下記のGoogleお手製を使用されてるみたいで、
(変換後のコードが似ていたので多分そうかなと…)
こちらもsimpleモードなら大丈夫でした。ライセンスコメントをお忘れなく!

http://closure-compiler.appspot.com/home

バージョンは、2.12.2で見ています。
2.11、2.13も多分同じだと思います。
(追記:2.13.4 でもそのままでいけました。)

追従とマウスホバーをひとつずつご紹介。




テーブルヘッダーを追従させる。

管理画面でよくみるテーブルのヘッダーを、
追従させてみました。






管理画面のテンプレート /data/Smarty/templates/admin/main_frame.tpl の admin_file_manager.css というCSSの下に下記スタイルを追記

<style type="text/css">
#navi li ul {
z-index: 1;
} table.list.js_add_is_active { position: relative; } table.list.js_add_is_active .list_fixed { opacity: 0; position: fixed; top: 0; } table.list.js_add_is_active .list_fixed.js_add_is_active { opacity: 1; } </style>

同ファイルの file_manager.js というJSの下に下記スクリプトを追記

<script type="text/javascript">
jQuery(function($) {

/* ---------------------------------------
 スクロール追従
--------------------------------------- */
var $list = $('table.list');
$(window).bind('load.list', function() {
    $list.addClass('js_add_is_active').each(function() {
        // scroll 内でも自身を使いたいので便利に格納
        var $this = $(this);

        // ターゲットを設定
        var $list_head       = $this.find('tr:first');
        var $list_head_label = $list_head.children('th');

        // 横幅計算
        $list_head_label.each(function() {
            var width = $(this).width();
            $(this).css({
                'width': width,
            });
        });

        // 位置取得
        var offset = $list_head.offset();
        var left   = offset.left;

        // 複製
        var $list_head_html = $list_head.html();
        $this.append('<tr class="list_fixed">' + $list_head_html + '</tr>');

        // 複製した fixed 取得
        var $fixed = $this.find('tr.list_fixed');

        // fixed に位置情報を付与
        var fixed_left = left - 1; // -1 は border分
        $fixed.css({
            'left': fixed_left + 'px',
        });

        // スクロール追従
        $(window).bind('scroll.list', function() {
            var thisTop = $this.offset().top;
            var scrollTop = $(window).scrollTop();
            if ( scrollTop > thisTop ) {
              $fixed.addClass('js_add_is_active');
            } else {
              $fixed.removeClass('js_add_is_active');
            }
        });
    });
});

});
</script>





テーブルの行にマウスホバーすると、現在の行をハイライトにする。

管理画面のテンプレート /data/Smarty/templates/admin/main_frame.tpl(さっきと一緒) の admin_file_manager.css というCSSの下(さっきと一緒)に下記スタイルを追記

<style type="text/css">
    table.list tr:not([class]):hover th,
    table.list tr:not([class]):hover td {
        background: rgba(0, 0, 0, .1) !important;
    }
</style>

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でも動いたので大丈夫なはずです。

終わり!

ECCUBEの最新バージョン(2.13.2)でもjQueryのバージョンは1.4系です。

フォーラムでいろいろ言われてましたが、システム要件が~とのこと・・・。
http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=13180&forum=6

でもなるべく最新版を使いたいと思いますよね。
そこでjQuery1.9を導入して試してみました。


その際商品一覧のカートボタンが実行されなくなりました。

そして以下を編集することにより解決しました!

/data/Smarty/templates/default/products/list.tpl
だいたい144行目
<form name="product_form<!--{$id|h}-->" action="?" onsubmit="return false;">
onsubmit="return false;"
を削除することで正常動作が出来ました。

導入 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では無くても、いろいろ活用できそうです!

このページのトップヘ