Prestashop : How to setup thumbnail / combination link

The ability to make mulitple products out on one for size, color or other speicifications, is a great feature of Prestashop, but on small display trick is missing. Prestashop's default template (v1.1) includes the automatic resizing of multiple images for a product. It also allows the administrator / editor to specify one of the product images for each combination. As a result, the front end display of the product will let the combination select box interact with the mbig image display : here we explain how to modify the product template to let the thumbnail click act onthe combination choice.

For jquery experts only !

the first hing to know with prestashop front end is that the nice functions your customer experiences each times he pays a visit to your shop are all implmented via jquery calls. Jquery is a nice and very efficient library  but it is  a little difficult to understand when looked over by someone who has not been involved in the development. Everything here happens in your theme javascript folder, in the product.js file.

First thing to do is deactivate the link on the thumbnail : this cannot be done by removing the url because it used for hover effect that displays the big image. We only want to stop the popup from popping and replace the click action by an option change : just remove the THICKBOX class attribute (line 209 of a 1.1 product template page). the trick then is to add a javascript handler on the click event :

onclick="setCombination{$image.id_image}();return false;"

we declare here on function per image id. A cleaner way to do this would be to builld an array instead of multiple functions. Please go ahead and send us the code.

Very specific functions !

the code below does the job of changing the selcet value when the thumbnail is clicked. Please note this is done with static variables names and WILL NOT WORK on your prestashop theme and product combinations : modify the group_4 reference (check the gnerated product page for select box identifyer)

DEMO : on prayandcomfort religious product shop (created by... the usual suspect).

	
	{foreach from=$combinations key=idCombination item=combination}
		function setCombination{$combination.id_image}()
	{literal}	{	{/literal}
			var chosenSelection = {$combination.list};
			var idChosen = {$idCombination|intval};
			
	{literal}
				$("#group_4").val(chosenSelection);
			 	 //$("#group_4").trigger('change');
		$('#idCombination').val(idChosen);
			}	
			
		 
			{/literal}
	{/foreach}
1 reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *