<article class="product-snippet product-snippet--multicolor" data-initcolor="0">
    <div class="product-snippet__header">
        <div class="product-snippet__slider swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="product-snippet__visual">
                        <a href="#black" class="product-snippet__image">
                            <picture class="visual">
                                <img data-sizes="auto" data-src="https://via.placeholder.com/200x150/000000" class="lazyload" alt="">
                            </picture>

                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="product-snippet__visual">
                        <a href="#red" class="product-snippet__image">
                            <picture class="visual">
                                <img data-sizes="auto" data-src="https://via.placeholder.com/200x150/ff0000" class="lazyload" alt="">
                            </picture>

                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="product-snippet__visual">
                        <a href="#green" class="product-snippet__image">
                            <picture class="visual">
                                <img data-sizes="auto" data-src="https://via.placeholder.com/200x150/00ff00" class="lazyload" alt="">
                            </picture>

                        </a>
                    </div>
                </div>
            </div>

            <div class="product-snippet__arrows">
                <span class="product-snippet__arrow product-snippet__arrow--prev">
                    <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                        <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                    </svg>

                    <span class="screen-reader-text">Previous</span>
                </span>

                <span class="product-snippet__arrow product-snippet__arrow--next">
                    <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                        <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                    </svg>

                    <span class="screen-reader-text">Next</span>
                </span>
            </div>
        </div>

        <div class="product-snippet__colors">
            <span class="product-snippet__color">
                <span class="radio-color radio-color--small" style="background: #000000;" title=""></span>

            </span>
            <span class="product-snippet__color">
                <span class="radio-color radio-color--small" style="background: #ff0000;" title=""></span>

            </span>
            <span class="product-snippet__color">
                <span class="radio-color radio-color--small" style="background: #00ff00;" title=""></span>

            </span>
        </div>
    </div>

    <div class="product-snippet__content">
        <h4 class="product-snippet__heading heading">
            <span class="product-snippet__label">
                <a href="#black" class="link link--default">
                    <span class="link__label">CDJ-2000NXS2-K</span>
                </a>

            </span>
            <span class="product-snippet__label">
                <a href="#red" class="link link--default">
                    <span class="link__label">CDJ-2000NXS2-R</span>
                </a>

            </span>
            <span class="product-snippet__label">
                <a href="#green" class="link link--default">
                    <span class="link__label">CDJ-2000NXS2-G</span>
                </a>

            </span>
        </h4>

        <span class="product-snippet__price">€ 1999</span>

        <div class="product-snippet__description">
            Pro-DJ multi player with high-res audio support
        </div>
    </div>

    <div class="product-snippet__actions actions actions--start">
        <div class="actions__item">
            <a href="" class="link link--colored">
                <span class="link__label">Buy now</span>
            </a>

        </div>
    </div>
</article>
<article class="product-snippet{{#if multicolor}} product-snippet--multicolor{{/if}}" data-initcolor="0">
  <div class="product-snippet__header">
    {{#unless multicolor}}
      <div class="product-snippet__visual">
        <a href="https://pioneerdj.com" class="product-snippet__image">
          {{render '@visual' visual merge=true }}
        </a>
      </div>
    {{else}}
      <div class="product-snippet__slider swiper-container">
        <div class="swiper-wrapper">
          {{#each multicolor}}
            <div class="swiper-slide">
              <div class="product-snippet__visual">
                <a href="{{ this.url }}" class="product-snippet__image">
                  {{render '@visual' this merge=true }}
                </a>
              </div>
            </div>
          {{/each}}
        </div>

        <div class="product-snippet__arrows">
          <span class="product-snippet__arrow product-snippet__arrow--prev">
            {{render '@icon-chevron' }}
            <span class="screen-reader-text">Previous</span>
          </span>

          <span class="product-snippet__arrow product-snippet__arrow--next">
            {{render '@icon-chevron' }}
            <span class="screen-reader-text">Next</span>
          </span>
        </div>
      </div>

      <div class="product-snippet__colors">
        {{#each multicolor}}
          <span class="product-snippet__color">
            {{render '@radio-color' this.radio-color }}
          </span>
        {{/each}}
      </div>
    {{/unless}}
  </div>

  <div class="product-snippet__content">
    <h4 class="product-snippet__heading heading">
      {{#if multicolor}}
        {{#each multicolor}}
          <span class="product-snippet__label">
            {{render '@link' this merge=true }}
          </span>
        {{/each}}
      {{else}}
        {{render '@link' heading merge=true }}
      {{/if}}
    </h4>

    {{#if price}}
    <span class="product-snippet__price">{{ price }}</span>
    {{/if}}

    {{#if description}}
    <div class="product-snippet__description">
      {{ description }}
    </div>
    {{/if}}
  </div>

  {{#if action }}
  <div class="product-snippet__actions actions actions--start">
    <div class="actions__item">
      {{render '@link--colored' action merge=true }}
    </div>
  </div>
  {{/if}}
</article>
visual:
  src: /graphics/product-snippet.png
heading:
  url: ''
  label: CDJ-2000NXS2
  modifier: default
price:  1999
description: Pro-DJ multi player with high-res audio support
action:
  url: ''
  label: Buy now
multicolor:
  - id: black
    label: CDJ-2000NXS2-K
    src: https://via.placeholder.com/200x150/000000
    url: '#black'
    radio-color:
      color: '#000000'
      size: small
  - id: red
    label: CDJ-2000NXS2-R
    src: https://via.placeholder.com/200x150/ff0000
    url: '#red'
    radio-color:
      color: '#ff0000'
      size: small
  - id: blue
    label: CDJ-2000NXS2-G
    src: https://via.placeholder.com/200x150/00ff00
    url: '#green'
    radio-color:
      color: '#00ff00'
      size: small
  • Content:
    const PRODUCTSNIPPET = ((w, d, undefined) => {
    
      'use strict';
    
      const selectors = {
        theWrap: '.product-snippet--multicolor',
        theSlider: '.product-snippet__slider',
        theArrowPrev: '.product-snippet__arrow--prev',
        theArrowNext: '.product-snippet__arrow--next',
        theColor: '.product-snippet__color',
        theLabel: '.product-snippet__label',
      };
    
      const classes = {
        isActive: 'is-active',
      };
    
      const els = {};
    
      const s = {};
    
      const init = () => {
        els.theWraps = d.querySelectorAll(selectors.theWrap);
    
        [...els.theWraps].forEach((theWrap) => {
          const theSlider = theWrap.querySelector(selectors.theSlider);
          const theColors = theWrap.querySelectorAll(selectors.theColor);
          const theLabels = theWrap.querySelectorAll(selectors.theLabel);
    
          const theSwiper = new Swiper(theSlider, {
            loop: true,
            simulateTouch: false,
            initialSlide: ~~theWrap.dataset.initcolor || 0,
            navigation: {
              prevEl: selectors.theArrowPrev,
              nextEl: selectors.theArrowNext,
            },
            on: {
              activeIndexChange: (swiper) => {
                [...theColors].forEach((theColor, index) => {
                  if (swiper.realIndex === index) {
                    theColor.classList.add(classes.isActive);
                    theLabels[index].classList.add(classes.isActive);
                    return;
                  }
    
                  theColor.classList.remove(classes.isActive);
                  theLabels[index].classList.remove(classes.isActive);
                });
              },
            },
          });
    
          [...theColors].forEach((theColor, index) => {
            theColor.addEventListener('click', () => {
              theSwiper.slideTo(index + 1, 0);
            });
          });
        });
      };
    
      d.addEventListener('DOMContentLoaded', init);
    
    })(window, window.document);
    
  • URL: /components/raw/product-snippet/product-snippet.js
  • Filesystem Path: ../src/03_molecules/product-snippet/product-snippet.js
  • Size: 1.8 KB
  • Content:
    .product-snippet {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      user-select: none;
    }
    
    .product-snippet__header {
      .product-snippet--multicolor & {
        position: relative;
        overflow: hidden;
        background-color: #F7F7F7;
      }
    }
    
    .product-snippet__visual {
      flex: 0 0 auto;
      padding: var(--gap--8);
    
      .product-snippet:not(.product-snippet--multicolor) & {
        padding: 0 var(--gap--1);
        background-color: #F7F7F7;
    
        @media (min-width: 1100px) {
          padding: 0 var(--gap--2);
        }
      }
    }
    
    .product-snippet__image {
      transition: transform 700ms;
      position: relative;
      display: block;
      width: 100%;
      height: 0;
      padding-top: 100%;
      backface-visibility: hidden;
    
      .product-snippet__visual:hover & {
        @media (hover:hover) {
          transform: scale(1.05);
        }
      }
    
      img {
        object-fit: contain !important;
      }
    }
    
    .product-snippet__arrow {
      transform: translate(0, -50%);
      position: absolute;
      top: 50%;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
    }
    
    .product-snippet__arrow--prev {
      transform: translate(0, -50%) rotate(-180deg);
      left: calc((var(--gap--8) - 18px) / 2);
      cursor: pointer;
    }
    
    .product-snippet__arrow--next {
      right: calc((var(--gap--8) - 18px) / 2);
      cursor: pointer;
    }
    
    .product-snippet__colors {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      padding: var(--gap--3);
    }
    
    .product-snippet__color {
      display: block;
      margin-left: var(--gap--2);
      cursor: pointer;
    
      &:first-child {
        margin-left: 0;
      }
    }
    
    .product-snippet__content {
      flex: 1 1 auto;
      margin-top: var(--gap--6);
    }
    
    .product-snippet__heading {
      position: relative;
      display: inline-block;
      width: auto;
      font-size: 1em;
      font-weight: 700;
    }
    
    .product-snippet__heading:after {
      .product-snippet__inner:hover & {
        transform: translate(-50%, .75em);
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 100%;
        height: 1px;
        background-color: currentColor;
        content: '' !important;
        backface-visibility: hidden;
      }
    }
    
    .product-snippet__label {
      display: none;
    
      &.is-active {
        display: block;
      }
    }
    
    .product-snippet__price {
      display: block;
      margin: var(--gap--1) 0 var(--gap--2);
      color: var(--color--neutrals-6);
      font-size: .85714286em;
    }
    
    .product-snippet__description {
      width: 85%;
      font-size: .85714286em;
    }
    
    .product-snippet__actions {
      flex: 0 0 auto;
      margin-top: var(--gap--3);
      font-size: .85714286em;
    }
    
  • URL: /components/raw/product-snippet/product-snippet.scss
  • Filesystem Path: ../src/03_molecules/product-snippet/product-snippet.scss
  • Size: 2.5 KB

No notes defined.