Product Slider

Utilização do Carrossel Increazy

Para utilizar o Carrossel Increazy é necessário importar o código dentro da IDE e seguir as orientações de uso.
Você pode encontrar tudo em Carousel.

Slider de produtos padrão

Nesse slider estamos fazendo a inclusão do elemento 'product-card' dentro de 'products__slider-card'. 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-container">
        <div class="products__slider-gallery">
            <div class="products__slider-inner">
                {% for product in productSlider.content %}
                    <div class="products__slider-card">
                        {% include 'template/product card' %}
                    </div>
                {% endfor %}
            </div>
        </div>

        <div class="products__slider-arrow products__slider-arrow--prev">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg>
        </div>

        <div class="products__slider-arrow products__slider-arrow--next">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg>
        </div>

        <div class="products__slider-pagination"></div>
    </div>
{% endif %}

CSS

.products__slider-body {
    width: 90%;
    height: 90%;
}

.products__slider-container {
  padding-block: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.products__slider-gallery {
  width: 100%;
  overflow: hidden;
  user-select: none;
}

.products__slider-inner {
  display: flex;
  justify-content: flex-start;
  gap: 30px;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  margin: 0;
  padding: 0;
}

.products__slider-card {
  flex-shrink: 0;
  width: calc((100% - 90px) / 4);
  box-sizing: border-box;
}

.products__slider-arrow {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  user-select: none;
  -webkit-user-select: none;
}

.products__slider-arrow svg {
  width: 20px;
  height: 20px;
  color: #000000;
}

.products__slider-arrow--prev {
  left: 15px;
}

.products__slider-arrow--next {
  right: 15px;
}

.products__slider-pagination {
  width: max-content;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  height: 20px;
  margin-inline: auto;
}

.products__slider-pagination .increazy-carousel-bullet {
  width: 16px;
  min-width: 16px;
  height: 16px;
  border: 1px solid #e6e6e6;
  border-radius: 100%;
  transition: all .3s ease;
  background-color: #ffffff;
  cursor: pointer;
}

.products__slider-pagination .increazy-carousel-bullet-active {
  background-color: #000000;
  border-color: #000000;
}

/* MOBILE BREAKPOINTS */
@media (max-width: 1024px) {
  .products__slider-inner {
    gap: 15px;
  }

  .products__slider-card {
    width: calc((100% - 30px) / 3);
  }
}

@media (max-width: 768px) {
  .products__slider-card {
    width: calc((100% - 15px) / 2);
  }

  .products__slider-arrow {
    display: none;
  }
}

@media (max-width: 560px) {
  .products__slider-inner {
    gap: 0;
  }

  .products__slider-card {
    width: 100%;
  }
}

Javascript

_dom('UniversalIncreazyCarousel').waitVariable(function () {
  const increazyCarousel = new UniversalIncreazyCarousel({
      gallery: document.querySelector('.products__slider-gallery'),
      galleryInner: document.querySelector('.products__slider-inner'),
      prevBtn: document.querySelector('.products__slider-arrow--prev'),
      nextBtn: document.querySelector('.products__slider-arrow--next'),
      pagination: document.querySelector('.products__slider-pagination'),
      breakpoints: {
          0: { slidesVisible: 1, gap: 0 },
          561: { slidesVisible: 2, gap: 15 },
          769: { slidesVisible: 3, gap: 15 },
          1025: { slidesVisible: 4, gap: 30 }
      }
  });
});

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;
   }
}