<div class="payment-faqs js-payment-faqs">
    <h2 class="payment-faqs__title">FAQs</h2>
    <div class="payment-faqs__content-wrapper js-payment-faqs-content-wrapper js-payment-faqs-content-wrapper--active">
        <button class="payment-faqs__control js-payment-faqs-control">
      Security Payment
      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

    </button>
        <div class="payment-faqs__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus.
            <ul class="payment-faqs__payment-methods">
                <li class="payment-faqs__payment-method"><img class="payment-method payment-method--visa" src="/assets/images/payment-method-visa.png" alt="">
                </li>
                <li class="payment-faqs__payment-method"><img class="payment-method payment-method--mastercard" src="/assets/images/payment-method-mastercard.png" alt="">
                </li>
                <li class="payment-faqs__payment-method"><img class="payment-method payment-method--amex" src="/assets/images/payment-method-amex.png" alt="">
                </li>
                <li class="payment-faqs__payment-method"><img class="payment-method payment-method--discover" src="/assets/images/payment-method-discover.png" alt="">
                </li>
                <li class="payment-faqs__payment-method"><img class="payment-method payment-method--verisign" src="/assets/images/payment-method-verisign.png" alt="">
                </li>
            </ul>
        </div>
    </div>
    <div class="payment-faqs__content-wrapper js-payment-faqs-content-wrapper">
        <button class="payment-faqs__control js-payment-faqs-control">
      Can We Help?
      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

    </button>
        <div class="payment-faqs__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus.
        </div>
    </div>
    <div class="payment-faqs__content-wrapper js-payment-faqs-content-wrapper">
        <button class="payment-faqs__control js-payment-faqs-control">
      Conditions of Sale
      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

    </button>
        <div class="payment-faqs__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus.
        </div>
    </div>
    <div class="payment-faqs__content-wrapper js-payment-faqs-content-wrapper">
        <button class="payment-faqs__control js-payment-faqs-control">
      Free Shipping and Returns
      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

    </button>
        <div class="payment-faqs__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus.
        </div>
    </div>
</div>
<div class="payment-faqs js-payment-faqs">
  <h2 class="payment-faqs__title">{{title}}</h2>
  {{#each items}}
  <div class="payment-faqs__content-wrapper js-payment-faqs-content-wrapper{{#if active}} js-payment-faqs-content-wrapper--active{{/if}}">
    <button class="payment-faqs__control js-payment-faqs-control">
      {{label}}
      {{render '@icons--arrow-up'}}
      {{render '@icons--arrow-down'}}
    </button>
    <div class="payment-faqs__content">
      {{content}}
      {{#if paymentMethods}}
      <ul class="payment-faqs__payment-methods">
        {{#each ../paymentMethods}}
        <li class="payment-faqs__payment-method">{{render (dynamicVariant 'payment-method' this)}}</li>
        {{/each}}
      </ul>
      {{/if}}
    </div>
  </div>
  {{/each}}
</div>
{
  "pageCss": [
    "checkout"
  ],
  "title": "FAQs",
  "items": [
    {
      "label": "Security Payment",
      "active": true,
      "paymentMethods": true,
      "content": [
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus."
      ]
    },
    {
      "label": "Can We Help?",
      "content": [
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus."
      ]
    },
    {
      "label": "Conditions of Sale",
      "content": [
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus."
      ]
    },
    {
      "label": "Free Shipping and Returns",
      "content": [
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus."
      ]
    }
  ],
  "paymentMethods": [
    "visa",
    "mastercard",
    "amex",
    "discover",
    "verisign"
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      const activeWrapperClass = 'js-payment-faqs-content-wrapper--active';
    
      function handleControl(e) {
        const control = e.target;
        const instance = control.closest('.js-payment-faqs');
        const contentWrappers = instance.querySelectorAll('.js-payment-faqs-content-wrapper');
    
        for (let i = 0; i < contentWrappers.length; i++) {
          if (contentWrappers[i].querySelector('.js-payment-faqs-control') == control) {
            contentWrappers[i].classList.add(activeWrapperClass);
          }
          else {
            contentWrappers[i].classList.remove(activeWrapperClass);
          }
        }
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-payment-faqs');
    
        for (let i = 0; i < instances.length; i++) {
          if (!instances[i].classList.contains('js-component-init')) {
            const controls = instances[i].querySelectorAll('.js-payment-faqs-control');
    
            for (let i = 0; i < controls.length; i++) {
              controls[i].addEventListener('click', handleControl);
            }
    
            instances[i].classList.add('js-component-init');
          }
        }
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/payment-faqs/payment-faqs.js
  • Filesystem Path: src/components/02-components/payment-faqs/payment-faqs.js
  • Size: 1.3 KB
  • Content:
    .payment-faqs__title {
      margin-top: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid $color-light;
      color: $color-dark;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
      text-shadow: none;
      text-transform: none;
    
      @include breakpoint($breakpoint-xl) {
        padding-bottom: 5px;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .payment-faqs__control {
      @include reset-button;
      position: relative;
      width: 100%;
      color: $color-darkest;
      font-size: 1.6rem;
      line-height: 5.0rem;
      text-align: left;
    
      .icon {
        position: absolute;
        top: 22px;
        right: 20px;
        fill: $color-darkest;
        pointer-events: none;
      }
    
      .icon--arrow-up {
        display: none;
      }
    
      .js-payment-faqs-content-wrapper--active & {
        .icon--arrow-down {
          display: none;
        }
    
        .icon--arrow-up {
          display: block;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 6.0rem;
      }
    }
    
    .payment-faqs__content-wrapper {
      border-bottom: 1px solid $color-light;
    }
    
    .payment-faqs__content {
      display: none;
      padding: 10px;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 1.7rem;
    
      .js-payment-faqs-content-wrapper--active & {
        display: block;
      }
    
      @include breakpoint($breakpoint-md) {
        padding: 10px 0;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .payment-faqs__payment-methods {
      @include clearfix;
      @include reset-list;
      margin-bottom: 10px;
    }
    
    .payment-faqs__payment-method {
      margin: 20px 20px 0 0;
      float: left;
    }
    
  • URL: /components/raw/payment-faqs/payment-faqs.scss
  • Filesystem Path: src/components/02-components/payment-faqs/payment-faqs.scss
  • Size: 1.6 KB

There are no notes for this item.