
カラーミーショップのトップページに表示できる商品リストには、おすすめ商品・売れ筋商品・新着商品・イチオシ商品 の4種類(フリー・エコノミープランでは前2つのみ)が用意されていますが、特定のカテゴリやグループの商品を一覧表示させる独自タグはありません。
トップページ以外でも、たとえばフリーページに独自のカテゴリリストを表示させたいと思っても、そんな都合の良いタグは用意されていません。
カラーミーApiを使えば解決できる話ですが、じゃあそれをどこに置くのか問題(費用面)でうまく話が進まなかったりします。
先ほど全然違う調べ物をしていると、偶然これの解決策を発見したので感謝をこめて書いておきます。
ちなみに今記事とは別ですが、カラーミーApiをつかった商品リストの表示にはRenaca様の記事が非常にわかりやすいのでシェアしておきます。
「【カラーミーショップ】カテゴリーやグループの商品一覧をトップページとかフリーページで取得する方法」
カラーミーAPIなしで任意の商品リストを表示させる
簡潔明瞭に書いてくださっていたのは「花のや 」様のブログ。感謝の念に耐えません。
概要:目的ページの商品一覧を非同期で表示
概要が全てですので、あとはコードを書いておきましょう。例として期間限定グループの商品をトップページに表示させるとします。
呼び出したいグループページのHTMLが下のような感じだとします。
<!-- 期間限定グループのページ -->
<ul id="list">
<li class="list-item">・・・</li>
<li class="list-item">・・・</li>
・・・
</ul>
仮にトップページに呼び出すとして、該当のコードは下記となります。
<!-- トップページのテンプレート -->
<ul id="test"></ul>
<script>
$(function(){
const productNum = 12, // 表示させたい商品数
getURL = 'グループページのURL';
$.ajax({
url: getURL,
cache: false,
datatype: 'html'
})
.done( function(html){
const list = $(html).find('#list .list-item'); //グループの商品リストにある各商品を
for(i=0; i<productNum; i++){ // 指定した回数まわして
$('#test').append(list[i]); // #test に追加
}
})
.fail( function(){
$('#test').html('<li>Not Found</li>'); // URL間違ってる時とか商品がないとき
})
});
</script>
元のブログに従いjQuery( ajax )で書いていますが、fetchでもaxiosでも好きに使ってください。
この方法を使えば他にも応用できそうですね。
注意点:lazyloadを書いているときはひと手間いる
たとえばlazyloadの処理を「core web vital の改善」で紹介した下の書き方のように設定している場合、
<img src="ダミー画像URL" data-src="画像URL" class="lazyload" loading="lazy">
<script>
// ネイティブLazyLoadに対応しているときは、srcをdata-srcで置き換え
if ('loading' in HTMLImageElement.prototype) {
const images = document.querySelectorAll('img[loading="lazy"]');
images.forEach(img => {
img.src = img.dataset.src;
});
}
else {
・・・
}
</script>
この場合ajaxで表示したリストにはダミー画像が表示されてしまいます。
非対応ブラウザを切り捨ててネイティブlazyloadのみにするか、srcの書き換えを行うかして対応が必要です。
カラーミー カスタマイズのご依頼承ります。
このカスタマイズのご依頼は「制作パートナーサイト」から承っております。
応用した実例動画も掲載していますのでご覧ください。