fc2ブログ

EC-CUBEの商品紹介の写真をクリックで拡大、フリック切り替えするカスタマイズ

Masa

eccube4のfancybox

EC-CUBEの商品紹介の写真をクリックで拡大、フリック切り替えするカスタマイズ

公式にも要望出ているようなので、そのうち対応されるかもしれないけれど。
lightbox風のクリック拡大(タップ拡大)fancyboxを追加する方法のメモ書き

fancyboxは
Fancybox公式
こちらからダウンロードできます。

使うのはjsファイルとCSSファイルの2つだけ。
この2つを
ECキューブドメイン/html/tamplate/default(または追加したテンプレート名)/assets/js/fancybox(フォルダ※なくてもいいけど)
の中に入れます。
具体的には
ECキューブドメイン/html/tamplate/default(または追加したテンプレート名)/assets/js/fancybox/jquery.fancybox.css
ECキューブドメイン/html/tamplate/default(または追加したテンプレート名)/assets/js/fancybox/jquery.fancybox.js
こうなります。

この2つを読み込んでやれば良いだけなので。
ECキューブドメイン/app/template/default(または追加したテンプレート名)/default_frame.twig
こちらを編集します。

</head>のすぐ上に

<link rel="stylesheet" href="{{ asset('assets/js/fancybox/jquery.fancybox.css') }}">
<script src="{{ asset('assets/js/fancybox/jquery.fancybox.js') }}"></script>
</head>



と追記して。保存>FTPでアップロード。

続いて、商品一覧ページの画像表示部分を修正。
ECキューブドメイン/app/template/default(または追加したテンプレート名)/Product/detail.twig
内の以下を編集

<div class="item_visual">
{% for ProductImage in Product.ProductImage %}
<div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
{% else %}
<div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
{% endfor %}
</div>



↓追記※altの部分は画像の説明項目なので、必須ではないです。

<div class="item_visual">
{% for ProductImage in Product.ProductImage %}
<div class="slide-item"><a data-fancybox="gallery" href="{{ asset(ProductImage, 'save_image') }}" data-caption="{{ Product.name }}詳細"><img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ Product.name }}詳細" class="product_img"></a></div>
{% else %}
<div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
{% endfor %}
</div>




FTPソフトでアップロード後
管理画面>コンテンツ管理>キャッシュ管理>キャッシュ削除を忘れずに。


【CSSの調整】
アップロードする画像のサイズ(アスペクト比)で表示が崩れるから何とかしてほしいと要望があったので追加したクラスで調整。
ECキューブドメイン/html/tamplate/default(または追加したテンプレート名)/assets/css/style.css

に以下を追記

/** ▼商品紹介fancybox **/
.product_img{
max-width: 505px;
max-height: 505px;
object-fit: contain;
}
.slideThumb{
position:relative;
height:0;
padding-bottom:33%;/* 幅に対する縦のサイズ */
overflow:hidden;
background-color:#fff;
}
.slideThumb>img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:auto;
height:auto;
max-width:100%;
max-height:initial;
}
/** ▲商品紹介fancybox **/



もし役に立ったら拍手でも・・・
スポンサーサイト



Posted byMasa

Comments 0

There are no comments yet.

Leave a reply