Full

<div class="
        qty 
        input
    ">
    <label for="qty" class="
           label 
           input__label
        ">
        Qty
    </label>
    <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">
                <use 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">
                <use href="/images/icons-sprite.svg#plus"></use>
            </svg>

        </button>

    </div>
</div>

<script src="/components/raw/quantity-update/../quantity-update/quantity-update.js"></script>
<div 
    class="
        qty 
        {{ qtyClass }}
    "
>
    <label 
        for="{{ input.id }}"
        class="
           label 
           input__label
        "
    >
        {{ qtyLabel }}
    </label>
    <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>
</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",
      "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",
      "class": "button__icon quantity-update__icon",
      "hidden": true
    }
  },
  "script": true,
  "qtyClass": "input",
  "qtyLabel": "Qty"
}
  • 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-style      : $border-style-base !default;
    $quantity-update__button-border-color      : $border-color-base !default;
    $quantity-update__button-border-width      : $border-width-base !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.5 KB
  • Content:
    @import 'quantity-update-variables';
    
    .quantity-update {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        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 {
            .quantity-update__input {
                border: $quantity-update__border--active;
            }
        }
    
        &--no-buttons-m {
            @include mq($screen-m) {
                .quantity-update {
                    &__button {
                        display: none;
                    }
    
                    &__input {
                        border-width: $border-width-base;
                    }
                }
            }
    
            @include mq($screen-xxl) {
                .quantity-update {
                    &__button {
                        display: flex;
                    }
    
                    &__input {
                        border-width: $quantity-update__input-border-width;
                    }
                }
            }
        }
    
        &__input {
            flex-grow: 1;
            order: 2;
            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-style: $quantity-update__button-border-style;
            border-color: $quantity-update__button-border-color;
            border-width: $quantity-update__button-border-width;
    
            &:focus {
                border-color: $quantity-update__button-border-color;
            }
    
            &--plus {
                border-left: 0;
                order: 3;
            }
    
            &--minus {
                border-right: 0;
                order: 1;
            }
        }
    
        &__alert {
            @include visually-hidden();
        }
    
        // 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;
            order: 4;
        }
    }
    
  • URL: /components/raw/quantity-update/_quantity-update.scss
  • Filesystem Path: build/components/Organisms/quantity-update/_quantity-update.scss
  • Size: 3.2 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

No notes defined.