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

カラーミーショップのトップページに表示できる商品リストには、おすすめ商品・売れ筋商品・新着商品・イチオシ商品 の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>
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の書き換えを行うかして対応が必要です。

カラーミーショップのカスタマイズ・制作代行

カラーミーショップのテンプレートカスタマイズ、制作代行承っております。表示速度の改善など機能面の修正もお受けします。お気兼ねなくご相談ください

カラーミーショップ公式サイト

カラーミー・カスタマイズ用コードの販売

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です(個人事務所)。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(5,500円〜)

仕事のご相談は「お問い合わせ・ご相談」より随時承っております。