If we want to Add DataView in our theme .tpl File without adding directly in the file itself we can add it with the help of Jquery
Solution
Here I have Given Example for PDP page So i have Extended PDP page ,
mountToApp: function mountToApp(container) {
/** @type {LayoutComponent} */
var pdp = container.getComponent(‘PDP’);
var self = this;
if(pdp) {
pdp.addChildView(‘ProductDetails.Table.Full’, function () {
var item = pdp.getItemInfo();
self.model = new ItemModel(item);;
var children = self.model.get(‘item’).matrixchilditems_detail;
// Create item models with each object.
var childrenModels = children.map(function (obj) {
return new ItemModel(obj)
});
if (!self.model.get(‘item’).custitem_rb_preorder && !self.model.get(‘item’).isbackorderable) {
// Only keep child items that have an available quantity higher than zero.
childrenModels = childrenModels.filter(function (model) {
return model.get(‘quantityavailable’);
});
}
if (!childrenModels.length) {
return;
}
else {
return new PDPChildMatrixTableView({
application: container,
model: self.model,
collection: childrenModels,
parentView: self
});
}
});
The below code will add the DataView in the Theme file
we we need to update the Class name
we need to add the Class name of that class after which we want to show the Content
_.extend(ProductDetailsFullView.prototype, {
initialize: _.wrap(ProductDetailsFullView.prototype.initialize, function (fn) {
fn.apply(this, _.toArray(arguments).slice(1));
this.on(‘beforeCompositeViewRender’, function beforeCompositeViewRender() {
this.$el.find(‘.product-details-full-main-content’).after(‘<div data-view=”ProductDetails.Table.Full”></div>’);
});
})
});
}
}