matik4 Posted April 21, 2020 Share Posted April 21, 2020 Hi! I wonder if anyone can help me with this. I have a problem with 'no image' image not being displayed on the product page. On product list it works perfect. I tried to change the tpl in many different ways with 'if empty', 'if image > 0' etc with no effect. I changed the no image variable to direct link and still no effect whatsoever. Patient: https://elektronova.pl/akcesoria/16616-uklad-zaplonowy-mhs-35-230-spectrum--5907418719096.html Presta 1.7.5.2 My product-cover-thumbnail.tpl: <div class="images-container left_vertical"> {block name='product_images'} <ul class="product-images slider-nav"> {foreach from=$product.images item=image} <div class="thumb-container"> <div> <img class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}" src="{$image.bySize.home_default.url}" alt="{$image.legend}" title="{$image.legend}" itemprop="image" > </div> </div> {/foreach} </ul> {/block} {block name='product_cover'} <div class="product-view_content"> {block name='product_flags'} <ul class="product-flag"> {foreach from=$product.flags item=flag} <li class=" {$flag.type}">{$flag.label}</li> {/foreach} </ul> {/block} <div class="product-cover slider-for"> {foreach from=$product.images item=image} <div class="thumb-item"> {if $product.cover} <div class="easyzoom easyzoom--overlay"> <a href="{$image.bySize.large_default.url}"> <img class="" style="width:100%;" src="{$image.bySize.large_default.url}" alt="{$image.legend}" title="{$image.legend}" itemprop="image"> </a> </div> {else} <img src="{$urls.no_picture_image.bySize.large_default.url}" style="width:100%;"> {/if} </div> {/foreach} </div> </div> {/block} </div> {hook h='displayAfterProductThumbs'} <script type="text/javascript"> $(document).ready(function() { $('.images-container .slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, focusOnSelect: true, arrows: true, fade: true, infinite: true, lazyLoad: 'ondemand', asNavFor: '.slider-nav' }); if ({$postheme.product_thumbnail} == 0) { $('.images-container .slider-nav').slick({ slidesToShow: 4, slidesToScroll: 1, asNavFor: '.slider-for', dots: false, arrows: true, infinite: true, focusOnSelect: true }); }else { $('.images-container .slider-nav').slick({ slidesToShow: 4, slidesToScroll: 1, asNavFor: '.slider-for', vertical:true, dots: false, arrows: true, infinite: true, focusOnSelect: true, responsive: [ { breakpoint: 991, settings: { slidesToShow: 2, slidesToScroll: 1, } }, { breakpoint: 767, settings: { slidesToShow: 4, slidesToScroll: 1, } }, { breakpoint: 543, settings: { slidesToShow: 3, slidesToScroll: 1, } }, { breakpoint: 399, settings: { slidesToShow: 2, slidesToScroll: 1, } } ] }); } $('.images-container .slider-for').slickLightbox({ src: 'src', itemSelector: '.thumb-item img' }); if($(window).width() >= 992) { var $easyzoom = $('.images-container .easyzoom').easyZoom(); } $(window).resize(function(){ if($(window).width() >= 992) { var $easyzoom = $('.images-container .easyzoom').easyZoom(); $('.easyzoom--overlay').addClass('easyzoom'); } else { $('.easyzoom--overlay').removeClass('easyzoom'); } }); }); </script> Link to comment Share on other sites More sharing options...
matik4 Posted April 21, 2020 Author Share Posted April 21, 2020 I tried different combinations with no success. I even changed the product.tpl instead from: <div class="row"> <div class="col-xs-12 {if $postheme.product_thumbnail == 0}col-md-5 {else} col-md-6 {/if}"> {block name='page_content_container'} <section class="page-content" id="content"> {block name='page_content'} {block name='product_cover_thumbnails'} {include file='catalog/_partials/product-cover-thumbnails.tpl'} {/block} {/block} </section> {/block} </div> to <div class="row"> <div class="col-xs-12 {if $postheme.product_thumbnail == 0}col-md-5 {else} col-md-6 {/if}"> {block name='page_content_container'} {foreach from=$product.images item=image} {if empty($product.cover)} <div style="width:100%;height:auto;"><img src="/img/p/pl.jpg" style="width:100%;" /></div> {else} <section class="page-content" id="content"> {block name='page_content'} {block name='product_cover_thumbnails'} {include file='catalog/_partials/product-cover-thumbnails.tpl'} {/block} {/block} </section> {/if} {/foreach} {/block} </div> and that still returns empty div Link to comment Share on other sites More sharing options...
Casperes Posted February 4, 2022 Share Posted February 4, 2022 Hi, I have the same issue. On product list images are shown without any problem. On the product page all i get is 'no image' image. Matik4, did you find solution? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now