When the product was clicked, redirect to a specific page.


1. First of all we have to specify a new property in our product model, called 'link'. This will be the link where the user should be redirected. To do so, please open the 'js/products/models/itemModel.js' and add the 'link' property as shown in the screenshot.

2. Once that's done, we have to specify the links for all our products. Open the 'js/products/categories/bags.js' file and add the 'link' property for all your products with the appropriate links like shown in the screenshot.

3. The 'plus' button from the product doesn't make sens anymore so we have to remove it and add our link on each product. Open the 'js/products/views/itemView.js' file, remove the 'add-product-code' list item and add our link like shown in the screenshot. The link code can be found below.

'<a class="product-redirect" href="<%= link %>"></a>',

4. In order to prevent the the modal to open when the 'plus' button is clicked we have to comment the 'click' event. Open the 'js/products/views/itemView.js' file and search for 'Bind controls' comment and comment the 'click' event as shown in the screenshot.

5. And finally, our link needs few CSS rules. Please copy paste somewhere in your CSS file these lines of code.

.product-redirect{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
}

 

 


Last update:
2015-11-17 10:42
Author:
Vlad Sargu
Revision:
1.1
Average rating:0 (0 Votes)