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 3.x | 39 | 新規作成したページURLから「user_data」を消す方法とURLを出力するテンプレートタグ | 2019.04.10 | 866 |
EC-CUBE 2.x | 38 | EC CUBEで商品ごとに支払い方法を簡単に分ける | 2019.10.28 | 665 |
EC-CUBE 2系 | 37 | EC-CUBE2.13カスタマイズ:新しいページを追加する | 2019.11.11 | 636 |
EC-CUBE 2系 | » | EC-CUBE 2系の「もっと見る」を簡潔に | 2020.01.02 | 624 |
EC-CUBE 4系 | 35 | EC-CUBE4 계에서 관리 화면에 새 메뉴 항목을 추가하는 방법 | 2019.10.28 | 495 |
EC-CUBE 2.x | 34 | EC-CUBE에서 모든 페이지에서 로그인 체크하기 | 2019.11.11 | 449 |
팁 & 노하우 나눔 | 33 | 구글 캘린더 합치기 1 | 2018.12.12 | 427 |
EC-CUBE 4.x | 32 | EC-CUBE 4를 설치했을 때 설정 한 데이터베이스 암호는 어디에 저장되는 것입니까? | 2019.11.14 | 388 |
EC-CUBE 2.x | 31 | 商品数や階層に関係なく全カテゴリーを表示させる方法 | 2019.04.10 | 260 |
EC-CUBE 3.x | 30 | デフォルトのtitleを任意のものに変更する方法 | 2019.04.10 | 228 |
EC-CUBE 3系 | 29 | 관리 화면의 사이드 메뉴에 항목 추가하는 방법 | 2019.11.11 | 165 |
EC-CUBE 2系 | 28 | EC-CUBE標準規約 | 2019.09.28 | 154 |
EC-CUBE 2系 | 27 | リファクタリングガイドライン | 2019.09.28 | 153 |
EC-CUBE 2系 | 26 | EC-CUBE 2系で注文を受けた商品の規格を後で削除すると、管理画面で受注内容を編集できなくなる | 2020.01.02 | 135 |
EC-CUBE 2系 | 25 | イベントセット販売プラグインマニュアル | 2019.11.07 | 131 |
EC-CUBE 2系 | 24 | ECCUBE 2.13のインストール方法をスクリーンショット付きでわかりやすく徹底解説! | 2019.10.10 | 131 |
EC-CUBE 2.x | 23 | EC-CUBE:SC_FormParamクラスによるパラメーターチェック方法 | 2019.10.03 | 119 |
메뉴얼 | 22 | THEVOS Youtube BOARD SKIN 사용 설명 | 2018.11.11 | 116 |
CSS | 21 | Css 텍스트 외곽선 처리하기, Stroke | 2019.11.28 | 111 |
EC-CUBE 2系 | 20 | EC-CUBE 2系で商品情報をCSVで更新するとき関連商品情報が削除される | 2020.01.02 | 104 |
Facebook [ko]댓글