How to add links in the product modal?


This is what we want to achieve.

1. Open the 'js/products/models/itemModel.js' file and add a new property called 'links' as shown in the screenshot.

2. Open the 'js/products/categories/bags.js' and fill the 'links' property with the appropriate information, like shown in the screenshot

3. Open the 'js/products/modalView.js' and paste the code below right after the 'description' section, like shown in the screenshot.

'<div class="description-links">',
	'<% _.each(links, function(link){ %>',
		'<a href="<%= link.path %>" class="js-description-link"><i class="fa fa-file-pdf-o"></i><%= link.text %></a>',
	'<% }) %>',
'</div>',

4. In the same file paste the following code in the 'initialize' function, like shown in the screenshot.

$('.js-description-link', that.$el).click(function(event) {
	event.preventDefault();

	var btn = $(this);

	$('.prodact-link-modal').bPopup({
        content:'iframe', 
        contentContainer:'.content',
        loadUrl: btn.attr('href')
    });
});

5. Within your HTML file search for the 'product-details-modal' class and paste the code below after it, like shown in the screenshot.

<div class="prodact-link-modal">
	<div class="content"></div>
</div>

6. Add somewhere in your CSS file, these lines of code.

.description-links{
	font-size: 15px;
	margin-bottom: 30px;
}

.description-links a{
	margin-right: 15px;
}

.description-links i{
	margin-right: 5px;
}

.prodact-link-modal{
	width: 1000px !important;
	height:600px !important;
	max-width: 100%;
}

.prodact-link-modal .content,
.prodact-link-modal iframe{
	height:600px;
	width: 100%;
}

 

 


Last update:
2015-11-21 11:02
Author:
Vlad Sargu
Revision:
1.0
Average rating:0 (0 Votes)