Product Card
Card de produto padrão
- Preview
- HTML
- CSS
{% 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__rating">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1023)">
<path d="M6.00002 9.13L2.47352 11.104L3.26102 7.14L0.293518 4.396L4.30702 3.92L6.00002 0.25L7.69302 3.92L11.7065 4.396L8.73902 7.14L9.52652 11.104L6.00002 9.13Z" fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1023">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1023)">
<path d="M6.00002 9.13L2.47352 11.104L3.26102 7.14L0.293518 4.396L4.30702 3.92L6.00002 0.25L7.69302 3.92L11.7065 4.396L8.73902 7.14L9.52652 11.104L6.00002 9.13Z" fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1023">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1023)">
<path d="M6.00002 9.13L2.47352 11.104L3.26102 7.14L0.293518 4.396L4.30702 3.92L6.00002 0.25L7.69302 3.92L11.7065 4.396L8.73902 7.14L9.52652 11.104L6.00002 9.13Z" fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1023">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1037)">
<path d="M6 7.328L7.4085 8.188L7.0255 6.583L8.279 5.5095L6.634 5.3775L6 3.854V7.328ZM6 8.5L3.061 10.295L3.85999 6.945L1.245 4.705L4.6775 4.43L6 1.25L7.3225 4.43L10.7555 4.705L8.14 6.945L8.939 10.295L6 8.5Z"
fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1037">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.99996 9.13L2.47346 11.104L3.26096 7.14L0.293457 4.396L4.30696 3.92L5.99996 0.25L7.69296 3.92L11.7065 4.396L8.73896 7.14L9.52646 11.104L5.99996 9.13ZM5.99996 7.984L8.12346 9.1725L7.64896 6.786L9.43546 5.1335L7.01896 4.847L5.99996 2.6375L4.98096 4.8475L2.56446 5.1335L4.35096 6.786L3.87646 9.1725L5.99996 7.984Z"
fill="#A7A7A7" />
</svg>
</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 > 0 %}
<span class="pricing__old">{{ _price('max', product) }}</span>
{% endif %}
</div>
<span class="card__installment">or {{ maiorParcela.qty }}x {{ _price('format', maiorParcela.price) }}</span>
</div>
</a>
</article>
.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: 400;
line-height: 22.4px;
color: #000000;
margin-bottom: 12px;
overflow: hidden;
min-height: 45px;
text-overflow: ellipsis;
}
.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: 20px;
font-weight: 500;
line-height: 28px;
color: #2c2c2c;
overflow: hidden;
}
.card.card--sale .pricing__current {
color: #28B95E;
}
.card__pricing .pricing__old {
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #8E8E8E;
text-decoration: line-through;
display: none;
}
.card.card--sale .pricing__old {
display: block;
}
.card .card__installment {
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #757575;
}
@media (max-width: 1024px){
.card__pricing .pricing__current {
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
}
.card__pricing .pricing__old {
font-size: 12px;
font-weight: 400;
line-height: 16.8px;
}
}
Card de produto padrão com botão
- Preview
- HTML
- CSS
{% 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>
Promoção
</span>
<span class="card__outofstock">Sem estoque</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__rating">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1023)">
<path d="M6.00002 9.13L2.47352 11.104L3.26102 7.14L0.293518 4.396L4.30702 3.92L6.00002 0.25L7.69302 3.92L11.7065 4.396L8.73902 7.14L9.52652 11.104L6.00002 9.13Z" fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1023">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1023)">
<path d="M6.00002 9.13L2.47352 11.104L3.26102 7.14L0.293518 4.396L4.30702 3.92L6.00002 0.25L7.69302 3.92L11.7065 4.396L8.73902 7.14L9.52652 11.104L6.00002 9.13Z" fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1023">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1023)">
<path d="M6.00002 9.13L2.47352 11.104L3.26102 7.14L0.293518 4.396L4.30702 3.92L6.00002 0.25L7.69302 3.92L11.7065 4.396L8.73902 7.14L9.52652 11.104L6.00002 9.13Z" fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1023">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1037)">
<path d="M6 7.328L7.4085 8.188L7.0255 6.583L8.279 5.5095L6.634 5.3775L6 3.854V7.328ZM6 8.5L3.061 10.295L3.85999 6.945L1.245 4.705L4.6775 4.43L6 1.25L7.3225 4.43L10.7555 4.705L8.14 6.945L8.939 10.295L6 8.5Z"
fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1037">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.99996 9.13L2.47346 11.104L3.26096 7.14L0.293457 4.396L4.30696 3.92L5.99996 0.25L7.69296 3.92L11.7065 4.396L8.73896 7.14L9.52646 11.104L5.99996 9.13ZM5.99996 7.984L8.12346 9.1725L7.64896 6.786L9.43546 5.1335L7.01896 4.847L5.99996 2.6375L4.98096 4.8475L2.56446 5.1335L4.35096 6.786L3.87646 9.1725L5.99996 7.984Z"
fill="#A7A7A7" />
</svg>
</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 > 0 %}
<span class="pricing__old">{{ _price('max', product) }}</span>
{% endif %}
</div>
<span class="card__installment">or {{ maiorParcela.qty }}x {{ _price('format', maiorParcela.price) }}</span>
<button class="{{ product.stock.has ? 'card__adder' : 'card__similars'}}" type="button">
{{ product.stock.has ? '
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.66664 4.27605L0.504639 2.11472L1.44797 1.17139L3.60931 3.33339H13.7706C13.8746 3.33338 13.977 3.35766 14.0699 3.4043C14.1627 3.45093 14.2434 3.51863 14.3055 3.60198C14.3675 3.68534 14.4092 3.78204 14.4272 3.88438C14.4453 3.98671 14.4391 4.09185 14.4093 4.19139L12.8093 9.52472C12.7681 9.66211 12.6838 9.78256 12.5687 9.86819C12.4537 9.95382 12.3141 10.0001 12.1706 10.0001H3.99997V11.3334H11.3333V12.6667H3.33331C3.15649 12.6667 2.98693 12.5965 2.8619 12.4715C2.73688 12.3464 2.66664 12.1769 2.66664 12.0001V4.27605ZM3.99997 4.66672V8.66672H11.6746L12.8746 4.66672H3.99997ZM3.66664 15.3334C3.40142 15.3334 3.14707 15.228 2.95953 15.0405C2.772 14.853 2.66664 14.5986 2.66664 14.3334C2.66664 14.0682 2.772 13.8138 2.95953 13.6263C3.14707 13.4387 3.40142 13.3334 3.66664 13.3334C3.93186 13.3334 4.18621 13.4387 4.37375 13.6263C4.56128 13.8138 4.66664 14.0682 4.66664 14.3334C4.66664 14.5986 4.56128 14.853 4.37375 15.0405C4.18621 15.228 3.93186 15.3334 3.66664 15.3334ZM11.6666 15.3334C11.4014 15.3334 11.1471 15.228 10.9595 15.0405C10.772 14.853 10.6666 14.5986 10.6666 14.3334C10.6666 14.0682 10.772 13.8138 10.9595 13.6263C11.1471 13.4387 11.4014 13.3334 11.6666 13.3334C11.9319 13.3334 12.1862 13.4387 12.3737 13.6263C12.5613 13.8138 12.6666 14.0682 12.6666 14.3334C12.6666 14.5986 12.5613 14.853 12.3737 15.0405C12.1862 15.228 11.9319 15.3334 11.6666 15.3334Z"
fill="white" />
</svg>
' : ''}}
{{product.stock.has ? 'Add to cart' : 'See similars'}}
</button>
</div>
</a>
</article>
.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: 400;
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__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: 20px;
font-weight: 500;
line-height: 28px;
color: #2c2c2c;
overflow: hidden;
}
.card.card--sale .pricing__current {
color: #28B95E;
}
.card__pricing .pricing__old {
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #8E8E8E;
text-decoration: line-through;
display: none;
}
.card.card--sale .pricing__old {
display: block;
}
.card .card__installment {
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #757575;
}
/*
* ----------------------------------
* CARD BÁSICO COM BOTÃO
* ----------------------------------
*/
.card .card__adder {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
margin-top: 12px;
background-color: #01141E;
color: #FFFFFF;
border: none;
outline: none;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
padding: 12px;
border-radius: 4px;
cursor: pointer;
}
.card .card__adder > svg path {
fill: #fff;
}
.card .card__adder > svg {
margin-bottom: 3px;
}
.card .card__similars {
display: block;
width: 100%;
text-align: center;
margin-top: 12px;
background-color: #fff;
color: #000000;
border: 1px solid #E6E6E6;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
outline: none;
padding: 12px;
border-radius: 4px;
transition: border linear 150ms;
pointer-events: all;
cursor: pointer;
}
.card .card__similars:is(:hover, :focus) {
border: 1px solid #01141E;
}
.card .card__similars > svg {
display: none;
}
@media (max-width: 1024px){
.card__pricing .pricing__current {
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
}
.card__pricing .pricing__old {
font-size: 12px;
font-weight: 400;
line-height: 16.8px;
}
}
Card de produto minimalista
- Preview
- HTML
- CSS
{% 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>
.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;
}
}
Card de produto minimalista com botão
- Preview
- HTML
- CSS
{% 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>
<button class="{{ product.stock.has ? 'card__adder' : 'card__similars'}}" type="button">
{{ product.stock.has ? '
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.66664 4.27605L0.504639 2.11472L1.44797 1.17139L3.60931 3.33339H13.7706C13.8746 3.33338 13.977 3.35766 14.0699 3.4043C14.1627 3.45093 14.2434 3.51863 14.3055 3.60198C14.3675 3.68534 14.4092 3.78204 14.4272 3.88438C14.4453 3.98671 14.4391 4.09185 14.4093 4.19139L12.8093 9.52472C12.7681 9.66211 12.6838 9.78256 12.5687 9.86819C12.4537 9.95382 12.3141 10.0001 12.1706 10.0001H3.99997V11.3334H11.3333V12.6667H3.33331C3.15649 12.6667 2.98693 12.5965 2.8619 12.4715C2.73688 12.3464 2.66664 12.1769 2.66664 12.0001V4.27605ZM3.99997 4.66672V8.66672H11.6746L12.8746 4.66672H3.99997ZM3.66664 15.3334C3.40142 15.3334 3.14707 15.228 2.95953 15.0405C2.772 14.853 2.66664 14.5986 2.66664 14.3334C2.66664 14.0682 2.772 13.8138 2.95953 13.6263C3.14707 13.4387 3.40142 13.3334 3.66664 13.3334C3.93186 13.3334 4.18621 13.4387 4.37375 13.6263C4.56128 13.8138 4.66664 14.0682 4.66664 14.3334C4.66664 14.5986 4.56128 14.853 4.37375 15.0405C4.18621 15.228 3.93186 15.3334 3.66664 15.3334ZM11.6666 15.3334C11.4014 15.3334 11.1471 15.228 10.9595 15.0405C10.772 14.853 10.6666 14.5986 10.6666 14.3334C10.6666 14.0682 10.772 13.8138 10.9595 13.6263C11.1471 13.4387 11.4014 13.3334 11.6666 13.3334C11.9319 13.3334 12.1862 13.4387 12.3737 13.6263C12.5613 13.8138 12.6666 14.0682 12.6666 14.3334C12.6666 14.5986 12.5613 14.853 12.3737 15.0405C12.1862 15.228 11.9319 15.3334 11.6666 15.3334Z"
fill="white" />
</svg>
' : ''}}
{{product.stock.has ? 'Add to cart' : 'See similar'}}
</button>
</div>
</a>
</article>
.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;
}
/*
* ----------------------------------
* CARD BÁSICO COM BOTÃO
* ----------------------------------
*/
.card .card__adder {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
margin-top: 12px;
background-color: transparent;
color: #000;
outline: none;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
padding: 12px;
border-radius: 4px;
cursor: pointer;
border: 1px solid #E6E6E6;
transition: border linear 150ms;
}
.card .card__adder>svg path {
fill: #000;
}
.card .card__similars {
display: block;
width: 100%;
text-align: center;
margin-top: 12px;
background-color: transparent;
color: #000000;
border: 1px solid #E6E6E6;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
outline: none;
padding: 12px;
border-radius: 4px;
transition: border linear 150ms;
cursor: pointer;
opacity: 0.5;
}
.card .card__adder:is(:hover, :focus) {
border: 1px solid #01141E;
}
.card .card__similars > svg {
display: none;
}
@media (max-width: 1024px){
.card .card__description {
font-size: 14px;
font-weight: 500;
line-height: 19.6px;
color: #434343;
}
}
Card de produto padrão com nome da categoria
- Preview
- HTML
- CSS
{% 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>
{% set maiorParcela = _price('installments', product, true, customerGroup) | last %}
<div class="card__details">
<div class="card__pricing">
<h3 class="pricing__current">{{ _price('min', product, true, customerGroup) }}</h3>
{% if desconto > 0 %}
<span class="pricing__old">{{ _price('max', product) }}</span>
{% endif %}
</div>
<h4 class="card__description">{{ product.name | raw }}</h4>
<span class="card__attribute">Home</span>
</div>
</a>
</article>
.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: 400;
line-height: 22.4px;
color: #000000;
margin-bottom: 8px;
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%;
margin-bottom: 8px;
}
.card__pricing .pricing__current {
font-family: inherit;
font-size: 20px;
font-weight: 500;
line-height: 28px;
color: #2c2c2c;
overflow: hidden;
}
.card.card--sale .pricing__current {
color: #28B95E;
}
.card__pricing .pricing__old {
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #8E8E8E;
text-decoration: line-through;
display: none;
}
.card.card--sale .pricing__old {
display: block;
}
@media (max-width: 1024px){
.card__pricing .pricing__current {
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
}
.card__pricing .pricing__old {
font-size: 12px;
font-weight: 400;
line-height: 16.8px;
}
}
Card de produto padrão com nome da categoria e botão
- Preview
- HTML
- CSS
{% 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>
{% set maiorParcela = _price('installments', product, true, customerGroup) | last %}
<div class="card__details">
<div class="card__pricing">
<h3 class="pricing__current">{{ _price('min', product, true, customerGroup) }}</h3>
{% if desconto > 0 %}
<span class="pricing__old">{{ _price('max', product) }}</span>
{% endif %}
</div>
<h4 class="card__description">{{ product.name | raw }}</h4>
<span class="card__attribute">Home</span>
<button class="{{ product.stock.has ? 'card__adder' : 'card__similars'}}" type="button">
{% if product.stock.has %}
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.66664 4.27605L0.504639 2.11472L1.44797 1.17139L3.60931 3.33339H13.7706C13.8746 3.33338 13.977 3.35766 14.0699 3.4043C14.1627 3.45093 14.2434 3.51863 14.3055 3.60198C14.3675 3.68534 14.4092 3.78204 14.4272 3.88438C14.4453 3.98671 14.4391 4.09185 14.4093 4.19139L12.8093 9.52472C12.7681 9.66211 12.6838 9.78256 12.5687 9.86819C12.4537 9.95382 12.3141 10.0001 12.1706 10.0001H3.99997V11.3334H11.3333V12.6667H3.33331C3.15649 12.6667 2.98693 12.5965 2.8619 12.4715C2.73688 12.3464 2.66664 12.1769 2.66664 12.0001V4.27605ZM3.99997 4.66672V8.66672H11.6746L12.8746 4.66672H3.99997ZM3.66664 15.3334C3.40142 15.3334 3.14707 15.228 2.95953 15.0405C2.772 14.853 2.66664 14.5986 2.66664 14.3334C2.66664 14.0682 2.772 13.8138 2.95953 13.6263C3.14707 13.4387 3.40142 13.3334 3.66664 13.3334C3.93186 13.3334 4.18621 13.4387 4.37375 13.6263C4.56128 13.8138 4.66664 14.0682 4.66664 14.3334C4.66664 14.5986 4.56128 14.853 4.37375 15.0405C4.18621 15.228 3.93186 15.3334 3.66664 15.3334ZM11.6666 15.3334C11.4014 15.3334 11.1471 15.228 10.9595 15.0405C10.772 14.853 10.6666 14.5986 10.6666 14.3334C10.6666 14.0682 10.772 13.8138 10.9595 13.6263C11.1471 13.4387 11.4014 13.3334 11.6666 13.3334C11.9319 13.3334 12.1862 13.4387 12.3737 13.6263C12.5613 13.8138 12.6666 14.0682 12.6666 14.3334C12.6666 14.5986 12.5613 14.853 12.3737 15.0405C12.1862 15.228 11.9319 15.3334 11.6666 15.3334Z"
fill="white" />
</svg>
{% endif %}
{{product.stock.has ? 'Add to cart' : 'See similar'}}
</button>
</div>
</a>
</article>
.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: 400;
line-height: 22.4px;
color: #000000;
margin-bottom: 8px;
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%;
margin-bottom: 8px;
}
.card__pricing .pricing__current {
font-family: inherit;
font-size: 20px;
font-weight: 500;
line-height: 28px;
color: #2c2c2c;
overflow: hidden;
}
.card.card--sale .pricing__current {
color: #28B95E;
}
.card__pricing .pricing__old {
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #8E8E8E;
text-decoration: line-through;
display: none;
}
.card.card--sale .pricing__old {
display: block;
}
/*
* ----------------------------------
* CARD BÁSICO COM BOTÃO
* ----------------------------------
*/
.card .card__adder {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
margin-top: 12px;
background-color: #01141E;
color: #FFFFFF;
border: none;
outline: none;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
padding: 12px;
border-radius: 4px;
cursor: pointer;
}
.card .card__similars {
display: block;
width: 100%;
text-align: center;
margin-top: 12px;
background-color: #fff;
color: #000000;
border: 1px solid #E6E6E6;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
outline: none;
padding: 12px;
border-radius: 4px;
transition: border linear 150ms;
pointer-events: all;
cursor: pointer;
}
.card .card__similars:is(:hover, :focus) {
border: 1px solid #01141E;
}
.card .card__similars > svg {
display: none;
}
@media (max-width: 1024px){
.card__pricing .pricing__current {
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
}
.card__pricing .pricing__old {
font-size: 12px;
font-weight: 400;
line-height: 16.8px;
}
}
Card de produto horizontal com botão
- Preview
- HTML
- CSS
{% 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__wrapper">
<a {{ _href(product) }}>
<h3 class="card__description">{{ product.name | raw }}</h3>
</a>
<span class="card__rating">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1023)">
<path d="M6.00002 9.13L2.47352 11.104L3.26102 7.14L0.293518 4.396L4.30702 3.92L6.00002 0.25L7.69302 3.92L11.7065 4.396L8.73902 7.14L9.52652 11.104L6.00002 9.13Z" fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1023">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1023)">
<path d="M6.00002 9.13L2.47352 11.104L3.26102 7.14L0.293518 4.396L4.30702 3.92L6.00002 0.25L7.69302 3.92L11.7065 4.396L8.73902 7.14L9.52652 11.104L6.00002 9.13Z" fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1023">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1023)">
<path d="M6.00002 9.13L2.47352 11.104L3.26102 7.14L0.293518 4.396L4.30702 3.92L6.00002 0.25L7.69302 3.92L11.7065 4.396L8.73902 7.14L9.52652 11.104L6.00002 9.13Z" fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1023">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1037)">
<path d="M6 7.328L7.4085 8.188L7.0255 6.583L8.279 5.5095L6.634 5.3775L6 3.854V7.328ZM6 8.5L3.061 10.295L3.85999 6.945L1.245 4.705L4.6775 4.43L6 1.25L7.3225 4.43L10.7555 4.705L8.14 6.945L8.939 10.295L6 8.5Z"
fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1037">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.99996 9.13L2.47346 11.104L3.26096 7.14L0.293457 4.396L4.30696 3.92L5.99996 0.25L7.69296 3.92L11.7065 4.396L8.73896 7.14L9.52646 11.104L5.99996 9.13ZM5.99996 7.984L8.12346 9.1725L7.64896 6.786L9.43546 5.1335L7.01896 4.847L5.99996 2.6375L4.98096 4.8475L2.56446 5.1335L4.35096 6.786L3.87646 9.1725L5.99996 7.984Z"
fill="#A7A7A7" />
</svg>
</span>
</div>
<div class="card__tags-wrapper">
<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>
Promoção
</span>
<span class="card__outofstock">Sem estoque</span>
<a {{ _href(product) }}>
<figure class="card__image">
<img class="card__img"
src="{{ _image(product.media[0].cached, 'w=220') }}"
alt="{{ product.name }}" title="{{ product.name }}" loading="lazy"
onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
/>
</figure>
</a>
<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>
<div class="card__pricing">
<h4 class="pricing__current">{{ _price('min', product, true, customerGroup) }}</h4>
{% if desconto > 0 %}
<span class="pricing__old">{{ _price('max', product) }}</span>
{% endif %}
</div>
<a {{ _href(product) }} class="{{ product.stock.has ? 'card__adder' : 'card__similars'}}" type="button">
{{ product.stock.has ? '
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.66664 4.27605L0.504639 2.11472L1.44797 1.17139L3.60931 3.33339H13.7706C13.8746 3.33338 13.977 3.35766 14.0699 3.4043C14.1627 3.45093 14.2434 3.51863 14.3055 3.60198C14.3675 3.68534 14.4092 3.78204 14.4272 3.88438C14.4453 3.98671 14.4391 4.09185 14.4093 4.19139L12.8093 9.52472C12.7681 9.66211 12.6838 9.78256 12.5687 9.86819C12.4537 9.95382 12.3141 10.0001 12.1706 10.0001H3.99997V11.3334H11.3333V12.6667H3.33331C3.15649 12.6667 2.98693 12.5965 2.8619 12.4715C2.73688 12.3464 2.66664 12.1769 2.66664 12.0001V4.27605ZM3.99997 4.66672V8.66672H11.6746L12.8746 4.66672H3.99997ZM3.66664 15.3334C3.40142 15.3334 3.14707 15.228 2.95953 15.0405C2.772 14.853 2.66664 14.5986 2.66664 14.3334C2.66664 14.0682 2.772 13.8138 2.95953 13.6263C3.14707 13.4387 3.40142 13.3334 3.66664 13.3334C3.93186 13.3334 4.18621 13.4387 4.37375 13.6263C4.56128 13.8138 4.66664 14.0682 4.66664 14.3334C4.66664 14.5986 4.56128 14.853 4.37375 15.0405C4.18621 15.228 3.93186 15.3334 3.66664 15.3334ZM11.6666 15.3334C11.4014 15.3334 11.1471 15.228 10.9595 15.0405C10.772 14.853 10.6666 14.5986 10.6666 14.3334C10.6666 14.0682 10.772 13.8138 10.9595 13.6263C11.1471 13.4387 11.4014 13.3334 11.6666 13.3334C11.9319 13.3334 12.1862 13.4387 12.3737 13.6263C12.5613 13.8138 12.6666 14.0682 12.6666 14.3334C12.6666 14.5986 12.5613 14.853 12.3737 15.0405C12.1862 15.228 11.9319 15.3334 11.6666 15.3334Z"
fill="white" />
</svg>
' : ''}}
{{product.stock.has ? 'Add to cart' : 'See similar'}}
</a>
</article>
.card {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
width: 100%;
margin: 0 auto;
height: auto;
padding: 12px;
background-color: #fff;
border: 1px solid #E6E6E6;
border-radius: 4px;
transition: all linear 150ms;
user-select: none;
}
.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__wrapper {
grid-column: 2 / -1;
grid-row: 1 / 3;
}
@media (max-width: 576px) {
.card .card__wrapper {
grid-row: 1 / 2;
}
}
.card .card__tags-wrapper {
grid-column: 1;
grid-row: 1 / 4;
position: relative;
height: fit-content;
}
@media (max-width: 576px) {
.card .card__tags-wrapper {
grid-row: 1 / 3;
}
}
.card .card__outofstock {
position: absolute;
top: 8px;
left: 8px;
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;
z-index: 5;
}
.card .card__sale {
position: absolute;
top: 8px;
left: 8px;
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;
z-index: 5;
}
@media (max-width: 470px) {
.card .card__outofstock,
.card .card__sale {
bottom: 4px;
left: 4px;
top: auto;
font-size: 12px;
line-height: 16px;
padding: 4px 6px;
}
}
.card .card__favorite {
position: absolute;
top: 8px;
right: 8px;
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;
z-index: 5;
transition: border linear 150ms;
}
@media (max-width: 470px) {
.card .card__favorite {
top: 4px;
right: 4px;
padding: 6px;
max-height: 28px;
}
}
.card .card__favorite:is(:hover, :focus) {
border: 1px solid #000;
}
.card .card__pricing {
grid-column: 2 / 4;
grid-row: 3 / 3;
}
@media (max-width: 576px) {
.card .card__pricing {
grid-column: 2 / -1;
grid-row: 3 / 2;
}
}
.card .card__wrapper {
margin-left: 20px;
}
@media (max-width: 470px) {
.card .card__wrapper {
margin-left: 10px;
}
}
.card .card__description {
font-family: inherit;
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
color: #434343;
margin: 8px 0;
overflow: hidden;
min-height: 45px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
@media (max-width: 576px) {
.card .card__description {
font-size: 14px;
line-height: 19.6px;
margin-top: 0;
}
}
.card .card__rating {
display: flex;
align-items: center;
gap: 2px;
}
.card .card__image {
width: 164px;
height: 164px;
border-radius: 4px;
border: 1px solid #E6E6E6;
position: relative;
overflow: hidden;
}
@media (max-width: 470px) {
.card .card__image {
width: 120px;
height: 120px;
}
}
.card .card__image img {
width: inherit;
height: inherit;
object-fit: cover;
}
.card .card__pricing {
display: flex;
align-items: center;
gap: 4px;
margin: auto 10px 0 20px;
}
@media (max-width: 470px) {
.card .card__pricing {
margin-right: 0;
flex-flow: column;
align-items: flex-start;
margin-left: 10px;
margin-top: 10px;
}
}
.card .pricing__current {
font-family: inherit;
font-size: 20px;
font-weight: 500;
line-height: 28px;
color: #2c2c2c;
}
@media (max-width: 576px) {
.card .pricing__current {
font-weight: 400;
font-size: 16px;
line-height: 22.4px;
}
}
.card.card--sale .pricing__current {
color: #28B95E;
}
.card .pricing__old {
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #8E8E8E;
text-decoration: line-through;
display: none !important;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
@media (max-width: 576px) {
.card .pricing__old {
font-weight: 400;
font-size: 12px;
line-height: 16.8px;
}
}
.card.card--sale .pricing__old {
display: block !important;
}
/*
* ----------------------------------
* CARD BÁSICO COM BOTÃO
* ----------------------------------
*/
.card .card__adder {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
width: max-content;
background-color: #01141E;
color: #FFFFFF;
border: none;
outline: none;
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 19.6px;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
min-width: 145px;
height: 32px;
margin-top: auto;
grid-column: 4;
grid-row: 3 / 3;
}
.card .card__similars {
display: block;
width: 100%;
text-align: center;
background-color: #fff;
color: #000000;
border: 1px solid #E6E6E6;
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 19.6px;
outline: none;
padding: 6px 12px;
border-radius: 4px;
transition: border linear 150ms;
cursor: pointer;
height: 32px;
margin-top: auto;
min-width: 145px;
}
.card .card__similars:is(:hover, :focus) {
border: 1px solid #01141E;
}
@media (max-width: 576px) {
.card .card__adder,
.card .card__similars {
margin-top: 10px;
grid-column: 1 / 5;
grid-row: 4 / 3;
width: 100%;
}
}
.card .card__similars > svg {
display: none;
}
Card de produto horizontal (para carrinho)
- Preview
- HTML
- CSS
{% set customerGroup = cookies.customer_group ? cookies.customer_group : null %}
{% set desconto = _price('discount', product) %}
<article class="card {{ desconto ? 'card--sale' : ''}}">
<span class="card__remove" onclick="removeItem({{ productInfo }})">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3.66659 1.66665V0.333313H10.3333V1.66665H13.6666V2.99998H12.3333V13C12.3333 13.1768 12.263 13.3464 12.138 13.4714C12.013 13.5964 11.8434 13.6666 11.6666 13.6666H2.33325C2.15644 13.6666 1.98687 13.5964 1.86185 13.4714C1.73682 13.3464 1.66659 13.1768 1.66659 13V2.99998H0.333252V1.66665H3.66659ZM2.99992 2.99998V12.3333H10.9999V2.99998H2.99992ZM4.99992 4.99998H6.33325V10.3333H4.99992V4.99998ZM7.66659 4.99998H8.99992V10.3333H7.66659V4.99998Z"
fill="black" />
</svg>
</span>
<div class="card__wrapper">
<h3 class="card__description">{{ product.name }}</h3>
{% if product.details %}
<ul class="card__details">
{% for detail in product.details %}
<li class="details__listing">{{ detail.name }}: <span>{{ detail.value }}</span></li>
{% endfor %}
</ul>
{% endif %}
<h4 class="card__pricing--alt">
{{ _price('min', product, true, customerGroup) }}
</h4>
</div>
<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>
<figure class="card__image">
<img class="card__img"
src="{{ _image(product.media[0].cached, 'w=164') }}"
alt="{{ product.name }}"
loading="lazy"
onerror="this.src='https://storage.test.increazy.com/drivetest/no-image.webp'"
/>
</figure>
</div>
<div class="card__triggers">
<span onclick="changeQuantity('qty_input', {{ product.stock.increment * -1 }})">-</span>
<input
min="1"
max="{{ product.stock.quantity > 0 ? product.stock.quantity : 99 }}"
step="{{ product.stock.increment | number_format }}"
value="{{ product.stock.increment | number_format }}"
type="number" name="quantity"
id="qty_input"
required
data-product-quantity="{{ product.sku }}"
/>
<span onclick="changeQuantity('qty_input', {{ product.stock.increment }})">+</span>
</div>
<h5 class="card__pricing">
{{ _price('min', product, true, customerGroup) }}
</h5>
</article>
.card {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
width: 100%;
margin: 0 auto;
height: auto;
padding: 12px;
background-color: #fff;
border-bottom: 1px solid#E6E6E6;
border-radius: 4px;
transition: all linear 150ms;
user-select: none;
position: relative;
}
@media (max-width: 576px) {
.card {
grid-template-columns: repeat(3, 1fr);
}
}
.card.card--sale .card__sale {
display: flex;
}
.card .card__wrapper {
position: relative;
grid-column: 2 / -1;
grid-row: 1 / 3;
}
@media (max-width: 576px) {
.card .card__wrapper {
grid-row: 1 / 2;
}
}
.card .card__tags {
grid-column: 1;
grid-row: 1 / 4;
position: relative;
height: fit-content;
}
@media (max-width: 576px) {
.card .card__tags {
grid-row: 1 / 3;
}
}
.card .card__remove {
position: absolute;
right: 13px;
top: 13px;
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;
z-index: 10;
line-height: 10px;
transition: border linear 150ms;
}
.card .card__remove:is(:focus, :hover) {
border: 1px solid #01141E;
}
@media (max-width: 576px) {
.card .card__remove {
top: auto;
bottom: 16px;
}
}
.card .card__sale {
position: absolute;
top: 8px;
left: 8px;
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;
z-index: 5;
}
@media (max-width: 470px) {
.card .card__sale {
bottom: 4px;
left: 4px;
top: auto;
font-size: 12px;
line-height: 16px;
padding: 4px 6px;
}
}
.card .card__wrapper {
margin-left: 20px;
}
@media (max-width: 470px) {
.card .card__wrapper {
margin-left: 10px;
}
}
.card .card__description {
font-family: inherit;
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
color: #434343;
margin: 8px 0;
overflow: hidden;
min-height: 45px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
@media (max-width: 576px) {
.card .card__description {
margin-top: 0;
-webkit-line-clamp: 3;
}
}
.card .details__listing {
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #757575;
}
.card .details__listing > span {
color: #2C2C2C;
font-weight: 500;
}
.card__pricing--alt {
font-family: inherit;
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
color: #2C2C2C;
display: none;
margin-top: 8px;
}
@media (max-width: 576px) {
.card__pricing--alt {
display: block;
}
}
.card .card__image {
width: 164px;
height: 164px;
border-radius: 4px;
border: 1px solid #E6E6E6;
position: relative;
overflow: hidden;
}
@media (max-width: 470px) {
.card .card__image {
width: 120px;
height: 120px;
}
}
.card .card__img {
width: inherit;
height: inherit;
object-fit: cover;
}
.card .card__triggers {
font-family: inherit;
font-weight: 400;
font-size: 14px;
line-height: 19.6px;
color: #000;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: auto 10px 8px 20px;
grid-column: 2 / 4;
grid-row: 3 / 3;
width: max-content;
border: 1px solid #E6E6E6;
border-radius: 4px;
height: 27px;
}
@media (max-width: 576px) {
.card .card__triggers {
margin-top: 10px;
grid-column: 1 / -1;
grid-row: 4 / 3;
margin-right: 0;
margin-left: 0;
}
}
.card .card__triggers > span {
width: 27px;
height: 27px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-right: 1px solid #E6E6E6;
padding: 5px;
}
.card .card__triggers > span:first-of-type {
color: #a7a7a7;
}
.card .card__triggers > span:last-of-type {
border-left: 1px solid #E6E6E6;
border-right: none;
}
.card .card__triggers input[type="number"] {
border: transparent;
width: 35px;
text-align: center;
font-family: inherit;
font-weight: 400;
font-size: 14px;
line-height: 19.6px;
color: #434343;
}
.card__pricing {
margin-top: auto;
text-align: right;
font-family: inherit;
font-size: 20px;
font-weight: 500;
line-height: 28px;
color: #2C2C2C;
grid-column: 4;
grid-row: 3 / 3;
margin-bottom: 8px;
min-width: 120px;
}
@media (max-width: 576px) {
.card__pricing {
display: none;
}
}
Card para página de detalhe de produto
Esse card é utilizado na página de detalhe de produto, onde o cliente terá acesso à descrição, variações, consulta de frete e outros detalhes, além de poder também adicionar o produto ao carrinho. Abaixo podemos ver a forma que o card se comportará caso o produto esteja em promoção ou sem estoque.
- Preview
- HTML
- CSS
{% set customerGroup = cookies.customer_group ? cookies.customer_group : null %}
{% set discount = _price('discount', product) %}
<article class="card {{ discount ? '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>
</div>
<div class="card__title">
<h3 class="card__description">{{ product.name }}</h3>
<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>
<span class="card__category">Electrolux</span>
<span class="card__rating">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1023)">
<path d="M6.00002 9.13L2.47352 11.104L3.26102 7.14L0.293518 4.396L4.30702 3.92L6.00002 0.25L7.69302 3.92L11.7065 4.396L8.73902 7.14L9.52652 11.104L6.00002 9.13Z" fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1023">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1023)">
<path d="M6.00002 9.13L2.47352 11.104L3.26102 7.14L0.293518 4.396L4.30702 3.92L6.00002 0.25L7.69302 3.92L11.7065 4.396L8.73902 7.14L9.52652 11.104L6.00002 9.13Z" fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1023">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1023)">
<path d="M6.00002 9.13L2.47352 11.104L3.26102 7.14L0.293518 4.396L4.30702 3.92L6.00002 0.25L7.69302 3.92L11.7065 4.396L8.73902 7.14L9.52652 11.104L6.00002 9.13Z" fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1023">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1037)">
<path d="M6 7.328L7.4085 8.188L7.0255 6.583L8.279 5.5095L6.634 5.3775L6 3.854V7.328ZM6 8.5L3.061 10.295L3.85999 6.945L1.245 4.705L4.6775 4.43L6 1.25L7.3225 4.43L10.7555 4.705L8.14 6.945L8.939 10.295L6 8.5Z"
fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1037">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.99996 9.13L2.47346 11.104L3.26096 7.14L0.293457 4.396L4.30696 3.92L5.99996 0.25L7.69296 3.92L11.7065 4.396L8.73896 7.14L9.52646 11.104L5.99996 9.13ZM5.99996 7.984L8.12346 9.1725L7.64896 6.786L9.43546 5.1335L7.01896 4.847L5.99996 2.6375L4.98096 4.8475L2.56446 5.1335L4.35096 6.786L3.87646 9.1725L5.99996 7.984Z"
fill="#A7A7A7" />
</svg>
<small>(812 reviews)</small>
</span>
{% set maiorParcela = _price('installments', product, true, customerGroup) | last %}
<div class="card__pricing">
<h4 class="pricing__current">{{ _price('min', product, true, customerGroup) }}</h4>
{% if discount > 0 %}
<span class="pricing__old">{{ _price('max', product) }}</span>
{% endif %}
</div>
<span class="card__installment">or {{ maiorParcela.qty }}x {{ _price('format', maiorParcela.price) }}</span>
<form id="product-form" onsubmit="addToCart(event, {{ _object(_only(product, 'id', 'sku')) }})">
<input type="hidden" name="sku" value="{{ product.sku }}"/>
<div class="product-variations">
<script>
window._productsLinkeds = window._productsLinkeds || {};
window._productsLinkeds['{{ product.sku }}'] = {{ product.linkeds | json_encode | raw }};
</script>
<div class="variations" data-sku="{{ product.sku }}" id="product-variations-list">
{% for variation in product.variations %}
<div class="variations__item">
<p class="variations__item-name">
{{ variation.label }}
</p>
<div
data-grid
class="variations__item-list grid--va-center"
>
{% for value in variation.values %}
<input
required
type="radio"
name="variations.{{ variation.id }}"
id="variation_{{ product.id }}_{{ variation.code }}_{{ value.value }}"
value="{{ value.value }}"
data-attribute="{{ variation.code }}"
class="variations__radio"
onclick="updateVariationsStock('{{ product.sku }}', '{{ variation.code }}', event.target)"
/>
<label
data-grid
for="variation_{{ product.id }}_{{ variation.code }}_{{ value.value }}"
class="card__variations__label"
title="{{ value.label }}"
>
{% if value.source != value.label %}
{% if value.source starts with 'http' %}
<img loading="lazy" src="{{ value.source }}" />
{% else %}
<span class="color-circle" style="background-color: {{ value.source }};"></span>
{% endif %}
{% else %}
<span>{{ value.label }}</span>
{% endif %}
</label>
{% endfor %}
<small data-grid class="variations__select-msg">
Selecione um(a) {{ variation.label }}
</small>
</div>
</div>
{% endfor %}
</div>
<script type="text/javascript">
(function () {
if (typeof updateVariationsStock === 'function') updateVariationsStock('{{ product.sku }}');
if (typeof startVariations === 'function') startVariations();
if (typeof disableVariation === 'function') disableVariation();
const radioField = document.querySelectorAll('.variations [type="radio"]');
function removeErrorMessage (e) {
e.target.parentNode.querySelectorAll('[type="radio"]').forEach(element => {
element.classList.remove('invalid');
});
}
radioField.forEach(radioElement => {
radioElement.addEventListener('invalid', function (e) {
radioElement.classList.add('invalid');
setTimeout(() => removeErrorMessage(e), 5000);
}, false);
radioElement.addEventListener('input', (e) => removeErrorMessage(e), false);
});
})();
</script>
</div>
<div class="card__purchase">
<div class="card__triggers {{ product.stock.has ? '' : 'trigger-nostock'}}">
<span onclick="changeQuantity('qty_input', {{ product.stock.increment * -1 }})">-</span>
<input
min="1"
max="{{ product.stock.quantity > 0 ? product.stock.quantity : 99 }}"
step="{{ product.stock.increment | number_format }}"
value="{{ product.stock.increment | number_format }}"
type="number" name="quantity"
id="qty_input"
required
data-product-quantity="{{ product.sku }}"
/>
<span onclick="changeQuantity('qty_input', {{ product.stock.increment }})">+</span>
</div>
<button class="{{ product.stock.has ? 'card__adder' : 'card__similars'}}" type="submit">
{{ product.stock.has ? '
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.66664 4.27605L0.504639 2.11472L1.44797 1.17139L3.60931 3.33339H13.7706C13.8746 3.33338 13.977 3.35766 14.0699 3.4043C14.1627 3.45093 14.2434 3.51863 14.3055 3.60198C14.3675 3.68534 14.4092 3.78204 14.4272 3.88438C14.4453 3.98671 14.4391 4.09185 14.4093 4.19139L12.8093 9.52472C12.7681 9.66211 12.6838 9.78256 12.5687 9.86819C12.4537 9.95382 12.3141 10.0001 12.1706 10.0001H3.99997V11.3334H11.3333V12.6667H3.33331C3.15649 12.6667 2.98693 12.5965 2.8619 12.4715C2.73688 12.3464 2.66664 12.1769 2.66664 12.0001V4.27605ZM3.99997 4.66672V8.66672H11.6746L12.8746 4.66672H3.99997ZM3.66664 15.3334C3.40142 15.3334 3.14707 15.228 2.95953 15.0405C2.772 14.853 2.66664 14.5986 2.66664 14.3334C2.66664 14.0682 2.772 13.8138 2.95953 13.6263C3.14707 13.4387 3.40142 13.3334 3.66664 13.3334C3.93186 13.3334 4.18621 13.4387 4.37375 13.6263C4.56128 13.8138 4.66664 14.0682 4.66664 14.3334C4.66664 14.5986 4.56128 14.853 4.37375 15.0405C4.18621 15.228 3.93186 15.3334 3.66664 15.3334ZM11.6666 15.3334C11.4014 15.3334 11.1471 15.228 10.9595 15.0405C10.772 14.853 10.6666 14.5986 10.6666 14.3334C10.6666 14.0682 10.772 13.8138 10.9595 13.6263C11.1471 13.4387 11.4014 13.3334 11.6666 13.3334C11.9319 13.3334 12.1862 13.4387 12.3737 13.6263C12.5613 13.8138 12.6666 14.0682 12.6666 14.3334C12.6666 14.5986 12.5613 14.853 12.3737 15.0405C12.1862 15.228 11.9319 15.3334 11.6666 15.3334Z"
fill="white" />
</svg>
' : ''}}
{{product.stock.has ? 'Add to cart' : 'See similar'}}
</button>
</div>
</form>
<a class="card__notify" href="/#">Notify me about availability</a>
<ul class="card__details">
<li class="details__listing">{{ product.short_description | raw}}</li>
</ul>
<!--
Para incluirmos o elemento de consulta de frete precisamos
alterar o código que fica em 'elementos > product page > deadline'
esse elemento será incluído logo a seguir e dentro dele deve-se copiar o seguinte código:
-->
<!--
<form class="card__code" onsubmit="searchCep(event)">
<div class="input__container">
<label for="shipping">Shipping</label>
<input onkeyup="cepMask(event)"
value="{{ postal }}"
required
class="card__code--input"
id="product-shipping"
name="postal"
placeholder="Code">
</div>
<button type="submit" class="card__code--button" id="submit-shipping">
OK
<span class="cep-loader">
{% include 'loaders/element' with { id: 'freight'} %}
</span>
</button>
</form>
{% if fretesProduto %}
<ul class="card__info--shipping" id="shipping-options">
{% if fretesProduto | length > 0 %}
{% for frete in fretesProduto %}
<li>
<span>{{ frete.price > 0 ? _price('format', frete.price) : 'Grátis:' }}</span>
<span>{{ frete.title }}</span>
</li>
{% endfor %}
{% elseif fretesProduto %}
<li>
<span>Sem resultado encontrado</span>
</li>
{% endif %}
</ul>
{% endif %}
<script>
async function searchCep(event) {
event.stopPropagation();
event.preventDefault();
const inputShipping = document.getElementById('product-shipping');
const textInput = document.querySelector('#submit-shipping .text');
loading('freight', 'on');
if (textInput) {
textInput.style.display = 'none';
}
if (inputShipping.value.length < 10) {
return toast('O CEP digitado está incompleto!', 'red');
};
event = { target: document.getElementById('product-form') }
var object = {};
var product = {{ _object(_only(product, 'id', 'sku')) }};
const formData = new FormData(event.target);
formData.forEach(function (value, key) {
object[key] = value;
console.log(value, key);
});
delete object.quantity
const super_attribute = Object.keys(object).reduce((obj, name) => {
if (name.startsWith('variations.')) {
obj[name.replace('variations.', '')] = object[name];
}
return obj;
}, {})
const options = Object.keys(object).reduce((obj, name) => {
if (name.startsWith('options.') && object[name] != '') {
obj[name.replace('options.', '')] = object[name];
}
return obj;
}, {})
try {
const fretesProduto = await _ecommerce('search-shipping', {
body: {
product: {
...product,
sku: object.sku,
super_attribute,
options,
stock: _cookie('stock_id').read(),
price_table: _cookie('price_table_id').read(),
},
postal: document.getElementById('product-shipping').value.replace('.', '').replace('-', '')
}
});
if (!fretesProduto.length) {
return toast('O CEP digitado não foi encontrado!', 'red');
};
await _refresh('product page/deadline', {
context: {
fretesProduto,
postal: '_dom:#product-shipping$value'
}
});
} catch (e) {
console.log(e);
} finally {
loading('freight', 'off');
if (textInput) {
textInput.style.display = 'block';
}
}
};
</script>
-->
{% include 'product page/deadline' %}
<div class="card__alert--outofstock">Out of stock</div>
</article>
.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;
padding: 20px;
}
.card.card--sale .card__sale {
display: flex;
}
.card__tags {
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
left: 20px;
top: 20px;
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__title{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
.card.card--sale .card__title {
margin-top: 40px;
}
.card__description {
font-family: inherit;
font-size: 20px;
font-weight: 500;
line-height: 24px;
color: #000000;
margin-bottom: 8px;
overflow: hidden;
}
.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__category {
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #757575;
margin-bottom: 8px;
}
.card__rating{
margin-bottom: 16px;
display: flex;
align-items: center;
}
.card__rating small{
font-family: inherit;
font-size: 12px;
line-height: 16.8px;
font-weight: 400;
color: #8E8E8E;
margin-left: 8px;
}
.card__pricing {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 4px;
width: 100%;
margin-bottom: 8px;
}
.card__pricing .pricing__current {
font-family: inherit;
font-size: 24px;
font-weight: 600;
line-height: 25.92px;
color: #2c2c2c;
overflow: hidden;
}
.card.card--sale .pricing__current {
color: #28B95E;
}
.card__pricing .pricing__old {
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #8E8E8E;
text-decoration: line-through;
display: none;
}
.card.card--sale .pricing__old {
display: block;
}
.card__installment {
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #757575;
margin-bottom: 8px;
}
.card .product-variations{
margin: 8px 0px 16px 0px;
padding-bottom: 8px;
border-bottom: 1px solid #E6E6E6;
}
.variations {
display: flex;
flex-flow: column;
gap: 8px;
}
.variations__item {
display: flex;
flex-flow: column;
gap: 8px;
}
.variations__item-list {
gap: 8px;
}
.card__variations__label {
position: relative;
transition: all .2s ease-in-out;
height: 40px;
width: max-content;
padding: 8px 12px 8px 12px;
border: 1px solid #E6E6E6;
border-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
font-family: inherit;
line-height: 22.4px;
font-weight: 400;
font-size: 16px;
color: #434343;
cursor: pointer;
}
.card__variations__label img{
width: 24px;
height: 24px;
border-radius: 999px;
margin-right: 8px;
}
.card__variations__label .color-circle{
width: 24px;
height: 24px;
border-radius: 999px;
margin-right: 8px;
}
.card__variations__label[data-stock-out="true"] {
opacity: .85;
cursor: not-allowed;
}
.variations__radio {
opacity: 0;
height: 1px;
width: 1px;
position: absolute;
}
.variations__radio.invalid ~ .variations__select-msg {
display: block !important;
}
.variations__radio:checked + .card__variations__label {
border: 1px solid #2e2e2e;
}
.card__variations__label[data-stock-out]::before {
content: '';
width: 100%;
height: 1px;
background-color: #434343;
position: absolute;
}
.card__variations__label[data-stock-out]::after {
content: '';
width: 100%;
height: 100%;
cursor: not-allowed;
position: absolute;
left: 0;
border-radius: 4px;
}
.card__variations__label > input:checked + span,
.card__variations__label > input:checked + img {
border: 1px solid #01141E;
}
.variations__item-name {
font-family: inherit;
color: #000000;
font-size: 16px;
line-height: 22.4px;
font-weight: 500;
}
.variations__select-msg {
display: none !important;
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color:red;
overflow: hidden;
}
.variations__select-msg.active-element{
height: auto;
overflow: auto;
}
.card__purchase{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
column-gap: 8px;
}
.card__triggers {
background-color: #fff;
display: flex;
align-items: center;
justify-content:flex-start;
width: max-content;
border: 1px solid #E6E6E6;
border-radius: 4px;
height: 44px;
}
.card__triggers > span {
width: 44px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-right: 1px solid #E6E6E6;
padding: 14px;
}
.card__triggers > span:first-of-type {
color: #A7A7A7;
}
.card__triggers > span:last-of-type {
border-left: 1px solid #E6E6E6;
border-right: none;
}
.card__triggers input[type="number"] {
border: transparent;
width: 35px;
text-align: center;
font-family: inherit;
font-weight: 400;
font-size: 14px;
line-height: 19.6px;
color: #434343;
background-color: inherit;
}
.card__triggers.trigger-nostock{
background-color: #F5F5F5;
pointer-events: none;
}
.card__triggers.trigger-nostock span{
color: #A7A7A7;
}
.card__triggers.trigger-nostock input[type="number"]{
color: #A7A7A7;
}
.card__adder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 44px;
background-color: #01141E;
color: #FFFFFF;
border: none;
outline: none;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
padding: 12px;
border-radius: 4px;
cursor: pointer;
}
.card__adder > svg path {
fill: #fff;
}
.card__adder > svg {
margin-bottom: 2px;
margin-right: 12px;
}
.card__similars {
display: block;
width: 100%;
height: 44px;
text-align: center;
background-color: #fff;
color: #000000;
border: 1px solid #E6E6E6;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
outline: none;
border-radius: 4px;
transition: border linear 150ms;
pointer-events: all;
cursor: pointer;
}
.card__similars:is(:hover, :focus) {
border: 1px solid #01141E;
}
.card__similars > svg {
display: none;
}
.card__notify{
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
color: #01141E;
width: 100%;
text-align: center;
margin-top: 16px;
display: none;
}
.card.card--nostock .card__notify {
display: block;
}
.card__details {
border-top: 1px solid #E6E6E6;
border-bottom: 1px solid #E6E6E6;
padding: 16px 0px;
margin: 16px 0px 16px 0px;
}
.details__listing{
list-style: disc;
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #5C5C5C;
margin-left: 25px;
}
.card__code{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
}
.card.card--nostock .card__code {
display: none;
}
.card__code label{
font-family: inherit;
font-size: 14px;
line-height: 19.6px;
font-weight: 400;
text-transform: capitalize;
letter-spacing: 0;
color: #434343;
margin-bottom: 4px;
}
.card__code .input__container{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
margin-right: 8px;
}
.card__code--input{
width: 100%;
height: 44px;
border: 1px solid #E6E6E6;
border-radius: 4px;
padding: 8px 12px 8px 12px;
font-family: inherit;
font-size: 14px;
line-height: 19.6px;
font-weight: 400;
}
.card__code--button{
width: 63px;
height: 44px;
border: 1px solid #E6E6E6;
border-radius: 4px;
background-color: #fff;
font-family: inherit;
font-size: 16px;
line-height: 22.4px;
font-weight: 500;
position: relative;
}
.cep-loader{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
width: 100%;
height: 100%;
border-radius: 4px;
background-color: transparent;
}
.card__alert--outofstock{
display: none;
justify-content: center;
align-items: center;
width: 100%;
height: 36px;
background-color: #FFBBBB;
border-radius: 4px;
color: #D60000;
font-family: inherit;
font-size: 14px;
line-height: 20px;
font-weight: 400;
}
.card.card--nostock .card__alert--outofstock {
display: flex;
}
.card__info--shipping{
margin-top: 16px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
row-gap: 4px;
width: 100%;
height: auto;
}
.card__info--shipping li{
font-family: inherit;
font-size: 14px;
line-height: 19.6px;
font-weight: 400;
color: #000000;
}
@media (max-width: 768px){
.card__description {
font-size: 18px;
line-height: 21.6px;
}
.card__pricing .pricing__current {
font-size: 20px;
font-weight: 500;
line-height: 28px;
}
.card__adder {
font-size: 14px;
line-height: 19.6px;
}
}
Card para página de detalhe de produto com botão 'Buy'
Esse card é utilizado na página de detalhe de produto, onde o cliente terá acesso à descrição, variações, consulta de frete e outros detalhes, além de poder também adicionar o produto ao carrinho ou ir direto para o checkout. Abaixo podemos ver a forma que o card se comportará caso o produto esteja em promoção ou sem estoque.
- Preview
- HTML
- CSS
{% set customerGroup = cookies.customer_group ? cookies.customer_group : null %}
{% set discount = _price('discount', product) %}
<article class="card {{ discount ? '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>
</div>
<div class="card__title">
<h3 class="card__description">{{ product.name }}</h3>
<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>
<span class="card__category">Electrolux</span>
<span class="card__rating">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1023)">
<path d="M6.00002 9.13L2.47352 11.104L3.26102 7.14L0.293518 4.396L4.30702 3.92L6.00002 0.25L7.69302 3.92L11.7065 4.396L8.73902 7.14L9.52652 11.104L6.00002 9.13Z" fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1023">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1023)">
<path d="M6.00002 9.13L2.47352 11.104L3.26102 7.14L0.293518 4.396L4.30702 3.92L6.00002 0.25L7.69302 3.92L11.7065 4.396L8.73902 7.14L9.52652 11.104L6.00002 9.13Z" fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1023">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1023)">
<path d="M6.00002 9.13L2.47352 11.104L3.26102 7.14L0.293518 4.396L4.30702 3.92L6.00002 0.25L7.69302 3.92L11.7065 4.396L8.73902 7.14L9.52652 11.104L6.00002 9.13Z" fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1023">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2423_1037)">
<path d="M6 7.328L7.4085 8.188L7.0255 6.583L8.279 5.5095L6.634 5.3775L6 3.854V7.328ZM6 8.5L3.061 10.295L3.85999 6.945L1.245 4.705L4.6775 4.43L6 1.25L7.3225 4.43L10.7555 4.705L8.14 6.945L8.939 10.295L6 8.5Z"
fill="#FFAA2E" />
</g>
<defs>
<clipPath id="clip0_2423_1037">
<rect width="12" height="12" fill="white" />
</clipPath>
</defs>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.99996 9.13L2.47346 11.104L3.26096 7.14L0.293457 4.396L4.30696 3.92L5.99996 0.25L7.69296 3.92L11.7065 4.396L8.73896 7.14L9.52646 11.104L5.99996 9.13ZM5.99996 7.984L8.12346 9.1725L7.64896 6.786L9.43546 5.1335L7.01896 4.847L5.99996 2.6375L4.98096 4.8475L2.56446 5.1335L4.35096 6.786L3.87646 9.1725L5.99996 7.984Z"
fill="#A7A7A7" />
</svg>
<small>(812 reviews)</small>
</span>
<form id="product-form" onsubmit="addToCart(event, {{ _object(_only(product, 'id', 'sku')) }})">
<input type="hidden" name="sku" value="{{ product.sku }}"/>
<div class="pricing-triggers__div">
{% set maiorParcela = _price('installments', product, true, customerGroup) | last %}
<div class="card__pricing--container">
<div class="card__pricing">
<h4 class="pricing__current">{{ _price('min', product, true, customerGroup) }}</h4>
{% if discount > 0 %}
<span class="pricing__old">{{ _price('max', product) }}</span>
{% endif %}
</div>
<span class="card__installment">or {{ maiorParcela.qty }}x {{ _price('format', maiorParcela.price) }}</span>
</div>
<div class="card__triggers {{ product.stock.has ? '' : 'trigger-nostock'}}">
<span onclick="changeQuantity('qty_input', {{ product.stock.increment * -1 }})">-</span>
<input
min="1"
max="{{ product.stock.quantity > 0 ? product.stock.quantity : 99 }}"
step="{{ product.stock.increment | number_format }}"
value="{{ product.stock.increment | number_format }}"
type="number" name="quantity"
id="qty_input"
required
data-product-quantity="{{ product.sku }}"
/>
<span onclick="changeQuantity('qty_input', {{ product.stock.increment }})">+</span>
</div>
</div>
<div class="product-variations">
<script>
window._productsLinkeds = window._productsLinkeds || {};
window._productsLinkeds['{{ product.sku }}'] = {{ product.linkeds | json_encode | raw }};
</script>
<div class="variations" data-sku="{{ product.sku }}" id="product-variations-list">
{% for variation in product.variations %}
<div class="variations__item">
<p class="variations__item-name">
{{ variation.label }}
</p>
<div
data-grid
class="variations__item-list grid--va-center"
>
{% for value in variation.values %}
<input
required
type="radio"
name="variations.{{ variation.id }}"
id="variation_{{ product.id }}_{{ variation.code }}_{{ value.value }}"
value="{{ value.value }}"
data-attribute="{{ variation.code }}"
class="variations__radio"
onclick="updateVariationsStock('{{ product.sku }}', '{{ variation.code }}', event.target)"
/>
<label
data-grid
for="variation_{{ product.id }}_{{ variation.code }}_{{ value.value }}"
class="card__variations__label"
title="{{ value.label }}"
>
{% if value.source != value.label %}
{% if value.source starts with 'http' %}
<img loading="lazy" src="{{ value.source }}" />
{% else %}
<span class="color-circle" style="background-color: {{ value.source }};"></span>
{% endif %}
{% else %}
<span>{{ value.label }}</span>
{% endif %}
</label>
{% endfor %}
<small data-grid class="variations__select-msg">
Selecione um(a) {{ variation.label }}
</small>
</div>
</div>
{% endfor %}
</div>
<script type="text/javascript">
(function () {
if (typeof updateVariationsStock === 'function') updateVariationsStock('{{ product.sku }}');
if (typeof startVariations === 'function') startVariations();
if (typeof disableVariation === 'function') disableVariation();
const radioField = document.querySelectorAll('.variations [type="radio"]');
function removeErrorMessage (e) {
e.target.parentNode.querySelectorAll('[type="radio"]').forEach(element => {
element.classList.remove('invalid');
});
}
radioField.forEach(radioElement => {
radioElement.addEventListener('invalid', function (e) {
radioElement.classList.add('invalid');
setTimeout(() => removeErrorMessage(e), 5000);
}, false);
radioElement.addEventListener('input', (e) => removeErrorMessage(e), false);
});
})();
</script>
</div>
<div class="card__purchase">
<button class="{{ product.stock.has ? 'card__add' : 'card__similars'}}" type="submit">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.66664 4.27605L0.504639 2.11472L1.44797 1.17139L3.60931 3.33339H13.7706C13.8746 3.33338 13.977 3.35766 14.0699 3.4043C14.1627 3.45093 14.2434 3.51863 14.3055 3.60198C14.3675 3.68534 14.4092 3.78204 14.4272 3.88438C14.4453 3.98671 14.4391 4.09185 14.4093 4.19139L12.8093 9.52472C12.7681 9.66211 12.6838 9.78256 12.5687 9.86819C12.4537 9.95382 12.3141 10.0001 12.1706 10.0001H3.99997V11.3334H11.3333V12.6667H3.33331C3.15649 12.6667 2.98693 12.5965 2.8619 12.4715C2.73688 12.3464 2.66664 12.1769 2.66664 12.0001V4.27605ZM3.99997 4.66672V8.66672H11.6746L12.8746 4.66672H3.99997ZM3.66664 15.3334C3.40142 15.3334 3.14707 15.228 2.95953 15.0405C2.772 14.853 2.66664 14.5986 2.66664 14.3334C2.66664 14.0682 2.772 13.8138 2.95953 13.6263C3.14707 13.4387 3.40142 13.3334 3.66664 13.3334C3.93186 13.3334 4.18621 13.4387 4.37375 13.6263C4.56128 13.8138 4.66664 14.0682 4.66664 14.3334C4.66664 14.5986 4.56128 14.853 4.37375 15.0405C4.18621 15.228 3.93186 15.3334 3.66664 15.3334ZM11.6666 15.3334C11.4014 15.3334 11.1471 15.228 10.9595 15.0405C10.772 14.853 10.6666 14.5986 10.6666 14.3334C10.6666 14.0682 10.772 13.8138 10.9595 13.6263C11.1471 13.4387 11.4014 13.3334 11.6666 13.3334C11.9319 13.3334 12.1862 13.4387 12.3737 13.6263C12.5613 13.8138 12.6666 14.0682 12.6666 14.3334C12.6666 14.5986 12.5613 14.853 12.3737 15.0405C12.1862 15.228 11.9319 15.3334 11.6666 15.3334Z"
fill="black" />
</svg>
{{product.stock.has ? 'Add to cart' : 'See similar'}}
</button>
<button class="card__buy" type="submit">
Buy
</button>
</div>
</form>
<a class="card__notify" href="/#">Notify me about availability</a>
<ul class="card__details">
<li class="details__listing">{{ product.short_description | raw }}</li>
</ul>
<!--
Para incluirmos o elemento de consulta de frete precisamos
alterar o código que fica em 'elementos > product page > deadline'
esse elemento será incluído logo a seguir e dentro dele deve-se copiar o seguinte código:
-->
<!--
<form class="card__code" onsubmit="searchCep(event)">
<div class="input__container">
<label for="shipping">Shipping</label>
<input onkeyup="cepMask(event)"
value="{{ postal }}"
required
class="card__code--input"
id="product-shipping"
name="postal"
placeholder="Code">
</div>
<button type="submit" class="card__code--button" id="submit-shipping">
OK
<span class="cep-loader">
{% include 'loaders/element' with { id: 'freight'} %}
</span>
</button>
</form>
{% if fretesProduto %}
<ul class="card__info--shipping" id="shipping-options">
{% if fretesProduto | length > 0 %}
{% for frete in fretesProduto %}
<li>
<span>{{ frete.price > 0 ? _price('format', frete.price) : 'Grátis:' }}</span>
<span>{{ frete.title }}</span>
</li>
{% endfor %}
{% elseif fretesProduto %}
<li>
<span>Sem resultado encontrado</span>
</li>
{% endif %}
</ul>
{% endif %}
<script>
async function searchCep(event) {
event.stopPropagation();
event.preventDefault();
const inputShipping = document.getElementById('product-shipping');
const textInput = document.querySelector('#submit-shipping .text');
loading('freight', 'on');
if (textInput) {
textInput.style.display = 'none';
}
if (inputShipping.value.length < 10) {
return toast('O CEP digitado está incompleto!', 'red');
};
event = { target: document.getElementById('product-form') }
var object = {};
var product = {{ _object(_only(product, 'id', 'sku')) }};
const formData = new FormData(event.target);
formData.forEach(function (value, key) {
object[key] = value;
console.log(value, key);
});
delete object.quantity
const super_attribute = Object.keys(object).reduce((obj, name) => {
if (name.startsWith('variations.')) {
obj[name.replace('variations.', '')] = object[name];
}
return obj;
}, {})
const options = Object.keys(object).reduce((obj, name) => {
if (name.startsWith('options.') && object[name] != '') {
obj[name.replace('options.', '')] = object[name];
}
return obj;
}, {})
try {
const fretesProduto = await _ecommerce('search-shipping', {
body: {
product: {
...product,
sku: object.sku,
super_attribute,
options,
stock: _cookie('stock_id').read(),
price_table: _cookie('price_table_id').read(),
},
postal: document.getElementById('product-shipping').value.replace('.', '').replace('-', '')
}
});
if (!fretesProduto.length) {
return toast('O CEP digitado não foi encontrado!', 'red');
};
await _refresh('product page/deadline', {
context: {
fretesProduto,
postal: '_dom:#product-shipping$value'
}
});
} catch (e) {
console.log(e);
} finally {
loading('freight', 'off');
if (textInput) {
textInput.style.display = 'block';
}
}
};
</script>
-->
{% include 'product page/deadline' %}
<div class="card__alert--outofstock">Out of stock</div>
</article>
.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;
padding: 20px;
}
.card.card--sale .card__sale {
display: flex;
}
.card .card__tags {
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
left: 20px;
top: 20px;
}
.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__title{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
.card.card--sale .card__title {
margin-top: 40px;
}
.card__description {
font-family: inherit;
font-size: 20px;
font-weight: 500;
line-height: 24px;
color: #000000;
margin-bottom: 8px;
overflow: hidden;
}
.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__category {
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #757575;
margin-bottom: 8px;
}
.card .card__rating{
margin-bottom: 16px;
display: flex;
align-items: center;
}
.card .card__rating small{
font-family: inherit;
font-size: 12px;
line-height: 16.8px;
font-weight: 400;
color: #8E8E8E;
margin-left: 8px;
}
.pricing-triggers__div{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
}
.card__pricing--container{
display: flex;
flex-direction: column;
}
.card .card__pricing {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 4px;
width: 100%;
margin-bottom: 8px;
}
.card__pricing .pricing__current {
font-family: inherit;
font-size: 24px;
font-weight: 600;
line-height: 25.92px;
color: #2c2c2c;
overflow: hidden;
}
.card.card--sale .pricing__current {
color: #28B95E;
}
.card__pricing .pricing__old {
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #8E8E8E;
text-decoration: line-through;
display: none;
}
.card.card--sale .pricing__old {
display: block;
}
.card .card__installment {
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #757575;
margin-bottom: 8px;
}
.card .product-variations{
margin: 8px 0px 16px 0px;
padding-bottom: 8px;
border-bottom: 1px solid #E6E6E6;
}
.variations {
display: flex;
flex-flow: column;
gap: 8px;
}
.variations__item {
display: flex;
flex-flow: column;
gap: 8px;
}
.variations__item-list {
gap: 8px;
}
.card__variations__label {
position: relative;
transition: all .2s ease-in-out;
height: 40px;
width: max-content;
padding: 8px 12px 8px 12px;
border: 1px solid #E6E6E6;
border-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
font-family: inherit;
line-height: 22.4px;
font-weight: 400;
font-size: 16px;
color: #434343;
cursor: pointer;
}
.card__variations__label img{
width: 24px;
height: 24px;
border-radius: 999px;
margin-right: 8px;
}
.card__variations__label .color-circle{
width: 24px;
height: 24px;
border-radius: 999px;
margin-right: 8px;
}
.card__variations__label[data-stock-out="true"] {
opacity: .85;
cursor: not-allowed;
}
.variations__radio {
opacity: 0;
height: 1px;
width: 1px;
position: absolute;
}
.variations__radio.invalid ~ .variations__select-msg {
display: block !important;
}
.variations__radio:checked + .card__variations__label {
border: 1px solid #2e2e2e;
}
.card__variations__label[data-stock-out]::before {
content: '';
width: 100%;
height: 1px;
background-color: #434343;
position: absolute;
}
.card__variations__label[data-stock-out]::after {
content: '';
width: 100%;
height: 100%;
cursor: not-allowed;
position: absolute;
left: 0;
border-radius: 4px;
}
.card__variations__label > input:checked + span,
.card__variations__label > input:checked + img {
border: 1px solid #01141E;
}
.variations__item-name {
font-family: inherit;
color: #000000;
font-size: 16px;
line-height: 22.4px;
font-weight: 500;
}
.variations__select-msg {
display: none !important;
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color:red;
overflow: hidden;
}
.variations__select-msg.active-element{
height: auto;
overflow: auto;
}
.card__purchase{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
column-gap: 8px;
}
.card .card__triggers {
background-color: #fff;
display: flex;
align-items: center;
justify-content:flex-start;
width: max-content;
border: 1px solid #E6E6E6;
border-radius: 4px;
height: 44px;
}
.card .card__triggers > span {
width: 44px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-right: 1px solid #E6E6E6;
padding: 14px;
}
.card .card__triggers > span:first-of-type {
color: #A7A7A7;
}
.card .card__triggers > span:last-of-type {
border-left: 1px solid #E6E6E6;
border-right: none;
}
.card .card__triggers input[type="number"] {
border: transparent;
width: 35px;
text-align: center;
font-family: inherit;
font-weight: 400;
font-size: 14px;
line-height: 19.6px;
color: #434343;
background-color: inherit;
}
.card__triggers.trigger-nostock{
background-color: #F5F5F5;
pointer-events: none;
}
.card__triggers.trigger-nostock span{
color: #A7A7A7;
}
.card__triggers.trigger-nostock input[type="number"]{
color: #A7A7A7;
}
.card .card__buy {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 44px;
background-color: #01141E;
color: #FFFFFF;
border: none;
outline: none;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
padding: 12px;
border-radius: 4px;
cursor: pointer;
}
.card.card--nostock .card__buy {
display: none;
}
.card .card__add {
display: block;
width: 100%;
height: 44px;
text-align: center;
background-color: #fff;
color: #000000;
border: 1px solid #E6E6E6;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
outline: none;
border-radius: 4px;
transition: border linear 150ms;
pointer-events: all;
cursor: pointer;
}
.card .card__add:is(:hover, :focus) {
border: 1px solid #01141E;
}
.card .card__similars {
display: block;
width: 100%;
text-align: center;
margin-top: 12px;
background-color: #fff;
color: #000000;
border: 1px solid #E6E6E6;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
outline: none;
padding: 12px;
border-radius: 4px;
transition: border linear 150ms;
pointer-events: all;
cursor: pointer;
}
.card .card__similars > svg {
display: none;
}
.card.card--nostock .card__similars {
pointer-events: none;
}
.card__notify{
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
color: #01141E;
width: 100%;
text-align: center;
margin-top: 16px;
display: none;
}
.card.card--nostock .card__notify {
display: block;
}
.card .card__details {
border-top: 1px solid #E6E6E6;
border-bottom: 1px solid #E6E6E6;
padding: 16px 0px;
margin: 16px 0px 16px 0px;
}
.card .details__listing{
list-style: disc;
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
color: #5C5C5C;
margin-left: 25px;
}
.card__code{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
}
.card.card--nostock .card__code {
display: none;
}
.card__code label{
font-family: inherit;
font-size: 14px;
line-height: 19.6px;
font-weight: 400;
text-transform: capitalize;
letter-spacing: 0;
color: #434343;
margin-bottom: 4px;
}
.card__code .input__container{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
margin-right: 8px;
}
.card__code--input{
width: 100%;
height: 44px;
border: 1px solid #E6E6E6;
border-radius: 4px;
padding: 8px 12px 8px 12px;
font-family: inherit;
font-size: 14px;
line-height: 19.6px;
font-weight: 400;
}
.card__code--button{
width: 63px;
height: 44px;
border: 1px solid #E6E6E6;
border-radius: 4px;
background-color: #fff;
font-family: inherit;
font-size: 16px;
line-height: 22.4px;
font-weight: 500;
position: relative;
}
.cep-loader{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
width: 100%;
height: 100%;
border-radius: 4px;
background-color: transparent;
}
.card__alert--outofstock{
display: none;
justify-content: center;
align-items: center;
width: 100%;
height: 36px;
background-color: #FFBBBB;
border-radius: 4px;
color: #D60000;
font-family: inherit;
font-size: 14px;
line-height: 20px;
font-weight: 400;
}
.card.card--nostock .card__alert--outofstock {
display: flex;
}
.card__info--shipping{
margin-top: 16px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
row-gap: 4px;
width: 100%;
height: auto;
}
.card__info--shipping li{
font-family: inherit;
font-size: 14px;
line-height: 19.6px;
font-weight: 400;
color: #000000;
}
@media (max-width: 768px){
.card__description {
font-size: 18px;
line-height: 21.6px;
}
.card__pricing .pricing__current {
font-size: 20px;
font-weight: 500;
line-height: 28px;
}
.card .card__buy {
font-size: 14px;
line-height: 19.6px;
}
}