EC-CUBE 2系の「もっと見る」を簡潔に

By | 2016/02/10

今更ながら、EC-CUBE 2系のスマホ版のデザイン変更で苦労しました。

EC-CUBEに組み込まれている「もっと見る」ボタンですが、Ajaxで次ページのjsonデータを取得してきて画像、商品名、価格等のspanやimgタグの中身を1個ずつコピーしている。。。(3系でも同じなのかな??)

これでは、つぶしが気かないったらありゃしないので、デザイン変更しても動作するJavaScriptに書き換えてみました。

・総HIT数が<span id=”productscount”>XXX</span>に書かれていること。
・商品リスト全体が<ul class=”list”>に入っていて、各商品ブロックが<li>で囲まれていること。
・もっと見るボタンにid=”btn_more_product”が付いていること。

の3点だけ守られていれば、デザイン変更しても大丈夫です。

<script>
    var pageNo = 2;
    var url = "<!--{$smarty.const.P_DETAIL_URLPATH}-->";
    var imagePath = "<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/";
    var statusImagePath = "<!--{$TPL_URLPATH}-->";
	
    function getProducts(limit) {
        $.mobile.showPageLoadingMsg();
        var i = limit;
        //送信データを準備
        var postData = {};
        $('#form1').find(':input').each(function(){
            postData[$(this).attr('name')] = $(this).val();
        });
        postData["mode"] = "html";
        postData["pageno"] = pageNo;

        // デザイン変更に左右されない「もっと見る」処理に書き換えました。
        $.ajax({
            type: "POST",
            data: postData,
            url: "<!--{$smarty.const.ROOT_URLPATH}-->products/list.php",
            cache: false,
            dataType: "html",
            error: function(XMLHttpRequest, textStatus, errorThrown){
                alert(textStatus);
                $.mobile.hidePageLoadingMsg();
            },
            success: function(result){
                $('ul.list').append($(result).find('ul.list').clone(true).html());
                pageNo++;

                //すべての商品を表示したか判定
                if (parseInt($("#productscount").text()) <= $("ul.list li").length) {
                    $("#btn_more_product").hide();
                }
                $.mobile.hidePageLoadingMsg();
            }
        });
    }
</script>

コメントを残す

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

* Copy This Password *

* Type Or Paste Password Here *