Requirement: The PDP page needs to have a new tab called “Manuals.” A Download button must appear beneath the tab. The manual(PDF) for that specific item should download upon clicking the button.
To provide the PDF link, an item record custom field must be kept.
The tab should only appear when the item record’s custom field contains a value.
It can be done using an extension.
Create a text field in the item record to store the pdf link. (The internal id is ‘custitem_manuals’)
To add a condition to display the tab on PDP page, pass the variable corresponding template.
_.extend(ProductDetailsFullView.prototype, {
getContext: _.wrap(ProductDetailsFullView.prototype.getContext, function (fn) {
var manuals = this.model.get('item').get('custitem_manuals');
context.showManualsTab = !!manuals
return context;
}),
});
The template file update
Extension Entry point file
define(
'JJ.DownloadPDF.manuals'
, [
'JJ.DownloadPDF.manuals.View'
]
, function (
manualsView
)
{
'use strict';
return {
mountToApp: function mountToApp (container)
{
/** @type {LayoutComponent} */
var layout = container.getComponent('Layout');
if(layout)
{
layout.addChildView('Download.Manuals', function() {
return new manualsView({ container: container });
});
}
}
};
});
View file
// @module JJ.DownloadPDF.manuals
define('JJ.DownloadPDF.manuals.View'
, [
'jj_downloadpdf_manuals.tpl'
, 'Backbone'
]
, function (
jj_downloadpdf_manuals_tpl
, Backbone
) {
'use strict';
// @class JJ.DownloadPDF.manuals.View @extends Backbone.View
return Backbone.View.extend({
template: jj_downloadpdf_manuals_tpl
, initialize: function (options) {
var pdp = options.container.getComponent('PDP');
var itemInfo = pdp.getItemInfo();
this.pdfManuals = itemInfo.item.custitem_manuals;
}
, events: {
'click [data-action="download-file"]': 'downloadFn'
}
// Function to download the pdf
, downloadFn: function downloadFn(e) {
let $target = this.$(e.currentTarget);
let pdfUrl = $target.data('id');
var link = document.createElement('a');
link.href = pdfUrl;
link.target = '_blank';
var filename = 'Download pdf';
link.download = filename;
if (navigator.userAgent.toLowerCase().match(/(ipad|iphone|safari)/) && navigator.userAgent.search("Chrome") < 0) {
document.location = link.href;
// window event not working here
} else {
var evt = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': false
});
link.dispatchEvent(evt);
(window.URL || window.webkitURL).revokeObjectURL(link.href);
}
}
, getContext: function getContext() {
this.pdfManuals = this.pdfManuals || ""
return {
pdfManuals: this.pdfManuals
};
}
});
});
Template file.
<div class="download-manual-block">
<div class="download-manual-description">You Can download the "Manual" of this item below in the PDF format.</div>
<a type="pdf" data-id="{{pdfManuals}}" data-action="download-file">
<button class="download-manual-button">Download PDF</button>
</a>
</div>
Sass file.
.manuals-info-card {
@extend .info-card;
}
.manuals-info-card-content {
@extend .info-card-content;
color: $sc-color-secondary;
font-weight: bold;
}
.download-manual-block{
margin: auto;
text-align: center;
background-color: rgba(241, 241, 241, 1);
padding: $sc-padding-lv5;
}
.download-manual-description{
color:$pure-care-grey;
font-weight: $sc-font-weight-semibold;
padding: $sc-padding-lv3;
}
.download-manual-button{
background: $pure-care-green;
border: 1px solid $pure-care-green;
padding: 8px;
border-radius: 12px;
color: $pure-care-white;
font-size: $pcin-font-size-md;
font-weight: $sc-font-weight-semibold;
}