[FIXED] How to change current product cover photo with javascript in PrestaShop 1.7

Issue

I am trying to set customized product preview (t-shirt with uploaded logotype) as product thumbnail. It's image, file type: jpeg - I have full url with http: NEW_PRODUCT_THUMB.

How to set this url as product image / cover / thumbnail?

For tests, I tried to set it with jQuery:

// <section id="main"> , first <img> child element
$('section#main img:eq(0)').attr("src", NEW_PRODUCT_THUMB );

Problem: Every changes - t-shirt size, color are triggering refresh product page, and then - default image was loaded (from database, not from my customization JS editor).

Here is webpage, where customized product image is set as thumbnail in correct way, but I have no idea how? https://products.printzware.com/home/114-faded-short-sleeves-tshirt.html#/4-size-one_size

Solution

Solution #1

Why not editing your product.tpl Smarty template file and add a condition stating that if this product has been customized within the current shopping, you display a specific image, instead of the cover one?

You can retrieve the customized image by calling the following method from the Cart class:

getProductCustomization($id_product, $type = null, $not_in_cart = false)

And for the real-time modifications, you can of course keep your jQuery code.

Solution #2

Same logic, but instead, you can override the getImageLink() method in the Link class.

Once your override is ready, you can call it dynamically via an ajax call with jQuery.

This will work even if the page is reloaded.

Answered By - Bruno Leveque

Answer Checked By - Clifford M. (PHPFixing Volunteer)