詰んだかと思った。
やりたいこととカラーミーの制限
例えばトップページに商品一覧を設置するとき、「おすすめ商品」の一覧を設置できる。
「売れ筋商品」の一覧も設置できる。
逆に言えばこれらしか設置できない。
任意のカテゴリー、グループの商品群をリスト表示させる方法がない。
もし設置したければ、コードに直接書き込むことになる。
というのがカラーミーの作法。
そういうの嫌だよね、無理だよね、という状況でやっていく。
ajaxでやっていく
商品一覧ページの中身を覗いて、商品一覧コンテンツを引っこ抜いて任意の場所に貼り付ける方法でやっていける。
これしかない。
jsonとかで商品情報を引っ張れない（用意されていない）から、ページから直接抜くっていう力技になる。
ちなみにセキュリティ的なアレで、CORSが働いたりするので、ローカル環境や利用中でないテンプレート上のプレビューで動作させることはできない。
ぶっつけ本番になる。
取得したい商品群の用意
任意のグループ分けは、「カテゴリー」と「グループ」がある。
多分「グループ」の方が扱いやすい。
カテゴリーなりグループなりを作って、商品を登録して、そのURLを控えておく。
取得できるようにリスト部分の構成を確認しておく。
どちらも「商品一覧」ページが該当する。
今回はわかりやすく、こんな感じでやっていくとする。
<ul id="js-ajax_products">
<{section name=num loop=$productlist}>
<li>
<div class="name" id="js-ajax_products_name"><{$productlist[num].name}></div>
<div class="img" id="js-ajax_products_img"><{$productlist[num].img_url}></div>
<div class="url" id="js-ajax_products_url"><{$productlist[num].link_url}></div>
</li>
<{/section}>
</ul>商品群の取得と出力
こんな感じで出力するとする。
<ul id="js-ajax_products_append">
<li>
<a href="【url】">
<img src="【img】" alt="【name】">
<span>【name】</span>
</a>
</li>
</ul>こうなる。
$(function(){
const getURL = '【グループまたはカテゴリーページのurl】';
$.ajax({
url: getURL,
cache: false,
datatype: 'html'
})
.done( function(html){
const list = $(html).find('#js-ajax_products li');
const totalProducts = list.length;
let htmlBuffer = '';
for(i=0; i<totalProducts; i++){
const targetLi = list.eq(i);
//各種取得
const productName = targetLi.find('#js-ajax_products_name').html();
const productImg = targetLi.find('#js-ajax_products_img').html();
const productUrl = targetLi.find('#js-ajax_products_url').html();
//整形
htmlBuffer += `
<li>
<a href="${productUrl}">
<img src="${productImg}" alt="${productName}">
<span>${productName}</span>
</a>
</li>
`;
//挿入
$('#js-ajax_products_append').html(htmlBuffer);
}
})
.fail( function(){
$('#js-ajax_products_append').html('<li>Not Found</li>');
})
})上記は取得数を青天井にしてある。数量を制限したければforの回転数を指定すればいいので、totalProductsに任意の上限数を入れる。
jsだから表示に時差が生まれるので、そのへんは頑張ってください。
コメント