商品詳細ページスライドショー 動作しない【カラーミーショップ】

Question

カラーミーショップにて自社の販売サイトを制作中です。
商品詳細ページのスライドショーが動かず、商品写真が下にくだってしまい、困っています。
解決方法があればご教示ください。よろしくお願いします。
以下に現在のキャプチャーとソースコードを記載いたします。

##商品詳細ページ

<main>

<link rel="stylesheet" href="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick.css">

<link rel="stylesheet" href="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick-theme.css">

<!---<script src="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick.min.js"></script>--->

<div class="p-product">

  
  <{if $product.id != ""}>

  <div class="p-product u-container thirdlayer_section01 article">

    <form name="product_form" method="post" action="<{$cart_url}>">

      <div class="p-product-main">

        <!-- 商品画像 -->

        <div class="p-product-img  main-image">

          <div class="p-product-img__main js-images-slider">

            <div class="p-product-img__main-item basic">

              <{if $product.img_url != ""}>

              <img src="<{$product.img_url}>" alt="<{$productlist[num].name|escape:'html'}>" />

              <{else}>

              <img src="https://img.shop-pro.jp/tmpl_img/86/no-image.jpg" alt="<{$productlist[num].name|escape:'html'}>" />

              <{/if}>

            </div>

            <{if $otherimg_num != 0}>

            <{section name=num loop=$otherimg}>

              <{if $otherimg[num].url != ""}>

              <div class="p-product-img__main-item align">

                <img src="<{$otherimg[num].url}>" alt="<{$productlist[num].name|escape:'html'}>" />

              </div>

              <{/if}>

            <{/section}>

            <{/if}>

          </div>

          <{if $otherimg_num != 0}>

          <div class="p-product-img__thumb">

            <div class="u-overflow-slide">

              <ul class="p-product-thumb-list">

                <{if $product.img_url != ""}>

                <li class="p-product-thumb-list__item">

                  <div class="p-product-thumb-list__img">

                    <img src="<{$product.img_url}>" alt="<{$productlist[num].name|escape:'html'}>" />

                  </div>

                </li>

                <{/if}>

                <{section name=num loop=$otherimg}>

                  <{if $otherimg[num].url != ""}>

                  <li class="p-product-thumb-list__item">

                    <div class="p-product-thumb-list__img">

                      <img src="<{$otherimg[num].url}>" alt="<{$productlist[num].name|escape:'html'}>" />

                    </div>

                  </li>

                  <{/if}>

                <{/section}>

              </ul>

            </div>

          </div>

          <{/if}>

        </div>

        <!-- // 商品画像 -->

       

        </div><!-- /.p-product-info -->

      </div><!-- /.p-product-main -->

      <!-- // 商品情報・カート -->

​

      <{$product.info}>

    </form>

  <{else}>

    <{if $product.hide_flg == true}>

    <div class="p-product u-container">

      <p class="mar_t_50 txt_c txt_18">この商品を閲覧するにはログインが必要です。</p>

    </div>

    <{else}>

    <div class="p-product u-container">

      <p class="mar_t_50 txt_c txt_18">現在、この商品は扱っておりません。</p>

    </div>

    <{/if}>

  <{/if}>

</div>

<{* ↓↓ デバイスサイズ変更時にオプション選択フォームの表示切替に使用 ↓↓ *}>

<{if $option_output_mode}>

  <div class="hide">

    <div class="prd-opt-select">

      <{section name=num loop=$option}>

      <div class="p-product-option-select__box">

        <div class="p-product-option-select__ttl">

          <{$option[num].name}>

        </div>

        <select name="<{$option[num].select_name}>" class="product_cart_select">

          <{html_options values=$option_value[num].id output=$option_value[num].name selected=$key}>

        </select>

      </div>

      <{/section}>

    </div>

    <div class="prd-opt-table">

      <{$option_table}>

    </div>

  </div>

<{/if}> 

  

​

​

  </div>

  

  </main>

<!---<script

  src="https://code.jquery.com/jquery-3.6.0.min.js"

  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="

  crossorigin="anonymous"></script>--->

<script src="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick.min.js"></script>

​

<script>

$(document).on("ready", function() {

  var slider = ".js-images-slider";

  var thumbnailItem = ".p-product-thumb-list__item";

​

  $(thumbnailItem).each(function() {

    var index = $(thumbnailItem).index(this);

    $(this).attr("data-index",index);

  });

​

  $(slider).on('init',function(slick) {

    var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index");

    $(thumbnailItem+'[data-index="'+index+'"]').addClass("is-current");

  });

​

  $(slider).slick( {

    autoplay: false,

    arrows: true,

    infinite: true

  });

​

  $(thumbnailItem).on('click',function() {

    var index = $(this).attr("data-index");

    $(slider).slick("slickGoTo",index,false);

  });

​

  $(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){

    $(thumbnailItem).each(function() {

      $(this).removeClass("is-current");

    });

    $(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("is-current");

  });

});

 
</script>

​```
​```css
@charset "utf-8";


/*商品詳細ページ*/

.thirdlayer_section01{

    width:1000px;

    margin:60px auto 100px auto;

    display: flex;

    flex-direction: row;

​

    clear: both;

}

.left-side{

    width:500px;

    display: flex;

    flex-direction: row;

    flex-wrap:wrap;

    align-content: flex-start;

  position:relative;

​

}




​

​



​






​



​

​






.itemphoto01 li {

  width: 500px;

  height:500px;

  overflow: hidden;

}

.itemphoto01 li.item2,

.itemphoto01 li.item3,

.itemphoto01 li.item4 {

  display: none;

}

.itemphoto01 li:hover img {

  opacity: 0.8;

  filter: alpha(opacity=80);

  -ms-filter: "alpha(opacity=80)";

}

.thumb{

    display: flex;

    flex-direction: row;

}

.thumb,

.thumb li {

  margin: 0;

  padding: 0;

  list-style: none;

}

.thumb li {

  display: block;

  width: 125px;

  height: 125px;

  overflow: hidden;

  cursor: pointer;

  vertical-align: top;

  margin-bottom: 0;

}

.thumb li img {

  width: 100%;

  height: auto;

}

.thumb li:hover img {

  opacity: 0.8;

  filter: alpha(opacity=80);

  -ms-filter: "alpha(opacity=80)";

}

​

​

Comments

[1T2R3M4]

https://shop-pro.jp/?mode=support

上記で確認されてみてはいかがでしょうか。

[ema-material]

ありがとうございます。デザインカスタマイズのサポートはカラーミーの公式では受け付けてくれません。

[1T2R3M4]

【1】気になる部分だけ重点的に 『設定代行・部分カスタマイズコース』
【2】デザインまるごとプロにお任せ 『デザインフルカスタマイズコース』

とあるみたいですけど。

[Lhankor_Mhy]

jQuery の読み込み部分をご提示ください。

[ema-material]

コメントありがとうございます。
検証のために3.6.0のCDNをコメントアウトしていたのですが
コメントアウトを解除しても解決しませんでした。

[Lhankor_Mhy]

ということは、実際のページでは jQuery 3.6.0 を読み込んでいるという理解でいいのでしょうか？

[ema-material]

はい。そうなります。
また、以下のurlの記事によると、カラーミーショップにはjQueryのCDN（verは低そうですが）が
デフォルトで読み込まれた状態のようです。
https://naeco.jp/colorme-know-how

[Lhankor_Mhy]

問題を把握しました。とはいえ、jQuery を複数読み込むのはあまり良いことではないです。

Answer 1

There is also $(document).on( "ready", handler ), deprecated as of jQuery 1.8 and removed in jQuery 3.0

.ready() | jQuery API Documentation

とのことですので、jQuery3系では動作しない書き方です。

Comments

[ema-material]

ありがとうございます！なるほど1.8以降のCDNはだめだということなので
複数読み込まれていたCDNをコメントアウトした上で
カラーミーショップの共通ページ（ワードプレスでいうところのheader.php）に
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
と記述しましたが、変化ありませんでした。

[Lhankor_Mhy]

これ以上は実物を見ないと何とも言えませんが、そんなことをするよりも、$(document).on( "ready", という記述を変えるべきでしょうね。

[ema-material]

ありがとうございます。すごいヒントで助かりました！
$(window).on('load', function(){
に変更したところ、すぐ動きました。
ご対応に感謝します。

[Lhankor_Mhy]

ご解決されて何よりです。