Etat Pur Design System

Product Card: Sans Prix 

<div class="overflow-hidden h-full ">
    <a href="#" class="relative group flex flex-col justify-between">
        <div class="absolute z-10 top-4 left-4 bg-black text-white px-3 py-1 rounded-full text-body-sm font-semibold">
            BEST SELLER
        </div>

        <div class="relative aspect-square bg-gray-100">
            <img src="/img/product/img.png" alt="Gel matifiant" class="w-full h-full object-cover aspect-[5/6]">
            <div class="hidden md:flex absolute z-10 bottom-2.5 right-2.5">
                <button type="button" aria-label="Ajouter au Panier" class=" btn  btn-dark  btn-solid  btn-size-md btn-only-icon">
                    <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M13.0212 8.57397V4.82397C13.0212 3.09808 11.6221 1.69897 9.89624 1.69897C8.17035 1.69897 6.77124 3.09808 6.77124 4.82397V8.57397M10 10.0457V12.5457M10 12.5457V15.0457M10 12.5457H12.5M10 12.5457H7.5M16.2346 6.91333L17.2872 16.9133C17.3455 17.4669 16.9115 17.949 16.3549 17.949H3.4376C2.88101 17.949 2.44698 17.4669 2.50525 16.9133L3.55788 6.91333C3.60811 6.4362 4.01046 6.07397 4.49023 6.07397H15.3022C15.782 6.07397 16.1844 6.4362 16.2346 6.91333ZM7.08374 8.57397C7.08374 8.74656 6.94383 8.88647 6.77124 8.88647C6.59865 8.88647 6.45874 8.74656 6.45874 8.57397C6.45874 8.40139 6.59865 8.26147 6.77124 8.26147C6.94383 8.26147 7.08374 8.40139 7.08374 8.57397ZM13.3337 8.57397C13.3337 8.74656 13.1938 8.88647 13.0212 8.88647C12.8486 8.88647 12.7087 8.74656 12.7087 8.57397C12.7087 8.40139 12.8486 8.26147 13.0212 8.26147C13.1938 8.26147 13.3337 8.40139 13.3337 8.57397Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                    </svg>

                </button>
            </div>
        </div>

        <div class="flex flex-col justify-between">
            <div class="flex flex-col justify-between gap-1 py-2">
                <div class="flex flex-col ">
                    <h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-1">Gel matifiant</h3>
                    <p class="text-body-sm truncate">Descriptif gamme ou actifs • <span class="text-black/56">50mL</span></p>
                </div>

                <div class="flex items-center space-x-1">
                    <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> <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> <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> <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> <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">0 avis</span>
                </div>

            </div>

            <button type="button" class="w-full justify-center  btn  btn-dark  btn-solid  btn-size-lg">
                Ajouter au panier

            </button>

        </div>
    </a>
</div>
 
<div class="overflow-hidden h-full {{ productClass }}">
    <a href="#" class="relative group flex flex-col justify-between">
        {% if isBestSeller %}
            <div class="absolute z-10 top-4 left-4 bg-black text-white px-3 py-1 rounded-full text-body-sm font-semibold">
                BEST SELLER
            </div>
        {% elseif isNewProduct %}
            <div class="absolute z-10 top-4 left-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 md:flex absolute z-10 bottom-2.5 right-2.5">
                {% render "@template-button" with {
                    label: "Ajouter au Panier",
                    size: "md",
                    color: "dark",
                    type: "solid",
                    icon_type: "only-icon",
                    icon: {
                        name:'heroicons--shopping-outline'
                    }
                } %}
            </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 %}
        </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 %}

            {% if stock|default(true) == false %}
                <button type="button" disabled class="w-full justify-center btn btn-dark btn-solid btn-size-lg">
                    <span class="md:hidden">Indisponible</span>
                    <span class="max-md:hidden">Victime de son succès</span>
                </button>
            {% else %}
                {% 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 %}

        {% endif %}
    </div>
</a>
</div>
 
{
  "productName": "Gel matifiant",
  "description": "Descriptif gamme ou actifs",
  "volume": "50mL",
  "price": false,
  "currency": "€",
  "rating": 0,
  "reviewCount": 0,
  "imageSrc": "/img/product/img.png",
  "isBestSeller": true,
  "buttonText": "Ajouter au panier ",
  "type": "plp"
}

No notes defined.