Create an Extension For Extend ‘ItemRelations.RelatedItem.View’
Load modules “Cart.QuickAddToCart.View”, “Product.Model” for Extend the Quick View .
Extend the ItemRelations.RelatedItem.View .Then add child view for Quick View.
Add view in item_relations_related_item.tpl for modal.
The code of the Extension is added below.
define(
'JJ.QuickView.QuickView'
, [
'JJ.QuickView.QuickView.View', 'ItemRelations.RelatedItem.View', "Cart.QuickAddToCart.View", "Product.Model"
]
, function (
QuickViewView, ItemRelationsRelatedItemView, CartQuickAddToCartView, ProductModel
) {
'use strict';
return {
mountToApp: function mountToApp(container) {
// using the 'Layout' component we add a new child view inside the 'Header' existing view
// (there will be a DOM element with the HTML attribute data-view="Header.Logo")
// more documentation of the Extensibility API in
// https://system.netsuite.com/help/helpcenter/en_US/APIs/SuiteCommerce/Extensibility/Frontend/index.html
/** @type {LayoutComponent} */
var layout = container.getComponent('Layout');
var PDP = container.getComponent('PDP');
if (PDP) {
_.extend(ItemRelationsRelatedItemView.prototype, {
childViews: {
RelatedQuickAddToCart: function () {
var product = new ProductModel({
item: this.model,
quantity: this.model.get('_minimumQuantity', true)
});
return new CartQuickAddToCartView({
model: product,
application: this.options.application
});
},
},
getContext: _.wrap(ItemRelationsRelatedItemView.prototype.getContext, function (fn) {
var original_Ret = fn.apply(this, _.toArray(arguments).slice(1));
original_Ret.itemId = this.model.get('_id');
// @property {String} name
original_Ret.name = this.model.get('_name');
// @property {String} url
original_Ret.url = this.model.get('_url');
// @property {String} sku
original_Ret.sku = this.model.getSku();
// @property {Boolean} isEnvironmentBrowser
original_Ret.isEnvironmentBrowser = SC.ENVIRONMENT.jsEnvironment === 'browser' && !SC.ENVIRONMENT.isTouchEnabled;
return original_Ret
})
});
}
}
};
});
The code of the item_relations_related_item.tpl is added below
<div itemprop="itemListElement" data-item-id="{{itemId}}" data-track-productlist-list="{{track_productlist_list}}"
data-track-productlist-category="{{track_productlist_category}}"
data-track-productlist-position="{{track_productlist_position}}" data-sku="{{sku}}">
<div data-view="ItemThumbnail"></div>
<a class="item-relations-related-item-thumbnail" {{{itemURL}}}>
<img src="{{resizeImage thumbnail.url 'thumbnail'}}" alt="{{thumbnail.altimagetext}}" />
</a>
{{#if isEnvironmentBrowser}}
<div class="related-item-quickview">
<div class="facets-item-cell-grid-quick-view-wrapper">
<a href="{{url}}" class="facets-item-cell-grid-quick-view-link" data-toggle="show-in-modal">
<i class="facets-item-cell-grid-quick-view-icon"></i>
{{translate 'Quick View'}}
</a>
</div>
</div>
{{/if}}
<a {{{itemURL}}} class="item-relations-related-item-title">
<span itemprop="name">{{itemName}}</span>
</a>
<div class="item-relations-related-item-price" data-view="Item.Price">
</div>
<div data-view="RelatedQuickAddToCart"></div>
{{#if showRating}}
<div class="item-relations-related-item-rate" data-view="Global.StarRating">
</div>
{{/if}}
</div>