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

カラーミーカスタマイズ

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

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

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

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

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

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

カラーミーAPIなしで任意の商品リストを表示させる

簡潔明瞭に書いてくださっていたのは「花のや 」様のブログ。感謝の念に耐えません。

概要:目的ページの商品一覧をajaxで呼び出して表示

概要が全てですので、あとはコードを書いておきましょう。例として期間限定グループの商品をトップページに表示させるとします。

<!-- 期間限定グループのページ -->
<ul id="list">
  <li class="list-item">・・・</li>
  ・・・
</ul>

グループページのHTMLがこんな感じだとして、

<!-- グループを表示させたいページ -->
<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>

と、こんな感じで表示できます。ajaxで読み込むURLをdataでパラメータ指定すれば他にも応用できそうですね。

弱点:全ブラウザ対応の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の書き換えを行うかして対応が必要です。

ミフネWEB
タイトルとURLをコピーしました