[TUTORIAL] Adding Previous and Next navigation buttons to the product page

[NemoPS]

Hey everyone! I just published a tut on how to create a simple product to product navigation for the product page, here it is:

http://nemops.com/prestashop-previous-next-product-buttons/#.VCqATfna6r0

 

Cheers!
Fabio

[lateral]

Hi Nemo

 

Thanks for this tutorial.

 

I got it all working except that it is not displaying the Products in the desired order.

 

I have sorted the majority of my Products, by default, on lowest price to highest price and that is the order they are displayed within the Category.

 

Is there a simple way to "scroll" through the Products based upon the order in which they are displayed???

 

Also, how do I change the button colour and text colour so that I can match them to the colours of my theme?

 

Thanks again.

Edited October 13, 2014 by lateral (see edit history)

[NemoPS]

Well, this is weird. They are supposed to be grabbed in the order they have inside their default category, can you check? Is that the default one, or do they belong to multiple?

As for the color, it all depends on your theme, can you share the site's url? the btn, btn-default classes should be modified depending on the template already, if it's standard

[lateral]

Hi Nemo

 

I did a simple test and setup a new Category and created 5 products called "Product 1,2,3,4,5) and did a test and it worked correctly.

 

I then checked one of my existing Categories and it did not display the products in the order that they are stored. It appears that this is due to the Products being linked to more than one Category. It ignores them and doesn't display them....

[NemoPS]

Uhm, strange! it should take the default category, did you change that as well?

[lateral]

Hi Nemo

 

If the Category what I wish to scroll through is called "Category 1" and there are products called "Prod1", "Prod2", "Prod3" etc up to "Prod10".

 

Prod1 to Prod5 are only attached to Category 1.

 

Prod5 and Prod6 are attached to Category 1 and also attached to Category 2 and have Category 2 as their default category.

 

Prod7 to 10 are only attached to Category 1.

 

If I scroll I will see all Products EXCEPT Prod5 and Prod6.

 

I hope this helps.

[NemoPS]

Well yes, as I said only products within a default category

[lateral]

It would be much better if it worked across Categories...

[NemoPS]

Yeah but it was buggy so I had to publish the tut without that functionality added

[filipstudio]

Hello Nemo,

This feature seems great and it's extremely useful, but unfortunately I couldn't make it work on my website.

I'm probably doing something wrong but can't put my finger on it.

 

After clearing the cache everything stopped working and the homepage became blank.

How can I make it work?

Thanks.

Filip

[NemoPS]

Blank Page? Enable error reporting: config/defines.inc.php set PS_MODE_DEV to true

[filipstudio]

Thanks Nemo, it works perfect now.

It's a crucial tool for any online store, maybe it should be included in the default / official theme.

Grazie!

[lateral]

Hi Nemo

 

What's the easier way to change the colour of the "buttons" of the Next and Previous so that they match my theme?

 

Thanks

 

Hi Nemo,

 

I just figured out that I can use the available button classes but what do I do if I want a custom colour such as #FEA800?

Edited November 2, 2014 by lateral (see edit history)

[NemoPS]

You can add a further class to them, or target the specific tree like

 

.product-navigation .btn {

background-color: #FEA800;

}

[lateral]

Thanks Nemo

[Porter Ricks]

Hi Nemo,

 

big thanks for this useful tutorial. It works fine on PS 1.6.0.14.

However,  when a product are not activated i get this error...

 

There is 1 error

1. This product is no longer available.

Is there a possibility to fix this, or do i need some changes in BO?

 

Best regards, Porter Ricks

 

[lateral]

Hi

 

This might have something to do with the product being in more than one category......

 

Is the product attached to more than one category????

 

 

 

Regards

Greg

[Porter Ricks]

Hi,

 

thanks for your reply.

The product is only attached to a subcategory. When i activate the product is all ok.

 

???

 

Happy Easter

[NemoPS]

Hm, when are you getting that? Then clicking on a prev/next link? It might be worth adding AND p.active = 1 as the first of the comments says

[lateral]

What do you mean "When i activate the product is all ok"?

[benyben]

You can add a further class to them, or target the specific tree like

 

.product-navigation .btn {

background-color: #FEA800;

}

 

Thanks, i use this:

 

.product-navigation .btn {

 

background-color: #FEA800;

border: 2px solid #0404B4;

border-radius: 30px; }

[Pirate]

Hello. Anyone knows, how to cycle links (from last to first product)?

[roroPrestashop]

For anyone that's interested, I duplicated what Nemo did to make it work for Category navigation. 

Instead of creating the overrides for Product and ProductController, you create them for Category and CategoryController, while the code used in the Category Class override is this: 

public function getAdjacentCats()
	{
	 
	    $curCat  = Db::getInstance(_PS_USE_SQL_SLAVE_)->getRow('SELECT position,id_parent FROM '._DB_PREFIX_.'category WHERE id_category = ' . (int)$this->id);

	    $previous = Db::getInstance(_PS_USE_SQL_SLAVE_)->getRow('
	        SELECT cc.id_category, cl.link_rewrite, cc.position, cl.name
	        FROM '._DB_PREFIX_.'category cc
	        LEFT JOIN '._DB_PREFIX_.'category_lang cl ON (cc.id_category = cl.id_category)
	        LEFT JOIN '._DB_PREFIX_.'category c ON (cc.id_category = c.id_category)
	        WHERE (cc.position < '. (int)($curCat['position'] ) .' ) AND cc.id_parent='.(int)($curCat['id_parent']).'  AND cl.id_lang = '.(Context::getContext()->language->id).'
	        ORDER BY cc.position DESC');

	    
	    $next = Db::getInstance(_PS_USE_SQL_SLAVE_)->getRow('
	        SELECT cc.id_category, cl.link_rewrite, cc.position, cl.name
	        FROM '._DB_PREFIX_.'category cc
	        LEFT JOIN '._DB_PREFIX_.'category_lang cl ON (cc.id_category = cl.id_category)
	        LEFT JOIN '._DB_PREFIX_.'category c ON (cc.id_category = c.id_category)
	        WHERE (cc.position > '. (int)($curCat['position'] ) .' ) AND cc.id_parent='.(int)($curCat['id_parent']).'  AND cl.id_lang = '.(Context::getContext()->language->id).'
	        ORDER BY cc.position ASC');

	    return array('previous' => $previous, 'next' => $next);

	}

This is the code for the Controller:

$adjacent_cats = $this->category->getAdjacentCats();
 
$this->context->smarty->assign(array(
   'prev_cat'=> $adjacent_cats['previous'],
   'next_cat'=> $adjacent_cats['next']
));

And for the tpl file:

{if $prev_cat}
   <a title="{$prev_cat.name}" class="" href="{$link->getCategoryLink($prev_cat.id_category, $prev_cat.link_rewrite)}">{l s='Previous'}</a>
{/if}
{if $next_cat}
   <a title="{$next_cat.name}" class="" style="float:right;" href="{$link->getCategoryLink($next_cat.id_category, $next_cat.link_rewrite)}">{l s='Next'}</a>
{/if} 

I think it makes sense and seems to be working!

Edited May 19, 2016 by roroPrestashop (see edit history)

[wierdthing]

Does this work for prestashop 1.7?

[NemoPS]

Haven't tested it but I assume it does not

[metal1616]

Hi!

 

To make this work in Prestashop 1.7 only need to change the method to create the url in the tpl template to this:

    {if $prev_product}
        <a title="{$prev_product.name}" class="btn btn-default" href="{url entity='product' id=$prev_product.id_product}">{l s='Previous Product' d='Shop.Theme.Catalog'}</a>
    {/if}
    {if $next_product}
        <a title="{$next_product.name}" class="btn btn-default" style="float:right"href="{url entity='product' id=$next_product.id_product}">{l s='Next Product' d='Shop.Theme.Catalog'}</a>
    {/if}

Put it in the file: "/themes/[name_of_your_theme]/templates/catalog/product.tpl.

 

In the new version the method "{$link->getProductLink()}" it's deprecated by "{url}".

 

Here you have a tutorial to know how to use this:

https://webkul.com/blog/links-creation-on-tpl-files-in-prestashop-1-7-using-url/

 

Thank you so much for the tutorial NemoPS!

 

Bye.

Edited September 15, 2017 by metal1616 (see edit history)

[reanimated]

This is working greatly! 
How I can make a link to go back to the product list too?

[NemoPS]

That's tricky. The clean way would be to set a cookie that stores the last category url when you click on a product. Then on the product page, on document.ready, assign it to the href of your button

[MarioCM]

On 9/14/2017 at 5:33 PM, metal1616 said:

Hi!

 

To make this work in Prestashop 1.7 only need to change the method to create the url in the tpl template to this:

    {if $prev_product}
        <a title="{$prev_product.name}" class="btn btn-default" href="{url entity='product' id=$prev_product.id_product}">{l s='Previous Product' d='Shop.Theme.Catalog'}</a>
    {/if}
    {if $next_product}
        <a title="{$next_product.name}" class="btn btn-default" style="float:right"href="{url entity='product' id=$next_product.id_product}">{l s='Next Product' d='Shop.Theme.Catalog'}</a>
    {/if}

Put it in the file: "/themes/[name_of_your_theme]/templates/catalog/product.tpl.

 

In the new version the method "{$link->getProductLink()}" it's deprecated by "{url}".

 

Here you have a tutorial to know how to use this:

https://webkul.com/blog/links-creation-on-tpl-files-in-prestashop-1-7-using-url/

 

Thank you so much for the tutorial NemoPS!

 

Bye.

Thanks for your help!
Works fine!!

I am using version 1.7.8.3

Edited February 15, 2022 by MarioCM (see edit history)