How do I display the product image cover photo when there are combinations?

[skinnybloke]

Prestashop v1.6.0.9

 

Hi - I have added an option of 'Please Select' with an empty value to the combination dropdown in product.tpl. This works well and forces a customer to choose a combination.

 

The only issue I have is that when the product page loads, it displays the images associated with the default combination, and not the cover photo that I specified in the product images section in the back office.

 

I have tried to make several changes to product.tpl & product.js but to no avail.

 

Any help would be appreciated

 

 

[cristic]

In product.js you have function refreshProductImages. 

You need to trigger it for the default combination on the page.

 

This will do the job.

[skinnybloke]

Hi cristic - I have had a look at this code and cannot see what to change. It doesn't appear to me that the refreshProductImages function runs when the page loads.

 

I think the code that needs changing is either in the product.tpl on line 82 :

src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html':'UTF-8'}"

or changes within product.php which generates the parameters for the img src. (I would rather not have to change the PHP file)

[skinnybloke]

Bump

[vekia]

can you share url to your shop?

it's hard to say what's going on without possbility to inspect website

 

with regards,

MIlos

[skinnybloke]

Hi - I hope you can understand this...

 

URL1  https://www.luxurygardengazebos.com/gazebo-side-panels/9-solid-side-gazebo-panel.html

This has no images set for combinations

When the page loads It displays the cover photo specified in the images tab for that product. This is as expected.

 

URL2 https://www.luxurygardengazebos.com/gazebo-side-panels/10-solid-side-gazebo-panel.html

This currently has 3  images set for the 'no windows/white' combination

When the page loads It displays the 1st of the photos specified for the 'no windows/white' combination. I would expect it to still show the cover photo specified in the images tab for that product until a combination has been selected.

 

The cover photo for both of these products is the 1st image shown in the thumbnail strip.

[skinnybloke]

Bump

[gonebdg - webindoshop.com]

You can do modifications like this :

 

On your product.tpl file add following smarty script above the HTML tag <img id="bigpic" ...

<!-- Default image modification -->
{assign var='defaultImage' value=Product::getCover($product->id)}
{foreach from=$images item=productImage}
	{if $productImage.id_image == $defaultImage.id_image}
		{assign var='defaultImage_legend' value=$productImage.legend}
	{/if}
{/foreach}
<img id="defaultImage" itemprop="image" src="{$link->getImageLink($product->link_rewrite, $defaultImage.id_image|intval, 'large_default')|escape:'html':'UTF-8'}" title="{if !empty($defaultImage_legend)}{$defaultImage_legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($defaultImage_legend)}{$defaultImage_legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" width="{$largeSize.width}" height="{$largeSize.height}"/>
<!-- /Default image modification -->

And then add new class to the HTML tag <img id="bigpic" ... , so the this image will be hidden on the first time product page loading

<img id="bigpic" class="hide" ..... 

On your product.js file add following js script inside $('#views_block li a').hover(...

function() {
	$('#defaultImage').addClass('hide');
	$('#bigpic').removeClass('hide');
},
// default script should stay here

[skinnybloke]

Hi - thanks for taking the time to provide the above code.

 

Almost there. It now correctly displays the cover photo when I open the page.

 

It has introduced a secondary problem though.The large images do not display when I hover over the thumbnails - they only display when I remove the hover. 

[Guest]

Hi skinnybloke,

 

Were you able to get this working?

[skinnybloke]

I'm afraid I didnt get it working as I wanted it. I decided I had spent enough time on the problem and left it has it was