Jump to content

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


Recommended Posts

  • 2 weeks later...

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 by lateral (see edit history)
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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 by lateral (see edit history)
Link to comment
Share on other sites

  • 4 months later...

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

 

Link to comment
Share on other sites

  • 1 month later...

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; }

Link to comment
Share on other sites

  • 2 months later...
  • 9 months later...

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 by roroPrestashop (see edit history)
  • Like 2
Link to comment
Share on other sites

  • 1 year later...
  • 1 month later...

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 by metal1616 (see edit history)
  • Like 1
Link to comment
Share on other sites

  • 6 months later...
  • 3 years later...
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 by MarioCM (see edit history)
Link to comment
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...