EC-CUBE3系のデフォルトテンプレートにLightboxを組み込む。

EC-CUBE3系のデフォルトテンプレートにLightboxを組み込んでみました。

EC-CUBE2系のテンプレートと仕様がガラッとかわったので苦戦しました。

EC-CUBE3系のデフォルトテンプレートは/src/Eccube/Resource/template/default/default_frame.twigにlightbox.min.jsとlightbox.cssを組み込みます。

lightbox.min.jsとlightbox.cssは/html/template/default以下にフォルダごとアップしました。

lightbox.min.jsは</body>以下に表記します。そうしないと動作しません。

次に/app/template/default/Product/detail.twigにLightboxのリンクコードを挿入します。

<a href=”{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}” data-lightbox=”group”></a>

こんな感じで。

  <!–★画像★–>
<div id=”item_photo_area” class=”col-sm-6″>
<div id=”detail_image_box__slides” class=”slides”>
{% if Product.ProductImage|length > 0 %}
{% for ProductImage in Product.ProductImage %}
<div id=”detail_image_box__item–{{ loop.index }}”><a href=”{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}” data-lightbox=”group”><img src=”{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}”/></a></div>
{% endfor %}
{% else %}
<div id=”detail_image_box__item”><img src=”{{ app.config.image_save_urlpath }}/{{ ”|no_image_product }}”/></div>
{% endif %}
</div>
</div>

EC-CUBE　3 [ 西村誠 ] 価格：3,024円（税込、送料込）