How to get next product picture and display it?

[rofli123]

Hey,

 

I want to make buttons to change image displayed on product page.

 

How can I get next image?

 

Thank you

Edited January 5, 2017 by rofli123 (see edit history)

[rofli123]

I know how the image urls are based of image-id and those are in the DB. I know in theory how to do it but practically I am lost.

 

It would be easy for me to make it with js/jquery but the problem is making the sql queries. I can't / don't want to do it from js for security reasons.

 

My idea is:

 

Two buttons on top of the product image.

 

When button is clicked, position parameter (which is the same on db.image) +=1, request new image id from db where position = position+1; construct new link with image_id, with Jquery update attr of Image ("src", newlink) and it is done.

 

My problem is integrating the sql query with my JQuery code. How should this be done properly?

 

I am new to programming so any help is very appreciated.

[razaro]

Check this free module and make adjustments in php. 

 

https://www.prestashop.com/forums/topic/52315-module-next-and-previous-links-on-the-product-page/

 

Or follow this tutorial 

 

https://www.prestashop.com/forums/topic/364810-tutorial-adding-previous-and-next-navigation-buttons-to-the-product-page/

[rofli123]

Hey razaro, thank you for the links. I have read and followed the tutorial but still can't get it to work. I hope you or somebody else can help me. I've done this:

 

\override\classes\Product.php

<?php
	Class Product extends ProductCore
	{
		public function getAdjacentPictures()
		{
		
		$product_id = $_GET['id_product'];
		$pics = array();

		$sql= 'SELECT id_image FROM ' ._DB_PREFIX_.'image WHERE id_product = '.$product_id.';';
		
		$k = Db::getInstance(_PS_USE_SQL_SLAVE_)->NumRows($sql);
			
		for ($i=1;$i<=$k;$i++)
				
				{
				
				$sql2= 'SELECT id_image FROM ' ._DB_PREFIX_.'image WHERE id_product = '.$product_id. ' AND position = '.$i.';';

				$pics["$i"] = Db::getInstance(_PS_USE_SQL_SLAVE_)->executeS($sql2);

				}

		
		return $pics;

		}
	}
?>

\override\controllers\front\ProductController.php

<?php
	Class ProductController extends ProductControllerCore
	{
		public function initContent()
		{
			$pics = $this->product->getAdjacentPictures();

			$k = count($pics);
			
			$this->context->smarty->assign('productarray', array(


						'productPic1' => $pics[1]

				));
			for ($i=2; $i<=$k; $i++){

				$temp_array = array( "productPic$i" => $pics["$i"] );

					
			$this->context->smarty->append('productarray', $temp_array, true);

				unset($temp_array);
			}
			
			parent::initContent();
		}
	}
?>

Yet after deleting cache and so on, $productPic1 is empty from product page.

 

Errors on product page although not sure relevant:

tice: Trying to get property of non-object in C:\xampp\htdocs\tools\smarty\sysplugins\smarty_internal_templatebase.php(157) : eval()'d code on line 484
Notice: Undefined index: productPic1 in C:\xampp\htdocs\tools\smarty\sysplugins\smarty_internal_templatebase.php(157) : eval()'d code on line 163
Notice: Trying to get property of non-object in C:\xampp\htdocs\tools\smarty\sysplugins\smarty_internal_templatebase.php(157) : eval()'d code on line 163

Again any help is pretty much apreciated :-)

 

Regards

Edited January 8, 2017 by rofli123 (see edit history)

[razaro]

Ah sorry I did not understood question at first, you want next image of current product.

And not next (other) product image. :-)

 

And you have concerns on JavaScript because of security. But I think you do not have to for this.

You can use data and functions that are already there. Note following I done on default 1.6 theme:

 

Added first 2 arrows in product.tpl

		<!-- left infos-->
		<div class="pb-left-column col-xs-12 col-sm-4 col-md-5">
			<!-- product img-->
			<div id="image-block" class="clearfix">
				<span class="prev-prod-image"><</span>
				<span class="next-prod-image">></span>

then styled them a bit, code added in product.css

#image-block .prev-prod-image {
  display: block;
  position: absolute;
  top: 45%;
  left: 0;
  color: #000;
  padding: 10px;
  font-size: 3em;
}
#image-block .next-prod-image {
  display: block;
  position: absolute;
  top: 45%;
  right: 0;
  color: #000;
  padding: 10px;
  font-size: 3em;
}
#image-block .prev-prod-image:hover, #image-block .next-prod-image:hover {
  color: #ccc;
}

And main code in product.js

$(document).on('click', '#image-block .prev-prod-image', function(e){
	e.preventDefault();
	$('#views_block li a').each(function( index ) {
		var total = $('#views_block li a').length-1;
	 	if( $(this).hasClass('shown') ) {
	 		console.log('index ' + index + ' = 0 ' + total );
	 		if (index === 0) {
	 			displayImage($('#views_block li:eq('+ total +') a'));
	 			return false;
	 		}
	 		else {
	 			displayImage($('#views_block li:eq('+ (index-1) +') a'));
	 			return false;
	 		}
	 	} 
	});
	return false;
});
$(document).on('click', '#image-block .next-prod-image', function(e){
	e.preventDefault();
	$('#views_block li a').each(function( index ) {
		var total = $('#views_block li a').length-1;
	 	if( $(this).hasClass('shown') ) {
	 		console.log('index ' + index + ' = total ' + total );
	 		if (index === total) {
	 			displayImage($('#views_block li:eq(0) a'));
	 			return false;
	 		}
	 		else {
	 			displayImage($('#views_block li:eq('+ (index+1) +') a'));
	 			return false;
	 		}
	 	} 
	});
	return false;
});

To explain a bit this uses thumbnails and class "shown" that marks current selected image. Then using existing function "displayImage" to display 

next or previous image. Also I have added that it goes in circle so when it comes to first/last image it does not stop.

 

You probably can do this differently but think this goes well with existing default theme. 

Also my wrong previous post led you to creating overrides but notice in product.tpl you already have 

"$images" array that is used for thumbnails.

[rofli123]

Excellent, it works! Thank you!

 

Don't worry about the misunderstanding, I learnt about Classes and some php :-)

 

Cheers

[dolec]

how to do it in prestashop 1.7?

[Joo]

Any chance to have the same in prestashop 1.7? I can't find any product.js ..

[pinwheel]

Has anyone managed this for 1.7.6? I badly need.