cruc components for Magento 2

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"
>
        <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>
</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",
      "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,
  "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                    : $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-left: 0;
        }

        &--minus {
            border-right: 0;
        }
    }

    // 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.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

There are no notes for this item.