EC-CUBE 2系の「もっと見る」を簡潔に
원문출처 | http://www.neobit.jp/archives/462 |
---|
今更ながら、EC-CUBE 2系のスマホ版のデザイン変更で苦労しました。
EC-CUBEに組み込まれている「もっと見る」ボタンですが、Ajaxで次ページのjsonデータを取得してきて画像、商品名、価格等のspanやimgタグの中身を1個ずつコピーしている。。。(3系でも同じなのかな??)
これでは、つぶしが気かないったらありゃしないので、デザイン変更しても動作するJavaScriptに書き換えてみました。jsonではなく2ページ目のHTMLをそのままGETしてきて商品一覧部分のタグをそのまま現在の一覧の下に差し込むだけ。
・総HIT数が<span id=”productscount”>XXX</span>に書かれていること。
・もっと見るボタンにid=”btn_more_product”が付いていること。
・商品リストの個別商品が class=”list_area” に入っていて、各商品ブロックが<form>で囲まれていること。
(<form>で囲まれていないなら、2ヶ所の .closest(‘form’) は不要)
の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){ $('.list_area:last').closest('form').after($(result).find('.list_area').closest('form').clone(true)); pageNo++; //すべての商品を表示したか判定 if (parseInt($("#productscount").text()) <= $(".list_area").length) { $("#btn_more_product").hide(); } $.mobile.hidePageLoadingMsg(); } }); } </script>
-
管理機能一覧
-
フロント機能一覧
-
EC-CUBE 2系でポート番号付で管理画面を動かす
-
EC-CUBE 2系で注文を受けた商品の規格を後で削除すると、管理画面で受注内容を編集できなくなる
-
EC-CUBE 2系でShift_JISに存在しない文字が含まれた受注データがあると、その受注内容が受注CSVからまるごと欠落する
-
EC-CUBE 2系で商品情報をCSVで更新するとき関連商品情報が削除される
-
EC-CUBE 2系で商品を沢山購入すると住所情報が欠落する
-
EC-CUBE 2系の「もっと見る」を簡潔に
-
EC-CUBEをインストールする
-
EC-CUBE2.13カスタマイズ:新しいページを追加する
-
관리 화면의 사이드 메뉴에 항목 추가하는 방법
-
イベントセット販売プラグインマニュアル
-
EC-CUBE4 계에서 관리 화면에 새 메뉴 항목을 추가하는 방법
-
2.13系 ソフトウェア要件
-
ECCUBE 2.13のインストール方法をスクリーンショット付きでわかりやすく徹底解説!
-
EC-CUBE2.12 運用マニュアル
-
単体テストガイドライン
-
リファクタリングガイドライン
-
EC-CUBE標準規約
-
메일 사용자 설명서
Facebook [ko]댓글