To add item quantity update in PDP where we can modify the section and add functionalities according to our requirement.
In Entry file of the extension.
// This view is to update quantity value in the pdp page.
_.extend(ProductDetailsQuantityView.prototype, {
template: jj_pdpquantity_pdpquantity_tpl,
events: {
'click [data-action="updateQuantity"]': 'setQuantity',
},
setQuantity: function setQuantity(e) {
e.preventDefault();
const value = parseInt(this.$(e.currentTarget).data('value'), 10);
const $input_quantity = this.$('[name="quantity"]');
const old_value = parseInt($input_quantity.val(), 10);
const new_quantity = Math.max(old_value + value, 1);
$input_quantity.val(new_quantity).trigger('blur');
},
});
In jj_pdpquantity_pdpquantity_tpl :
{{#unless quantityPrice}}
<div class="quantity-pricing-expander-body-container">
<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}}
{{#if show_as_number}}
<tr>
<td class="quantity-pricing-table-body-quantity">{{maximumquantity}}</td>
<td class="quantity-pricing-table-body-price">{{price_formatted}}</td>
</tr>
{{else}}
<tr>
{{#if maximumquantity}}
{{#if notShowQuantityRange}}
<td class="quantity-pricing-table-body-quantity">{{maximumquantity}}</td>
{{else}}
<td class="quantity-pricing-table-body-quantity">{{minimumquantity}}+</td>
{{/if}}
{{#if is_range}}
<td class="quantity-pricing-table-body-price">{{price_range.min_formatted}} -
{{price_range.max_formatted}}</td>
{{else}}
<td class="quantity-pricing-table-body-price">{{price_formatted}}</td>
{{/if}}
{{else}}
<td class="quantity-pricing-table-body-quantity">{{minimumquantity}}+</td>
{{#if is_range}}
<td class="quantity-pricing-table-body-price">{{price_range.min_formatted}} -
{{price_range.max_formatted}}</td>
{{else}}
<td class="quantity-pricing-table-body-price">{{price_formatted}}</td>
{{/if}}
{{/if}}
</tr>
{{/if}}
{{/each}}
</tbody>
</table>
</div>
{{/unless}}