Jump to content

'No image' image not showing on product page


matik4

Recommended Posts

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

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

  • 1 year later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...