Vechtsport Online Components for Magento 2

Quantity Update 

<div class="quantity-update ">

    <input class="quantity-update__input " type="number" id="qty" min="1" value="1" aria-label="Change the quantity" />

    <div class="quantity-update__buttons">
        <button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">

            <svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
                <title>Arrow up</title>
                <use xlink:href="/images/icons-sprite.svg#angle-up"></use>
            </svg>

        </button>
        <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 minicart-product__qty--buttonIcon" role="img">
                <title>Arrow down</title>
                <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
            </svg>

        </button>
    </div>

</div>
<script src="/components/raw/button/../quantity-update/quantity-update.js"></script>
 
<div class="quantity-update {{ class }}" {{{ attributes }}}>

    <input class="quantity-update__input {{ input.class }}"
           type="number"
           id="{{ input.id }}"
           min="{{ input.min }}"
           value="{{ input.defaultValue }}"
           aria-label="{{ input.ariaLabel }}"
    />

    <div class="quantity-update__buttons">
        {{> '@button--icon' plusQtyButton }}
        {{> '@button--icon' minusQtyButton }}
    </div>
    
</div>
{{#if script}}
    <script src="{{ static '../quantity-update/quantity-update.js' }}"></script>
{{/if}}
 
{
  "input": {
    "id": "qty",
    "min": "1",
    "defaultValue": "1",
    "ariaLabel": "Change the quantity"
  },
  "minusQtyButton": {
    "tag": "button",
    "class": "button--icon quantity-update__button quantity-update__button--minus quantity-update__button--disabled",
    "attributes": "type=\"button\" aria-label=\"Decrease the quantity\"",
    "icon": {
      "id": "angle-down",
      "title": "Arrow down",
      "class": "button__icon minicart-product__qty--buttonIcon"
    }
  },
  "plusQtyButton": {
    "tag": "button",
    "class": "button--icon quantity-update__button quantity-update__button--plus",
    "attributes": "type=\"button\" aria-label=\"Increase the quantity\"",
    "icon": {
      "id": "angle-up",
      "title": "Arrow up",
      "class": "button__icon minicart-product__qty--buttonIcon"
    }
  },
  "script": true
}
  • Content: 
    // Input
$quantity-update__input-border                       : 1px solid $gray-dark !default;
$quantity-update__input-width                        : 48px !default;
$quantity-update__input-height                       : 34px !default;
$quantity-update__input-color                        : $gray-dark !default;
$quantity-update__input-padding                      : $spacer !default;

// Button
$quantity-update__button-background                  : $white !default;
$quantity-update__button-border                      : 1px solid $gray-dark !default;
$quantity-update__button-background-hover--disabled  : $white !default;
$quantity-update__button-fill-hover--disabled        : $gray !default;

// Icon
$quantity-updater__icon-fill                         : $gray-dark !default;
$quantity-updater__icon-spacing                      : 12px !default;

// Error
$quantity-updater__error-margin                      : 0 0 0 $spacer !default;
$quantity-updater__error-max-width                   : 120px !default;



.quantity-update {
    display: flex;

    & .input {
        margin-bottom: 0;
    }

    &__input {
        color: $quantity-update__input-color;
        appearance: none;

        padding: $quantity-update__input-padding;
        width: $quantity-update__input-width;
        height: $quantity-update__input-height;

        border-radius: 3px;
        border: 5px solid #ececec;
        text-align: center;
        font-family: $font-family-saira;


        &:focus {
            @include focus-input();
        }
    }

    &_buttons {
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
    }

    &__button {
        margin: 0;
        background: #8b8b8b;
        height: 17px;
        width: 26px;
        min-width: 26px;
        padding: 0;

        &:focus {
            @include focus-input();
        }

        &--plus {
            border-radius: 0 3px 0 0;
        }

        &--minus {
            border-radius: 0 0 3px 0;
        }

        &--disabled {
            pointer-events: none;

            &:hover,
            &:focus {
                background: $quantity-update__button-background-hover--disabled;

                .quantity-update__icon {
                    fill: $quantity-update__button-fill-hover--disabled;
                }
            }

            .quantity-update__icon {
                fill: $quantity-update__button-fill-hover--disabled;
            }
        }
    }

    &__icon {
        fill: $quantity-updater__icon-fill;
        width: $quantity-updater__icon-spacing;
        height: $quantity-updater__icon-spacing;
    }

    div.mage-error {
        order: 1;
        margin: $quantity-updater__error-margin;
        max-width: $quantity-updater__error-max-width;
    }

    // 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
    }
}
  • URL: /components/raw/quantity-update/_quantity-update.scss
  • Filesystem Path: build/components/03-modules/quantity-update/_quantity-update.scss
  • Size: 3.3 KB
  • Content: 
    'use strict';
class QuantityUpdate {
  constructor(htmlDivElement) {
    this.plus  = htmlDivElement.querySelector('.quantity-update__button--plus');
    this.minus = htmlDivElement.querySelector('.quantity-update__button--minus');
    this.input = htmlDivElement.querySelector('.quantity-update__input');
    this.events();
    this.evaluateConditions();
  }
  events() {
    this.plus.addEventListener('click', () => {
      this.increment();
      this.evaluateConditions();
    });
    this.minus.addEventListener('click', () => {
      this.decrement();
      this.evaluateConditions();
    });
  }
  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/03-modules/quantity-update/quantity-update.js
  • Size: 1.2 KB

There are no notes for this item.