EC-CUBE2の商品画像をレスポンシブなスライダーにする

EC-CUBE 2.13.5の商品詳細ページのメイン画像部分を、レスポンシブに対応したスライドギャラリーにカスタムしようじゃないか、というお話。

要件はこんな感じ。
・レスポンシブ対応
・スマホでの閲覧時、スワイプで切り替え
・PCでの閲覧時、サムネイルクリックで切り替え
・画像の拡大ポップアップはなし

使用したのは、slick.js というプラグイン。
簡単に導入できて多機能でカスタムも容易と評判です。
https://kenwheeler.github.io/slick/

まずは、cssファイルとjsファイルを読み込む記述を追加しましょう。
site_frame.tpl への追加が楽チンでしょうか。

<!--{if $tpl_page_class_name === "LC_Page_Products_Detail"}-->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!--{/if}-->

商品詳細ページでだけ読み込ませればいいので、その分岐で囲んでいます。

次に、スライダーを機能させるための記述を追加します。

<!--{if $tpl_page_class_name === "LC_Page_Products_Detail"}-->
<script>
$(document).ready(function(){
  $('.slick-photos').slick({
    arrows:false,
    dots:true,
    prevArrow: '<a class="slick-prev" href="#"><i data-icon="ei-arrow-left" data-size="m"></i></a>',
    nextArrow: '<a class="slick-next" href="#"><i data-icon="ei-arrow-right" data-size="m"></i></a>',
    customPaging: function(slick,index) {
        var targetImage = slick.$slides.eq(index).find('img').attr('src');
        return '<img src=" ' + targetImage + ' " alt="">';
    }
  });
});
</script>
<!--{/if}-->

これも商品詳細ページでのみ読み込まれるようにしておきました。

次に、商品詳細ページのメイン画像部分のソースを変更します。
/products/detail.php のメイン画像部分をまるっと書き換えちゃいましょう。

<div class="photo slick-photos">
  <!--{assign var=key value="main_image"}-->
  <!--★画像★-->
  <div><img src="<!--{$arrFile[$key].filepath|h}-->" alt="<!--{$arrProduct.name|h}-->"></div>
  <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
    <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
    <!--{assign var=ikey value="sub_image`$smarty.section.cnt.index+1`"}-->
    <!--{if $arrProduct[$key] != "" or $arrProduct[$ikey]|strlen >= 1}-->
      <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
      <!--▼サブ画像-->
      <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
      <!--{if $arrProduct[$ikey]|strlen >= 1}-->
        <div class="slick-slide"><img src="<!--{$arrFile[$ikey].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$ikey].width}-->" height="<!--{$arrFile[$ikey].height}-->"></div>
      <!--{else}-->
      <!--{/if}-->
      <!--▲サブ画像-->
    <!--{/if}-->
  <!--{/section}-->
</div>

あとは、cssでお好みの形に整えれば、出来上がりです。

Related Posts