To add quantity section in PDP.

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}}

Leave a comment

Your email address will not be published. Required fields are marked *