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