カラーミーショップの構築をした時のお話

EC構築で共通の独自タグが使いづらく、いろんなやり方でやってみたのでメモ。

特集コンテンツを作り、最初のアイテムを特定の画像と入れ替えて表示するというものを作りました。特集のイメージ写真を入れ込む際に便利かと思います。サブグループの取得方法がわからずやむなく、、、しかしこれならURLがわかれば一覧表示できるかと思います。

下記サイト参考にさせてもらって大変助かりました。

カラーミーショップ制作パートナー...

トップページに任意の商品一覧を表示する カラーミーショップのトップページに表示できる商品リストには、おすすめ商品・売れ筋商品・新着商品・イチオシ商品　の4種類（フリー・エコノミープランでは前２つのみ）...

<!-- 特集コンテンツ -->
<div class="u-container">
<h2 class="c-ttl-main">
特集名
<span class="c-ttl-main__ja"> 特集を見る</span>
</h2>
<ul id="test"></ul>
<hr>
</div>
<!-- /特集コンテンツ -->

共通ページで読み込み

<link href="https://img.shop-pro.jp/tmpl_js/87/slick.css" rel="stylesheet" type="text/css">
<link href="https://img.shop-pro.jp/tmpl_js/87/slick-theme.css" rel="stylesheet" type="text/css">

javascript(通常版)

<script src="https://img.shop-pro.jp/tmpl_js/87/slick.min.js"></script>
<script>
	// 特集ページから商品情報を取得
$(function(){
  const productNum = 6,　// 表示させたい商品数
        getURL = 'https://margo.shop-pro.jp/?mode=grp&gid=2412339';
  $.ajax({
    url: getURL,
    cache: false,
    datatype: 'html'
  })
  .done( function(html){
    const list = $(html).find('.c-item-list .c-item-list__item');    //グループの商品リストにある各商品を
    for(i=0; i<productNum; i++){　　                  // 指定した回数まわして
	$('#test').append(list[i]);                   // #test に追加
    }
  })
  .fail( function(){
    $('#test').html('<li>Not Found</li>');　　　　 // URL間違ってる時とか商品がないとき
  })
});
</script>

javascript(画像追加)

<script src="https://img.shop-pro.jp/tmpl_js/87/slick.min.js"></script>
<script>
// 特集ページから商品情報を取得
	$(function() {
  const productNum = 5, // 表示させたい商品数
        getURL = 'https://margo.shop-pro.jp/?mode=grp&gid=2412339';

  // 最初に特定の画像を追加
  $('#test').append('<li class="c-item-list__item"><img src="https://margo.shop-pro.jp/apps/note/wp-content/uploads/2024/07/300x400_dummy.png" alt="img" style="object-fit: contain;" /></li>');

  $.ajax({
    url: getURL,
    cache: false,
    datatype: 'html'
  })
  .done(function(html) {
    const list = $(html).find('.c-item-list .c-item-list__item'); // グループの商品リストを取得
    if (list.length > 0) {
      // 最初の商品を2番目の位置に表示
      $('#test').append(list[0]);
      
      // その後のアイテムを表示（最初のアイテムはスキップ）
      for (let i = 1; i < productNum; i++) {
        if (list[i]) {
          $('#test').append(list[i]);
        }
      }
    }
  })
  .fail(function() {
    $('#test').html('<li>Not Found</li>'); // URLが間違っている時や商品がない場合
  });
});
</script>