ぱぷさんの日記

30代男性。柏市在住。ゆるーく糖質制限中。反パクチー派。

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

f:id:papu0705:20160301135445p:plain

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

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

 

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

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

 

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

 

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

 

<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 [ 西村誠 ]

EC-CUBE 3 [ 西村誠 ]
価格:3,024円(税込、送料込)

広告を非表示にする