PDJ Brandbox

product-snippet: multicolor 

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