A matrix table for the matrix child items has been created, showing the sku value of each matrix item, the options present in the item, like the size of the item, the quantity that the customer can set according to their preferences, and the price of each child item. It also displays checkboxes that can have functionality, like when selected on a single child item, that single item is going to be selected, and if selected in the heading part, all the child items will be selected at once. Below is a screenshot
Firstly, we need to created the new extension for the matrix table in the entry point, created the child view, created the table in the tpl of the extension, and added the data view in the required place of the product detail page full view tpl. After getting the tpl content using the data-view, creating the matrix table using the html table tag, and passing values from the view file getcontext to the template showing the required values, the values are obtained by using the pdp component and cart component for the add to cart button (the addLine method is used), and styling is done added scroll for mobile device as per the look of the table.
entry file
let pdp = container.getComponent("PDP")
pdp.addChildView('Matrixtable', function() {
return new matrixtabeView({
container: container,
pdp: pdp
});
});view file
return Backbone.View.extend({
template: jj_pdpmatrixtable_matrixtabe_tpl
, initialize: function (options) {
this.pdp = options.pdp;
this.container = options.container;
this.matrixAllItems = this.pdp.getAllMatrixChilds();
let matrixTableContents = [];
_.each(this.matrixAllItems, (item) =>{
let matrixItem = {};
matrixItem.isActive = false;
matrixItem.internalid = item.internalid;
matrixItem.sku = item.keyMapping_sku;
matrixItem.size = item.custitem_test_size_field;
matrixItem.quantity = 1;
matrixItem.price = item.keyMapping_price_formatted;
matrixTableContents.push(matrixItem);
});
this.matrixTableContents = matrixTableContents;
},
events: {
'click [data-action="select-item"]' : 'selectItem',
'click [data-action="select-all"]' : 'selectAll',
'change [data-action="update-quantity"]' : 'updateQuantity',
'click [data-action="matrix-add-to-cart"]' : 'addToCart',
'click [data-action="all-add-to-cart"]' : 'addAllToCart'
},
selectItem: function (e) {
let currentItem = e.currentTarget.attributes && e.currentTarget.attributes['data-id'] ? e.currentTarget.attributes['data-id'].value : undefined;
if (currentItem) {
let matrixTableContents = this.matrixTableContents;
_.each(matrixTableContents, (item) => {
if (currentItem === item.sku) {
item.isActive = item.isActive ? false : true;
}
})
this.matrixTableContents = matrixTableContents;
}
this.render();
},
selectAll: function (e) {
_.each(this.matrixTableContents, (item) => {
item.isActive = e.currentTarget.checked;
})
this.render();
},
updateQuantity: function (e) {
let currentItem = e.currentTarget.attributes && e.currentTarget.attributes['data-id'] ? e.currentTarget.attributes['data-id'].value : undefined;
let quantity = e.currentTarget.value;
let matrixTableContents = this.matrixTableContents;
_.each(matrixTableContents, (item) => {
if (currentItem === item.sku) {
item.quantity = quantity;
}
})
this.matrixTableContents = matrixTableContents;
this.render();
},
addToCart: function (e) {
let currentItem = e.currentTarget.attributes && e.currentTarget.attributes['data-id'] ? e.currentTarget.attributes['data-id'].value : undefined;
let cart = this.container.getComponent("Cart")
let matrixTableContents = this.matrixTableContents;
_.each(matrixTableContents, (item) => {
if (currentItem === item.sku) {
cart.addLine({
line: {
quantity: parseInt(item.quantity),
item: {
internalid: item.internalid
}
}
}).then(function() {
alert(item.sku + ' Is added to Cart.')
});
}
})
},
addAllToCart: function (e) {
let matrixTableContents = this.matrixTableContents;
let cart = this.container.getComponent("Cart");
_.each(matrixTableContents, (item) => {
let activeLines = [];
if (item.isActive) {
activeLines.push({
quantity: parseInt(item.quantity),
item: {
internalid: item.internalid
}
})
}
if (activeLines.length > 0) {
cart.addLines({
lines: activeLines
})
}
},
getContext: function getContext()
{
let isAllSelected = this.matrixTableContents.every(
(x) => x.isActive == true
);
return {
matrixAllItems: this.matrixTableContents,
isAllSelected : isAllSelected
};
}<section class="pdp-matrix-table-main-container">
<table class="pdp-matrix-table-container">
<tr class="pdp-matrix-table-heading-row">
<th class="pdp-matrix-table-heading-select-all">
<input type="checkbox" name="select-all" id="select-all" data-action="select-all" {{#if isAllSelected}} checked {{/if}}>
</th>
<th class="pdp-matrix-table-heading-sku">
SKU
</th>
<th class="pdp-matrix-table-heading-size">
Size
</th>
<th class="pdp-matrix-table-heading-quantity">
Quantity
</th>
<th class="pdp-matrix-table-heading-price">
Price
</th>
<th class="pdp-matrix-table-heading-add-all-to-cart">
<button type="button" id="all-add-to-cart" data-action="all-add-to-cart" class="add-all-to-cart-button">Add To Cart</button>
</th>
</tr>
{{#each matrixAllItems}}
<tr class="pdp-matrix-table-data-row">
<td class="pdp-matrix-table-data">
<input class="pdp-matrix-table-data-select" type="checkbox" name="select-{{sku}}" id="select-{{sku}}" data-action="select-item" data-id="{{sku}}" {{#if isActive}} checked {{/if}}>
</td>
<td class="pdp-matrix-table-data">
{{sku}}
</td>
<td class="pdp-matrix-table-data">
{{size}}
</td>
<td class="pdp-matrix-table-data">
<input class="pdp-matrix-table-quantity" type="number" name="{{sku}}-quantity" data-action="update-quantity" data-id="{{sku}}" {{#unless isActive}} disabled {{/unless}} value="{{quantity}}">
</td>
<td class="pdp-matrix-table-data">
{{price}}
</td>
<td class="pdp-matrix-table-data">
<button type="submit" class="add-to-cart-button" id="matrix-add-to-cart" data-action="matrix-add-to-cart" data-id="{{sku}}" {{#unless isActive}} disabled {{/unless}}>Add To Cart</button>
</td>
</tr>
{{/each}}
</table>
</section>