How to create a “Go back to the category” button in PrestaShop and thirty bees

In this video we will make a handy button to let our customers navigate back to the previously visited category from the product page, in PrestaShop 1.6 and thirty bees

Watch the screencast

Text Version

To start with, open up global.js, located in your theme folder /js. At the very end, add the following:


$(document).ready(function() {
	if($('body').hasClass('category'))
	{
		$('.product_img_link').click(function(e) {
			$.totalStorage('last_visited_category', window.location.href);
		});
	}
});

Then, in product.tpl, again in the theme folder, find a proper spot for the button, then add the following inside a <script> tag:

	$(document).ready(function() {
		if(previous_category = $.totalStorage('last_visited_category'))
		{
			$('#goback').attr('href', previous_category);
			$.totalStorage('last_visited_category', '');
		} else $('#goback').hide();
	});

Right after id, add our button:


<a href="javascript:void(0)" class="btn btn-default" id="goback">
	<i class="icon-chevron-left left"></i> {l s='Go Back to the last category'}
</a>

Here is the final code for product.tpl

<script>

	$(document).ready(function() {
		if(previous_category = $.totalStorage('last_visited_category'))
		{
			$('#goback').attr('href', previous_category);
			$.totalStorage('last_visited_category', '');
		} else $('#goback').hide();
	});
</script>

<a href="javascript:void(0)" class="btn btn-default" id="goback">
	<i class="icon-chevron-left left">{l s='Go Back to the last category'}</i>
</a>

Notice: If you want to keep a record of the visited category across pages, you can remove $.totalStorage(‘last_visited_category’, ”); from the code in product.tpl.

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

Need Help?

Hire me