- Create Custom Field:
- Add a custom checkbox field in the item record.
- Display Items with Badge:
- Use the checkbox to determine which items to display with a badge on the PLP page.
- Extend
FacetsItemCellView: - Create a child view by extending
FacetsItemCellView. - Pass Child View to PLP:
- Integrate the child view into the PLP page based on the custom item field value.
js file
define(
‘JJ.PLPSKUViewer.PLPSKUViewer’
, [
‘Facets.ItemCell.View’,
‘JJ.PLPSKUViewer.PLP.View’
]
, function (
FacetsItemCellView,
showItembageview
) {
‘use strict’;
return {
mountToApp: function mountToApp(container) {
var layout = container.getComponent(‘Layout’);
if (layout) {
layout.addChildView(‘showItembage’, function () {
return new showItembageview({ container: container });
});
}
_.extend(FacetsItemCellView.prototype, {
initialize: _.wrap(FacetsItemCellView.prototype.initialize, function (fn) {
var self = this;
var context = fn.apply(this, _.toArray(arguments).slice(1));
this.on(“beforeCompositeViewRender”, function () {
var itemBadge = self.model.get(‘custitem_jj_show_itembadge’)
if (itemBadge === true) {
self.$el.find(‘.facets-item-cell-grid-image-wrapper’).after(‘<div data-view=”showItembage”></div>’);
}
});
})
});
}
};
});
View file
define(‘JJ.PLPSKUViewer.PLP.View’
, [
‘JJ.showitembadge.showitembadge.tpl’
]
, function (
JJ_showitembadge_showitembadge_tpl
) {
‘use strict’;
return Backbone.View.extend({
template: JJ_showitembadge_showitembadge_tpl,
});
});
Template file
<div class=“ribbon ribbon-top-left”><span>New</span>