In reorder page for selecting items to add to cart of multiple items we can use this functionality to select and unselect all items.
Template:
<table class="reorder-items-list-reorder-items-table md2sm">
<thead>
<tr class="reorder-row head">
<td><input type="checkbox" name="select-all-to-reorder" id="select-all-to-reorder" {{#if isAllSelected}} checked {{/if}} data-action="select-all-to-reorder" ><label for="select-all-to-reorder"> Select All</label></td>
<td>ITEM # (SKU)</td>
<td>DESCRIPTION</td>
<td>LAST PURCHASED ON</td>
<td>PRICE EACH</td>
<!-- <td>QTY DISCOUNTS</td> -->
<td>ORDER QTY</td>
</tr>
</thead>
<tbody >
{{#each reorderItems}}
<tr class="reorder-row {{itemId}}">
<td><input type="checkbox" class="{{trandate}}" data-item="{{itemId}}" data-action="select-to-reorder" name="select-to-reorder-{{itemId}}" id="{{itemId}}" {{#if isSelected}} checked {{/if}}><label for="select-to-reorder-{{itemId}}"></label></td>
<td>{{sku}}</td>
<td>{{description}}</td>
<td>{{trandate}}</td>
<td>{{price}}</td>
<!-- <td>{{discount}}</td> -->
<td class="reorder-quantity-container"><input type="number" name="qyantity" data-action="update-reorder-quantity" id="reorder-quantity-{{itemId}}" min="0", value="{{quantity}}" {{#if isDisabled}} disabled {{/if}}></td>
</tr>
{{/each}}
<tr><td></td><td></td><td></td><td></td><td></td><td></td> <!-- <td></td> --></tr>
<tr class="reorder-row total">
<td class="reorder-total text">TOTAL</td>
<td class="reorder-total"></td>
<td class="reorder-total"></td>
<td class="reorder-total"></td>
<td class="reorder-total amount"> <input type="text" name="reorder-total-amount" id="reorder-total-amount" disabled value="$0.00"></td>
<td class="reorder-total quantity"> <input type="number" name="reorder-total-quantity" id="reorder-total-quantity" disabled value="0"></td>
<!-- <td class="reorder-total"></td> -->
</tr>
</tbody>
</table>SCSS:
table.reorder-items-list-reorder-items-table{
top: 50px;
position: relative;
}
tr.reorder-row td {
border: 1px solid #000;
}
.reorder-items-addtocart-btn.bottom{
top: 50px;
float: right;
}
.reorder-quantity-container input[name="qyantity"] {
border: transparent;
width: 100%;
cursor: pointer;
}
.reorder-quantity-container input[name="qyantity"]:disabled{
cursor: default;
}
.reorder-quantity-container input[name="qyantity"]:focus-visible{
border: transparent;
}
.reorder-quantity-container{
padding: 0;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.global-views-showing-current {
display: none;
}
#reorder-total-amount, #reorder-total-quantity{
border-color:transparent ;
background-color: transparent;
}JavaScript:
EntryPoint:
_.extend(ReorderItemsListView.prototype, {
template: jj_reorder_form_tpl,
events: _.extend(ReorderItemsListView.prototype.events, {
'click [data-action="select-all-to-reorder"]': "selectAll",
'click [data-action="select-to-reorder"]': "selectItem",
'click [data-action="reorder-items"]': "reorderAddtoCart",
'change [data-action="update-reorder-quantity"]': "updateQuantity",
}),
selectAll: function (e) {
try {
let self = this;
if (e.currentTarget.checked) {
_.each($(".select-to-reorder"), function (checkBox) {
checkBox.checked = true;
$("#reorder-quantity-" + checkBox.id).attr("disabled", false);
});
let reorderItemsCollection = self.collection.models;
_.each(reorderItemsCollection, function (item) {
item.set("isSelected", true);
});
self.render();
} else {
_.each($(".select-to-reorder"), function (checkBox) {
checkBox.checked = false;
$("#reorder-quantity-" + checkBox.id).attr("disabled", true);
});
let reorderItemsCollection = self.collection.models;
_.each(reorderItemsCollection, function (item) {
item.set("isSelected", false);
});
self.render();
}
this.updateAmount();
} catch (error) {
console.log(error);
}
},
selectItem: function (e) {
try {
let self = this;
var currentItemId = e.currentTarget.id;
console.log(e.currentTarget.className);
let reorderItemsCollection = self.collection.models;
_.each(reorderItemsCollection, function (item) {
if (item.attributes.item.id == currentItemId && item.get('trandate') == e.currentTarget.className) {
if (e.currentTarget.checked) {
item.set("isSelected", true);
} else {
item.set("isSelected", false);
}
console.log(item.get('trandate'));
}
});
self.render();
this.updateAmount();
} catch (error) {
console.log(error);
}
},
reorderAddtoCart: function (e) {
let self = this;
let reorderItemsCollection = self.collection.models;
_.each($('[data-action="select-to-reorder"]'), function (checkBox) {
if (checkBox.checked) {
let currentItemId = checkBox.id
_.each(reorderItemsCollection, function (item) {
if (item.attributes.item.id == currentItemId) {
let itemQuantity = item.get('quantity');
console.log('quantity', itemQuantity);
var cart = container.getComponent("Cart");
cart.addLine({
line: {
quantity: parseInt(itemQuantity),
item: { internalid: parseInt(checkBox.id) }
}
})
}
})
}
});
},
getContext: _.wrap(
ReorderItemsListView.prototype.getContext,
function (fn) {
try {
var context = fn.apply(this, _.toArray(arguments).slice(1));
var reorderItemsCollection = this.collection.models;
console.log("reorderItemsCollection", this);
var reorderItems = [];
_.each(reorderItemsCollection, function (lines, key) {
let item = lines.get("item");
reorderItems[key] = {
sku: item.attributes.itemid,
description: item.attributes.displayname,
trandate: lines.attributes.trandate,
price: item.attributes.pricelevel1_formatted,
discount: item.attributes.discount
? item.attributes.discount
: "12.5%",
itemId: item.attributes.internalid,
isSelected:
lines.get("isSelected") || lines.get("isAllSelected")
? true
: false,
quantity: lines.get("quantity") ? lines.get("quantity") : 1,
isDisabled:
lines.get("isSelected") || lines.get("isAllSelected")
? false
: true,
};
});
context.isAllSelected = reorderItemsCollection.every(
(x) => x.get("isSelected") == true
);
context.reorderItems = reorderItems;
console.log("Context", context);
return context;
} catch (error) {
console.log("error @ GetContext", error);
}
}
),
});Result:
