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>
-
Q:
[메뉴얼] THEVOS Youtube BOARD SKIN 사용 설명
2018.11.11
A:
[ 스킨 기능 ]
- 사용자 정의 자동추가
게시판 스킨을 "INSP 유튜브"으로 변경하고 사용자정의 eid(dex_embed_srl)가 없을겨우 자동으로 추가됨
- 기존게시판에서도 사용가능
ㄴ 게시판에 필요한 사용자 정의는 "thevos_extv_youtube_code" 이다.
ㄴ 하지만 skin설정에서 동영상설정 -> 영상주소eid 에서 해당 값을 바꿀수 있다.
ㄴ 기존 게시판에 사용자 정의가 있을경우에는 제일 마지막에 사용자 정의가 추가된다.
- 동영상 출력
글쓰기페이지에서 동영상입력박스에다가 유튜브의 주소 https://youtu.be/vOyAbCT3GBw 또는 vOyAbCT3GBw 이라고 입력할경우 게시판 뷰페이지 상단에 동영상이 뜨게됨
- 동영상 사이즈
별도로 지정하지 않으며 컨텐츠의 가로 폭만큼 유동적으로 늘어남 반응형 대음
- 리스트 썸네일 유튜브 썸네일로 출력
ㄴ 리스트 썸네일은 유튜브 썸네일로 출력한다.
ㄴ 단! 사용자가 첨부파일에 이미지를 업로드하고 대표이미지로 설정할경우.. 해당 이미지가 리스트에 출력하게된다
첨부파일에 이미지를 업로드하고 대표이미지를 설정하지 않을경우에는 그냥 유튜브 썸네일이 출력된다.
- 반응형
ㄴ PC, 태블릿, 모바일 등 모든 기기에 대응
Facebook [ko]댓글
Facebook [ko]댓글