EC-CUBE 2系
EC-CUBE 2系の「もっと見る」を簡潔に
by TheVOS posted Jan 02, 2020
원문출처 | 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 4系 | 21 | 管理機能一覧 | 2020.11.12 | 30 |
EC-CUBE 4系 | 20 | フロント機能一覧 | 2020.11.12 | 33 |
EC-CUBE 2系 | 19 | EC-CUBE 2系でポート番号付で管理画面を動かす | 2020.01.02 | 63 |
EC-CUBE 2系 | 18 | EC-CUBE 2系で注文を受けた商品の規格を後で削除すると、管理画面で受注内容を編集できなくなる | 2020.01.02 | 135 |
EC-CUBE 2系 | 17 | EC-CUBE 2系でShift_JISに存在しない文字が含まれた受注データがあると、その受注内容が受注CSVからまるごと欠落する | 2020.01.02 | 89 |
EC-CUBE 2系 | 16 | EC-CUBE 2系で商品情報をCSVで更新するとき関連商品情報が削除される | 2020.01.02 | 104 |
EC-CUBE 2系 | 15 | EC-CUBE 2系で商品を沢山購入すると住所情報が欠落する | 2020.01.02 | 84 |
EC-CUBE 2系 | » | EC-CUBE 2系の「もっと見る」を簡潔に | 2020.01.02 | 624 |
EC-CUBE 2系 | 13 | EC-CUBEをインストールする | 2019.12.10 | 95 |
EC-CUBE 2系 | 12 | EC-CUBE2.13カスタマイズ:新しいページを追加する | 2019.11.11 | 636 |
EC-CUBE 3系 | 11 | 관리 화면의 사이드 메뉴에 항목 추가하는 방법 | 2019.11.11 | 165 |
EC-CUBE 2系 | 10 | イベントセット販売プラグインマニュアル | 2019.11.07 | 131 |
EC-CUBE 4系 | 9 | EC-CUBE4 계에서 관리 화면에 새 메뉴 항목을 추가하는 방법 | 2019.10.28 | 495 |
EC-CUBE 2系 | 8 | 2.13系 ソフトウェア要件 | 2019.10.11 | 56 |
EC-CUBE 2系 | 7 | ECCUBE 2.13のインストール方法をスクリーンショット付きでわかりやすく徹底解説! | 2019.10.10 | 131 |
EC-CUBE 운용 설명서 | 6 | EC-CUBE2.12 運用マニュアル | 2019.09.29 | 62 |
EC-CUBE 2系 | 5 | 単体テストガイドライン | 2019.09.28 | 86 |
EC-CUBE 2系 | 4 | リファクタリングガイドライン | 2019.09.28 | 153 |
EC-CUBE 2系 | 3 | EC-CUBE標準規約 | 2019.09.28 | 154 |
메일 서비스 | 2 | 메일 사용자 설명서 | 2019.03.29 | 63 |
Facebook [ko]댓글