Product Slider

Slider de produtos padrão

Nesse slider estamos fazendo a inclusão do elemento 'product-card' dentro de 'swiper-slide'. Você poderá usar o seu próprio card de produto, que se encontra em 'Elementos > template > product card', ou alterá-lo com os códigos das abas 'Product Card HTML' e 'Product Card CSS', para que o card seja igual ao que estamos demonstrando na prévia.

Informação importante

Como estamos utilizando a chamada do CMS em _cms('products', 'produtos do slide'), é fundamental compreender que os produtos exibidos neste slider serão alimentados através do CMS. Por exemplo, se você estiver utilizando o slider na página "Home", poderá encontrar o conteúdo da vitrine para adicionar ou atualizar os produtos correspondentes navegando no painel da Increazy, no menu "Layout > CMS > Home".

Preview

HTML

{% set productSlider = _cms('products', 'produtos do slide') %}

{% if productSlider.content %}
    <div class="products__slider-{{ id }}" data-product-list="{{ id }}">
        <div class="showcase__slider">
            <div class="swiper">
                <div class="swiper-wrapper">
                    {% for product in productSlider.content %}
                        <div class="swiper-slide">
                            {% include 'template/product card' %}
                        </div>
                    {% endfor %}
                </div>

                <div class="swiper-button-next">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.7813 8.66688L2.66665 8.66688L2.66665 7.33355L10.7813 7.33355L7.20531 3.75755L8.14798 2.81488L13.3333 8.00021L8.14798 13.1855L7.20531 12.2429L10.7813 8.66688Z" fill="black"/>
                    </svg>
                </div>

                <div class="swiper-button-prev">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.21869 7.33361H13.3334V8.66694H5.21869L8.79469 12.2429L7.85202 13.1856L2.66669 8.00027L7.85202 2.81494L8.79469 3.75761L5.21869 7.33361Z" fill="black"/>
                    </svg>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
{% endif %}

CSS

.showcase__slider {
  position: relative;
  width: 100%;
} 

.showcase__slider .swiper {
  width: 100%;
  padding: 0 24px 38px 24px;
  position: relative;
}

.showcase__slider .swiper-pagination-bullet {
  width: 12px;
  height: 6px;
  border-radius: 24px;
  background-color: #E6E6E6;
  opacity: 1;
}

.showcase__slider .swiper-pagination-bullet-active {
  background-color: #2C2C2C;
}

.showcase__slider .swiper-button-next,
.showcase__slider .swiper-button-prev {
  background-color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 800px;
  border: 1px solid #E6E6E6;
  box-shadow: 0px 1px 8px 0px #0000001F;
}

.showcase__slider .swiper-button-next {
right: 0;
}

.showcase__slider .swiper-button-prev { 
left: 0;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: '';
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: '';
}

.showcase__slider .swiper-pagination{
  bottom: 0px!important;
}

/**
* ----------------------------------------
*         mobile  breaKpoints
* ----------------------------------------
*/ 
@media (max-width: 1024px) {
  .showcase__slider .swiper .swiper-slide {
    width: 264px;
  }

  .showcase__slider .swiper-slide {
    min-width: 264px;
  } 
 
  .showcase__slider,
  .showcase__slider .swiper {
      padding: 0;
      min-width: -webkit-fill-available;
      padding-bottom: 35px;
  }
}

Javascript

function initShowcaseSlider(showCaseID) {
  _dom('Swiper').waitVariable(() => {
    new Swiper(`.products__slider-${showCaseID} .swiper`, {
      slidesPerView: window.innerWidth < 1024 ? 'auto' : 4,
      spaceBetween: 20,
      centeredSlides: window.innerWidth < 768 ? true : false,
      loopFillGroupWithBlank: true,
      pagination: {
        el: `.products__slider-${showCaseID} .swiper-pagination`,
        clickable: true,
      },
      navigation: {
        nextEl: `.products__slider-${showCaseID} .swiper-button-next`,
        prevEl: `.products__slider-${showCaseID} .swiper-button-prev`,
      },
    })
  });
}

document.querySelectorAll('*[data-product-list]').forEach(i => {
  initShowcaseSlider(i.getAttribute('data-product-list'));
});

Product Card HTML

{% set customerGroup = cookies.customer_group ? cookies.customer_group : null %}
{% set desconto = _price('discount', product) %}

<article class="card {{ desconto ? 'card--sale' : ''}}{{ product.stock.has ? '' : 'card--nostock'}}">
  <div class="card__tags">
      <span class="card__sale">
        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M7.26661 0.400002L13.8659 1.34334L14.8086 7.94334L8.68061 14.0713C8.55559 14.1963 8.38605 14.2665 8.20927 14.2665C8.0325 14.2665 7.86296 14.1963 7.73794 14.0713L1.13794 7.47134C1.01296 7.34632 0.942749 7.17678 0.942749 7C0.942749 6.82323 1.01296 6.65369 1.13794 6.52867L7.26661 0.400002ZM7.73794 1.81467L2.55194 7L8.20927 12.6567L13.3946 7.47134L12.6879 2.52134L7.73794 1.81467ZM9.15127 6.05733C8.90117 5.80715 8.7607 5.46786 8.76077 5.1141C8.7608 4.93894 8.79533 4.7655 8.86239 4.60368C8.92945 4.44186 9.02773 4.29484 9.15161 4.171C9.27549 4.04716 9.42255 3.94894 9.58439 3.88194C9.74623 3.81493 9.91968 3.78047 10.0948 3.7805C10.4486 3.78056 10.7878 3.92115 11.0379 4.17133C11.288 4.42152 11.4285 4.76082 11.4284 5.11457C11.4284 5.46833 11.2878 5.80757 11.0376 6.05767C10.7874 6.30777 10.4481 6.44824 10.0944 6.44817C9.74061 6.44811 9.40137 6.30752 9.15127 6.05733Z"
              fill="white" />
        </svg>
        Sale
      </span>
      <span class="card__outofstock">Out of stock</span>

      <span class="card__favorite" 
            title="Adicionar aos favoritos" 
            onclick="toggleWishlist(event)"
            data-favorites="{{ product.id }}"
            data-favorites-data="{{ _object(_only(product, 'id')) }}">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_2423_1506)">
              <path
                  d="M8.00071 3.01934C9.56671 1.61334 11.9867 1.66 13.4954 3.17134C15.0034 4.68334 15.0554 7.09134 13.6527 8.662L7.99938 14.3233L2.34738 8.662C0.944711 7.09134 0.997378 4.67934 2.50471 3.17134C4.01471 1.662 6.43005 1.61134 8.00071 3.01934ZM12.5514 4.11334C11.5514 3.112 9.93804 3.07134 8.89138 4.01134L8.00138 4.81L7.11071 4.012C6.06071 3.07067 4.45071 3.112 3.44804 4.11467C2.45471 5.108 2.40471 6.698 3.32004 7.74867L8.00004 12.436L12.68 7.74934C13.596 6.698 13.546 5.11 12.5514 4.11334Z"
                  fill="black" />
            </g>
            <defs>
              <clipPath id="clip0_2423_1506">
                  <rect width="16" height="16" fill="white" />
              </clipPath>
            </defs>
        </svg>
      </span>
  </div>

  <a {{ _href(product) }}>
      <figure class="card__image">
       <img class="card__img"
          src="{{ _image(product.media[0].cached, 'w=220') }}"
          alt="{{ product.name }}" loading="lazy"
          onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
        />
      </figure>
      <div class="card__details">
        <h3 class="card__description">{{ product.name | raw }}</h3>
        <span class="card__attribute">Home</span>

        {% set maiorParcela = _price('installments', product, true, customerGroup) | last %}
        <div class="card__pricing">
            <h4 class="pricing__current">{{ _price('min', product, true, customerGroup) }}</h4>
            {% if desconto > 1 %}
                <span class="pricing__old">{{ _price('max', product) }}</span>
            {% endif %}
        </div>
      </div>
  </a>
</article>

Product Card CSS

.card {
   display: flex;
   flex-flow: column;
   width: 100%;
   height: auto;
   overflow: hidden;
   border: 1px solid #E6E6E6;
   border-radius: 4px;
   transition: all linear 150ms;
   position: relative;
   user-select: none;
   margin: 0;
}

.card.card--sale .card__sale,
.card.card--nostock .card__outofstock {
   display: flex;
}

.card.card--sale.card--nostock .card__sale {
   display: none;
}

.card.card--nostock .card__image {
   opacity: 0.5;
}

.card .card__tags {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   left: 0;
   top: 0;
   min-height: 40px;
   padding: 8px;
   z-index: 5;
}

.card__tags .card__sale {
   display: none;
   align-items: center;
   gap: 8px;
   background-color: #28B95E;
   color: #fff;
   font-family: inherit;
   font-weight: 500;
   font-size: 14px;
   line-height: 19.6px;
   padding: 6px 8px;
   border-radius: 4px;
   cursor: default;
   pointer-events: all;
}

.card__tags .card__outofstock {
   display: none;
   align-items: center;
   gap: 8px;
   background-color: #FFBBBB;
   color: #D60000;
   font-family: inherit;
   font-weight: 500;
   font-size: 14px;
   line-height: 19.6px;
   padding: 6px 8px;
   border-radius: 4px;
   cursor: default;
   pointer-events: all;
}

.card__tags .card__favorite {
   width: max-content;
   padding: 8px;
   border-radius: 4px;
   margin-left: auto;
   background-color: #fff;
   border: 1px solid #E6E6E6;
   cursor: pointer;
   height: auto;
   max-height: 32px;
}

.card .card__image {
  display: flex;
   width: 100%;
   overflow: hidden;
   height: auto;
   background-color: #F5F5F5;
}

.card .card__img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.card .card__details {
  border-top: 1px solid #E6E6E6;
  padding: 12px 16px 16px 16px;
}

.card .card__description {
   font-family: inherit;
   font-size: 16px;
   font-weight: 600;
   line-height: 22.4px;
   color: #000000;
   margin-bottom: 12px;
   overflow: hidden;
   min-height: 45px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.card .card__attribute {
   font-family: inherit;
   font-size: 14px;
   font-weight: 400;
   line-height: 19.6px;
   color: #757575;
}

.card .card__rating {
   margin-bottom: 12px;
}

.card .card__pricing {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-wrap: wrap;
   gap: 4px;
   width: 100%;
}

.card__pricing .pricing__current {
   font-family: inherit;
   font-size: 16px;
   font-weight: 400;
   line-height: 22.4px;
   color: #2c2c2c;
   overflow: hidden;
}

.card.card--sale .pricing__current {
   color: #28B95E;
}

.card__pricing .pricing__old {
   font-family: inherit;
   font-size: 12px;
   font-weight: 400;
   line-height: 16.8px;
   color: #8E8E8E;
   text-decoration: line-through;
   display: none;
}

.card.card--sale .pricing__old {
   display: block;
}

@media (max-width: 1024px){
   .card .card__description {
      font-size: 14px;
      font-weight: 500;
      line-height: 19.6px;
      color: #434343;
   }
}