Vechtsport Online Components for Magento 2

Marketing Bar 

<div class="marketing-bar marketing-bar--closed" data-type="marketing-bar">
    <div class="container marketing-bar__container">
        <div class="marketing-bar__text">
            Subscribe and get 10$ for Shopping!
        </div>
        <button class="button button--icon marketing-bar__close" type="button" aria-label="Close marketing bar">

            <svg class="icon marketing-bar__close-icon" role="img">
                <title>Close</title>
                <use xlink:href="/images/icons-sprite.svg#close"></use>
            </svg>

        </button>

    </div>
</div>
<script src="/components/raw/marketing-bar/marketing-bar.js"></script>
 
<div class="marketing-bar {{ class }}" {{{ attributes }}}>
    <div class="container marketing-bar__container">
        <div class="marketing-bar__text">
            {{ text }}
        </div>
        {{ render '@button--icon' closeButton }}
    </div>
</div>
<script src="{{static 'marketing-bar.js' }}"></script>
 
{
  "closeIcon": "close",
  "text": "Subscribe and get 10$ for Shopping!",
  "class": "marketing-bar--closed",
  "attributes": "data-type=\"marketing-bar\"",
  "closeButton": {
    "tag": "button",
    "text": "",
    "class": "button--icon marketing-bar__close",
    "icon": {
      "id": "close",
      "title": "Close",
      "class": "marketing-bar__close-icon"
    },
    "attributes": "type=\"button\" aria-label=\"Close marketing bar\""
  }
}
  • Content: 
    $marketing-bar__padding             : $spacer !default;
$marketing-bar__background-color    : $color-primary !default;

$marketing-bar__text-padding        : 0 32px 0 0 !default;
$marketing-bar__text-padding--medium: 0 !default;
$marketing-bar__text-font-size      : $font-size-base !default;
$marketing-bar__text-font-color     : $gray-darker !default;
$marketing-bar__text-font-weight    : $font-weight-bold !default;

$marketing-bar__button-size         : 32px !default;
$marketing-bar__button-icon-color   : $gray-darker !default;
$marketing-bar__button-icon-size    : 18px !default;
$marketing-bar__button-icon-padding : 2px !default;

.marketing-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: $marketing-bar__padding;
    background-color: $marketing-bar__background-color;
    @include mq($screen-m) {
        text-align: center;
    }
    &--closed {
        display: none;
    }

    &__container {
        position: relative;
        width: 100%;
    }

    &__text {
        padding: $marketing-bar__text-padding;
        font-size: $marketing-bar__text-font-size;
        font-weight: $marketing-bar__text-font-weight;
        color: $marketing-bar__text-font-color;
        @include mq($screen-m) {
            padding: $marketing-bar__text-padding--medium;
        }
    }

    &__close {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        height: $marketing-bar__button-size;
        min-width: $marketing-bar__button-size;
        margin: auto;
        border: none;
        background-color: transparent;

        &:focus,
        &:hover {
            background-color: transparent;
        }

        &-icon {
            width: $marketing-bar__button-icon-size;
            height: $marketing-bar__button-icon-size;
            padding: $marketing-bar__button-icon-padding;
            fill: $marketing-bar__button-icon-color;
        }
    }
}
  • URL: /components/raw/marketing-bar/_marketing-bar.scss
  • Filesystem Path: build/components/02-elements/marketing-bar/_marketing-bar.scss
  • Size: 2 KB
  • Content: 
    'use strict'
class MarketingBar {
  constructor() {
    this.closing = document.querySelectorAll('.marketing-bar__close');
    this.bars = document.querySelectorAll('.marketing-bar');

    this.start();
  }
  closeBar(el) {
    const marketingBar = el.currentTarget.parentElement.parentElement,
          dataType      = marketingBar.dataset.type,
          focusable     = document.querySelectorAll('button:not([disabled]), a[href], area[href] input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex]:not([tabindex="-1"]), object, embed, *[contenteditable]');

    marketingBar.classList.add('marketing-bar--closed');
    localStorage.setItem(dataType, 'closed');
    // after closing message box move focus on first visible focusable element on the page
    if (focusable.length) {
      let firstFocusable = [ ...focusable].find(el => {
        return el.offsetParent !== null
      })
      firstFocusable.focus();
    }
  }
  setListeners() {
    this.closing.forEach(el => {
      el.addEventListener('click', this.closeBar);
    });
  }
  start() {
    // Display message if it wasn't closed before
    this.bars.forEach(el => {
      const dataType = el.dataset.type;
      if (localStorage.getItem(dataType) !== 'closed') {
        el.classList.remove('marketing-bar--closed')
      }
    });
    this.setListeners();
  }
}
new MarketingBar();
  • URL: /components/raw/marketing-bar/marketing-bar.js
  • Filesystem Path: build/components/02-elements/marketing-bar/marketing-bar.js
  • Size: 1.4 KB

There are no notes for this item.