トップページに任意の商品一覧を表示する

カラーミーショップのトップページに表示できる商品リストには、おすすめ商品・売れ筋商品・新着商品・イチオシ商品　の4種類（フリー・エコノミープランでは前２つのみ）が用意されていますが、特定のカテゴリやグループの商品を一覧表示させる独自タグはありません。

トップページ以外でも、たとえばフリーページに独自のカテゴリリストを表示させたいと思っても、そんな都合の良いタグは用意されていません。

カラーミーApiを使えば解決できる話ですが、じゃあそれをどこに置くのか問題（費用面）でうまく話が進まなかったりします。

先ほど全然違う調べ物をしていると、偶然これの解決策を発見したので感謝をこめて書いておきます。

ちなみに今記事とは別ですが、カラーミーApiをつかった商品リストの表示にはRenaca様の記事が非常にわかりやすいのでシェアしておきます。

「【カラーミーショップ】カテゴリーやグループの商品一覧をトップページとかフリーページで取得する方法」

カラーミーAPIなしで任意の商品リストを表示させる
1. 概要：目的ページの商品一覧を非同期で表示
2. 注意点：lazyloadを書いているときはひと手間いる
カラーミーカスタマイズのご依頼承ります。

カラーミー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の書き換えを行うかして対応が必要です。