カラーミーで特定のカテゴリーの一覧の出力方法

  • 2022年10月21日
  • 2022年10月21日
  • COLOR ME
  • 1View
  • 0件

トップページや商品詳細ページ、フリーページで、特定のカテゴリーの一覧を表示したい場合があると思います。

しかし、カラーミーではそのような仕様はありません。

なので、jsで無理矢理一覧の出力をします。

<script type="text/javascript">
  $(function(){
    $.ajax({
      url: 'http://juzu.shop/<{$bid_link}>', //商品一覧ページのURL
      cache: false,
      dataType:'html',
      success: function(html){
        var product_num = 3; //抜き出したい商品の数
        var list = $(html).find('.products__item'); // 抜き出す情報のセレクタを「商品一覧」から指定
        for (var i = 0; i < product_num; i++) {
          if ( !list[i] ) break;
          $('.products__list').append(list[i]); // 埋め込みたい場所のセレクタを指定
        }
      }
    });
  });
</script>

変更する箇所はコメントアウトしている箇所です。

このコードは商品詳細ページに、同じカテゴリーの商品一覧を出力しています。

「<{$bid_link}>」は商品が所属しているカテゴリーを取得します。

トップページなどで決まったカテゴリーを出力したい場合は、絶対パスでURLの記入をすれば問題ないです。

そして、商品一覧ページにある「products__item」クラスを「product_num」個取得して、「products__list」クラスの中に追加します。

つまり、商品一覧ページからhtmlを丸ごと持ってくるということです。

参考サイト
https://www.hanano-ya.jp/blog/programming/4654