By default, in SCA, there is no quantity pricing table on the Facet views (Grid, List and Table). But we can display the quantity pricing table on the PLP page by customization.
_.extend(FacetsItemCellView.prototype, {
getContext: _.wrap(FacetsItemCellView.prototype.getContext, function getContext(fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
var priceSchedule = this.model.get('_priceDetails') && this.model.get('_priceDetails').priceschedule;
context.priceSchedule = priceSchedule;
context.hasQtyPricing = priceSchedule && priceSchedule.length > 0
return context;
}),
})
For the item have quantity pricing we can display the quantity pricing table. The below template needs to be added to the required position of the facet cell view.
{{#if hasQtyPricing}}
<div class="quantity-pricing-block-plp-page">
<div class="quantity-pricing-expander-body-container quantity-pricing-block-plp">
<table>
<thead>
<tr class="quantity-pricing-table-header">
<th class="quantity-pricing-table-header-quantity">{{translate 'Quantity'}}</th>
<th class="quantity-pricing-table-header-price">{{translate 'Price'}}</th>
</tr>
</thead>
<tbody>
{{#each priceSchedule}}
<tr>
<td class="quantity-pricing-table-body-quantity">{{minimumquantity}} +</td>
<td class="quantity-pricing-table-body-price">{{price_formatted}}{{/if}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
{{/if}}
The table will be displayed as shown below.
