<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
}
  • Content:
    $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;
    
  • URL: /components/raw/quantity-update/_quantity-update-variables.scss
  • Filesystem Path: build/components/Organisms/quantity-update/_quantity-update-variables.scss
  • Size: 1.6 KB
  • Content:
    @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;
        }
    }
    
  • URL: /components/raw/quantity-update/_quantity-update.scss
  • Filesystem Path: build/components/Organisms/quantity-update/_quantity-update.scss
  • Size: 2.3 KB
  • Content:
    '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);
      });
    })();
    
  • URL: /components/raw/quantity-update/quantity-update.js
  • Filesystem Path: build/components/Organisms/quantity-update/quantity-update.js
  • Size: 1.8 KB

There are no notes for this item.