we need to add the description view (created using the extension) as a child view to the option selector view and define it as a data view .As the website displays the item options based on the internal ID, Note: For personalized items, we used a separate template for all item options. So to display the EZ Shield description section for those items, we need to update the corresponding extension and template.
Configuration file
{
"type": "object",
"subtab": {
"id": "ezshield",
"title": "EZ Shield",
"group": "micrositeSolution"
},
"properties": {
"ezshield.itemid": {
"group": "micrositeSolution",
"type": "string",
"subtab": "ezshield",
"title": "EZ Shield Item Id",
"description": "Enter the ID of the Item that system will use for any EZShield",
"default": ""
},
"ezshield.url": {
"group": "micrositeSolution",
"type": "string",
"subtab": "ezshield",
"title": "EZ Shield Image",
"description": "Enter the URL of the image that you want to displayed in WebStore.",
"default": "img/no_image_available.jpeg"
},
"ezshield.description": {
"group": "micrositeSolution",
"type": "string",
"subtab": "ezshield",
"title": "EZ Shield Description",
"description": "Enter the description that you want to displayed in WebStore.",
"default": "EZ Shield is a service applies to personal or business checks that have been affected by forged signatures, forged endorsements and/or alteration. Checks, like other forms of payment, are subject to theft, fraud, misuse and unintended exposure of personal data."
}
}
}Entry point
// @module JJ.ezSheild.ezSheild
define('JJ.ezSheild.ezSheild.View'
, [
'jj_ezsheild_ezsheild.tpl',
'ProductDetails.Options.Selector.View'
, 'Backbone'
]
, function (
jj_ezsheild_ezsheild_tpl,
ProductDetailsOptionsSelectorView
, Backbone
) {
'use strict';
// @class JJ.ezSheild.ezSheild.View @extends Backbone.View
return Backbone.View.extend({
template: jj_ezsheild_ezsheild_tpl
, initialize: function (options) {
}
//@method getContext @return JJ.ezSheild.ezSheild.View.Context
, getContext: function getContext() {
var self = this;
var ezshielddescription = this.options.container.Configuration.ezshield.description;
var ezshieldimage = this.options.container.Configuration.ezshield.url;
return{
EZshield: ezshielddescription,
EZshieldurl:ezshieldimage
}
}
});
});
Javascript file
define(
'JJ.ezSheild.ezSheild'
, [
'JJ.ezSheild.ezSheild.View',
'ProductDetails.Full.View',
'ProductDetails.Options.Selector.View',
'SC.Configuration',
'jQuery',
'underscore'
]
, function (
ezSheildView,
ProductDetailsFullView,
ProductDetailsOptionsSelectorView,
Configuration,
jQuery,
_
) {
'use strict';
return {
mountToApp: function mountToApp(container) {
var layout = container.getComponent('Layout');
layout.addChildView('ezSheild.View', function() {
return new ezSheildView({ container: container });
});
},
};
});
Template file
<div class="product-specific-value">
<h3>Eligible for: <img src="{{EZshieldurl}}" ></h3>
{{EZshield}}
</div>
childview:
childViews: _.extend(ProductDetailsOptionsSelectorView.prototype.childViews, {
'ezSheild.View': function () {
console.log("ezSheild.View");
return new JJezSheildezSheildView({
container: container,
model: this.model,
application: this.options.application,
});
},
}),
Gave condition for which are the item having ezsheild option
_.extend(ProductDetailsOptionsSelectorView.prototype, {
getContext: _.wrap(ProductDetailsOptionsSelectorView.prototype.getContext, function (fn) {
var originalRet = fn.apply(this, _.toArray(arguments).slice(1));
originalRet.showPusher = false;
console.log('originalRet ez shield', originalRet);
console.log('originalRet ez shield', originalRet);
var custitemTagShowEzOpt = originalRet.model.attributes.item.attributes.custitem_tag_show_ez_opt;
console.log('custitem_tag_show_ez_opt:', custitemTagShowEzOpt);
originalRet.custitemTagShowEzOpt = custitemTagShowEzOpt;
return originalRet;
})
});
template file:
{{#if showEzshieldOptionType}}
{{#if custitemTagShowEzOpt}}
<div id="ez-shield-display-image" data-view="ezSheild.View" class="ProductLineDetailedView"></div>
{{/if}}
{{/if}}