Scenario
Quanitity functionality is default feature in PDP and Quick View but if we want to show Quantity option i PLP page we can follow the below solution.
Solution
Create a extension
in a entry fire create a childView as shown in below code
extend the TPL file as shown in below code
add minus(-) and ( + ) button in TPL file
Code
Entry file
define(
‘jj.PlpExtension.PlpExtension’
, [
‘jj.PlpExtension.PlpExtension.View’,
‘GlobalViews.StarRating.View’,
‘Facets.ItemCell.View’,
‘jj_plpextension_plpextension.tpl’,
‘Cart.QuickAddToCart.View’
]
, function (
PlpExtensionView,
GlobalViewsStarRatingView,
FacetsItemCellView,
jj_plpextension_plpextension_tpl,
CartQuickAddToCartView
)
{
‘use strict’;
return {
mountToApp: function mountToApp (container)
{
var plp = container.getComponent(‘PLP’);
if(plp)
{
plp.addChildView(‘AddToCart’, function() {
return new PlpExtensionView({ container: container });
});
}
_.extend(FacetsItemCellView.prototype, {
template: jj_plpextension_plpextension_tpl,
events: {
‘click [data-action=”updateQuantity”]’: ‘setQuantity’,
},
// This function is used to set the update quantity value in the plp page
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’);
},
});
_.extend(CartQuickAddToCartView.prototype, {
template: jj_plpextension_plpextension_tpl,
});
});
}
};
});
TPL FIle
<form class=”cart-quickaddtocart” data-action=”add-to-cart”>
<div data-view=”ProductViewsPrice.Price” class=”cart-quickaddtocart-price”></div>
{{#if showQuickAddToCartButton}}
<div class=”quantity-plp” data-view=”AddToCart”>
<div class=”quantity-container”>
<button type=”button” class=”cart-details-quantity-remove” data-action=”updateQuantity”data-type=”cart-details-quantity-remove” data-value=”-1″>-</button>
<input name=”quantity” data-action=”setquantity” class=”cart-quickaddtocart-quantity” type=”text” min=”{{minimumQuantity}}”{{#if isMaximumQuantity}} max=”{{maximumQuantity}}”{{/if}} value=”{{quantity}}”/>
<button type=”button” class=”cart-details-quantity-add” data-action=”updateQuantity” data-value=”+1″>+</button>
</div>
</div>
{{/if}}
</form>
SASS file (we can change the css code according to requirement)
.facets-facet-browse-items{
input.cart-quickaddtocart-quantity {
outline:none;
}
.cart-quickaddtocart-quantity {
border:none;
background-color:transparent;
padding:0px;
text-align: center;
margin-bottom: 0px;
width: 40px;
height: 100%;
font-size: $pcin-font-size-sm;
font-weight: $sc-font-weight-semibold;
}
.quantity-container{
width: 91px;
height: 33px;
border: 1px solid $pure-care-dark-gray;
border-radius: 6px;
background: $pure-care-white;
display: flex;
align-items: center;
margin-left:auto;
margin-right:auto;
justify-items: center;
}
.cart-details-quantity-remove{
width: 24px;
height: 5px;
display: flex;
position: relative;
bottom: 4px;
background-color: $pure-care-white;
border-radius: 0px;
font-size: $pcin-font-size-lg-md + $pcin-font-size-sm;
margin-left:$sc-margin-lv2;
color: $pure-care-grey
}
.cart-details-quantity-add{
width: 25px;
height: 11px;
font-size: $pcin-font-size-lg-md;
font-weight: $sc-font-weight-semibold;
justify-content: right;
margin-right: $sc-margin-lv2;
color: $pure-care-grey;
}
}
.facets-item-cell-grid{
.quantity-plp{
height:35px;
}
}
@media(max-width:$screen-xs-max){
.facets-item-cell-grid{
.quantity-plp{
height:45px;
}
}
.facets-item-cell-table{
.quantity-plp{
height:48px;
}
}
.facets-item-cell-list-right{
.quantity-plp{
height:68px;
}
}
}
@media(max-width:$screen-xs-min){
.facets-item-cell-list-right{
.quantity-plp{
height:130px;
}
}
}