<div class="quantity-update ">
<button class="button button--icon quantity-update__button quantity-update__button--minus quantity-update__button--disabled" type="button" aria-label="Decrease the quantity">
<svg class="icon button__icon quantity-update__icon" role="presentation" focusable="false">
<title>Minus mark</title>
<use xlink:href="/images/icons-sprite.svg#minus"></use>
</svg>
</button>
<input class="quantity-update__input " type="number" id="qty" min="1" value="1" aria-label="Change the quantity" />
<button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">
<svg class="icon button__icon quantity-update__icon" role="presentation" focusable="false">
<title>Plus mark</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
<script src="/components/raw/quantity-update/../quantity-update/quantity-update.js"></script>
<div
class="quantity-update {{ class }}"
{{{ attributes }}}
>
{{ render '@button--icon' minusQtyButton }}
<input
class="quantity-update__input {{ input.class }}"
type="number"
id="{{ input.id }}"
min="{{ input.min }}"
value="{{ input.defaultValue }}"
{{#unless label}}
aria-label="{{ input.ariaLabel }}"
{{/unless}}
{{{ input.attributes }}}
/>
{{ render '@button--icon' plusQtyButton }}
</div>
{{#if script}}
<script src="{{ static '../quantity-update/quantity-update.js' }}"></script>
{{/if}}
{
"label": false,
"input": {
"id": "qty",
"min": "1",
"name": "qty",
"defaultValue": "1",
"ariaLabel": "Change the quantity"
},
"minusQtyButton": {
"tag": "button",
"class": "quantity-update__button quantity-update__button--minus quantity-update__button--disabled",
"attributes": "type=\"button\" aria-label=\"Decrease the quantity\"",
"icon": {
"id": "minus",
"title": "Minus mark",
"class": "button__icon quantity-update__icon",
"hidden": true
}
},
"plusQtyButton": {
"tag": "button",
"class": "quantity-update__button quantity-update__button--plus",
"attributes": "type=\"button\" aria-label=\"Increase the quantity\"",
"icon": {
"id": "plus",
"title": "Plus mark",
"class": "button__icon quantity-update__icon",
"hidden": true
}
},
"script": true
}
$quantity-update__input-border-style : solid !default;
$quantity-update__input-border-color : $border-color-base !default;
$quantity-update__input-border-width : 1px 0 !default;
$quantity-update__input-border-width--error : 1px !default;
$quantity-update__input-border-radius : 0 !default;
$quantity-update__input-width : 70px !default;
$quantity-update__input-height : 56px !default;
$quantity-update__input-font-size : $font-size-large !default;
$quantity-update__input-color : $color-primary !default;
$quantity-update__button-size : 56px !default;
$quantity-update__button-margin : 0 !default;
$quantity-update__button-border : $border-base !default;
$quantity-update__button-background-hover--disabled: $white !default;
$quantity-update__button-fill-hover--disabled : $color-secondary !default;
$quantity-update__max-width : 100% !default;
$quantity-update__max-width\@medium : $quantity-update__input-width + (2 * $quantity-update__button-size) !default;
$quantity-update__width : 100%;
$quantity-update__border--active : $border-width-base $border-style-base $color-primary !default;
$quantity-update__transition : $transition-base !default;
$quantity-update__mage-error-bottom : -$spacer--semi-medium !default;
$quantity-update__mage-error-width : 250px !default;
@import 'quantity-update-variables';
.quantity-update {
position: relative;
display: flex;
max-width: $quantity-update__max-width;
width: $quantity-update__width;
transition: $quantity-update__transition;
@include mq($screen-m) {
max-width: $quantity-update__max-width\@medium;
}
&--active {
border: $quantity-update__border--active;
}
&__input {
flex-grow: 1;
border-style: $quantity-update__input-border-style;
border-color: $quantity-update__input-border-color;
border-width: $quantity-update__input-border-width;
border-radius: $quantity-update__input-border-radius;
width: $quantity-update__input-width;
height: $quantity-update__input-height;
color: $quantity-update__input-color;
font-size: $quantity-update__input-font-size;
text-align: center;
appearance: none;
@include mq($screen-m) {
flex-grow: initial;
}
&.focus-visible {
outline: none;
}
&.mage-error {
border-width: $quantity-update__input-border-width--error;
}
}
&__button {
width: $quantity-update__button-size;
height: $quantity-update__button-size;
margin: $quantity-update__button-margin;
border: $quantity-update__button-border;
&--plus {
border-radius: 0 15px 15px 0;
border-left: 1px solid #ccc;
}
&--minus {
border-radius: 15px 0 0 15px;
border-right: 1px solid #ccc;
}
}
// Disable spin buttons in number input type
input[type="number"]::-webkit-outer-spin-button, // sass-lint:disable-line no-vendor-prefixes
input[type="number"]::-webkit-inner-spin-button { // sass-lint:disable-line no-vendor-prefixes
-webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
margin: 0;
}
input[type="number"] { // sass-lint:disable-line no-vendor-prefixes
-moz-appearance: textfield; // sass-lint:disable-line no-vendor-prefixes
}
div.mage-error {
position: absolute;
bottom: $quantity-update__mage-error-bottom;
width: $quantity-update__mage-error-width;
}
}
'use strict';
class QuantityUpdate {
constructor(htmlDivElement) {
this.elem = htmlDivElement;
this.plus = this.elem.querySelector('.quantity-update__button--plus');
this.minus = this.elem.querySelector('.quantity-update__button--minus');
this.input = this.elem.querySelector('.quantity-update__input');
this.activeClass = 'quantity-update--active';
this.events();
this.evaluateConditions();
}
events() {
this.plus.addEventListener('click', (ev) => {
this.increment();
this.evaluateConditions();
this.triggerInput(ev);
});
this.minus.addEventListener('click', (ev) => {
this.decrement();
this.evaluateConditions();
this.triggerInput(ev);
});
this.input.addEventListener('focusin', () => {
this.elem.classList.add(this.activeClass);
});
this.input.addEventListener('focusout', () => {
this.elem.classList.remove(this.activeClass);
});
}
triggerInput() {
const event = new Event('change', {
'bubbles': true,
'cancelable': true
});
this.input.dispatchEvent(event);
}
evaluateConditions() {
this.input.value > 0 ? this.disableMinus() : this.enableMinus();
}
increment() {
this.input.value = Number(this.input.value) + 1;
}
decrement() {
if (this.input.value >= 1) {
this.input.value = Number(this.input.value) - 1;
}
}
disableMinus() {
this.minus.classList.remove('quantity-update__button--disabled')
}
enableMinus() {
this.minus.classList.add('quantity-update__button--disabled')
}
}
(function quantityUpdateObjectsInit() {
[...document.querySelectorAll('.quantity-update')].forEach((htmlDivElement) => {
new QuantityUpdate(htmlDivElement);
});
})();
There are no notes for this item.