Jump to content
rofli123

How to get next product picture and display it?

Recommended Posts

Hey,

 

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

 

How can I get next image?

 

Thank you

Edited by rofli123 (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by rofli123 (see edit history)

Share this post


Link to post
Share on other sites

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.

post-45807-0-00330000-1483914687_thumb.png

Share this post


Link to post
Share on other sites

Excellent, it works! Thank you!

 

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

 

Cheers

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More