<a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full ">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a>
<a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full {{ productClass }}">
{% if isBestSeller and not type == 'classic' %}
<div class="absolute z-10 top-4 right-4 bg-black text-white px-3 py-1 rounded-full text-body-sm font-semibold">
BEST SELLER
</div>
{% elseif isNewProduct and not type == 'classic' %}
<div class="absolute z-10 top-4 right-4 bg-black text-white px-3 py-1 rounded-full text-body-sm font-semibold">
NEW
</div>
{% endif %}
{# Product Image #}
<div class="relative aspect-square bg-gray-100">
<img
src="{{ imageSrc }}"
alt="{{ productName }}"
class="w-full h-full object-cover aspect-[5/6]"
>
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
{% if price and type == 'classic' %}
{% render "@template-button" with {
label: "Ajouter au Panier",
size: "sm",
color: "dark",
type: "solid",
button_class: "flex"
} %}
{% endif %}
</div>
</div>
{# Product Info #}
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between {{ productInfoClass|default('gap-1') }} py-2">
<div class="flex flex-col {{ productInfoDescriptionClass }}">
<h3 class="text-body-base group-hover:text-brand-700 font-bold {{ onTwoLine ? 'line-clamp-2' : 'line-clamp-1' }}">{{ productName }}</h3>
<p class="text-body-sm {{ onTwoLine ? 'line-clamp-2' : 'truncate' }}">{{ description }} {% if volume %}• <span class="text-black/56">{{ volume }}</span>{% endif %}</p>
</div>
{# Rating #}
<div class="flex items-center {{ type == 'classic' ? 'space-x-0.5' : 'space-x-1' }}">
{% for i in 1..5 %}
{% if i <= rating %}
{% render "@icons-heroicons--star-solid" with {
iconClass: 'text-black',
size: 12,
} %}
{% else %}
{% render "@icons-heroicons--star-outline" with {
iconClass: 'text-black',
size: 12,
} %}
{% endif %}
{% endfor %}
<span class="text-body-sm">{% if rating != 0 %}{{ rating }} | {% endif %}{{ reviewCount }} avis</span>
</div>
{# Pricing #}
{% if price %}
<div class="h6">{{ price|number_format(2, ',') ~ currency }}</div>
{% endif %}
{% if isBestSeller and type == 'classic' %}
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
{% elseif isNewProduct and type == 'classic' %}
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
NEW
</div>
{% endif %}
</div>
{% if type == 'plp' or buttonOpenDrawer %}
{% if buttonOpenDrawer %}
{% set buttonAttribute = ('x-data x-init="$store.asideBlocs.addAside(\'' ~ drawerName ~ '\')" @click.prevent.stop="$store.asideBlocs.toggleAside(\'' ~ drawerName ~ '\')"')|replace({"\'": "'"}) %}
{% endif %}
{% render "@template-button" with {
label: buttonText,
color: "dark",
type: "solid",
size: size == 'small' ? "sm" : size == 'medium' ? 'md' : "lg",
button_class: "w-full justify-center",
button_attribute: buttonAttribute
} %}
{% endif %}
</div>
</a>
{
"productName": "Nom du produit sur 2 lignes maximum sinon tronquée",
"description": "Descriptif gamme ou actifs sur 2 lignes maximum",
"volume": false,
"price": 30.6,
"currency": "€",
"rating": 4.5,
"reviewCount": 128,
"imageSrc": "/img/product/img-2.png",
"isBestSeller": true,
"buttonText": "Ajouter au panier ",
"type": "classic",
"productInfoClass": "gap-2",
"productInfoDescriptionClass": "gap-1",
"onTwoLine": true
}
No notes defined.