<div class="max-sm:container sticky top-0 flex flex-col gap-4">
<div class="flex flex-col gap-1">
<h1 class="h4 font-bold">Acide salicylique 2%</h1>
<p class="h6 text-black/64">Surexposition (soleil ou pollution)</p>
</div>
<div class="text-body-sm flex flex-row gap-2 items-center">
<div class="flex flex-row gap-1">
<svg class="text-black shrink-0" width="16" height="16" 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="16" height="16" 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="16" height="16" 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="16" height="16" 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="16" height="16" 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>
</div>
<a href="#" class="
underline
link-sm
link-uno
">
4.3/5
</a>
|
<a href="#" class="
underline
link-sm
link-uno
">
256 avis
</a>
</div>
<p class="text-body-base text-black/64">Véritable soin SOS, l'Acide salicylique 2% est le BHA le plus connu. Grâce à ses propriétés purifiantes et exfoliantes, il combat et prévient efficacement le retour des imperfections locales, affine le grain de peau et désobstrue les pores. Vos boutons et points noirs sont ainsi visiblement réduits.</p>
<div class="flex flex-col gap-2">
<div class="flex justify-between">
<div class="h4">16.9€</div>
<div class="text-body-base text-black/72 self-center">15ml</div>
</div>
<button type="button" x-data x-init="$store.asideBlocs.addAside('corte-ingles')" @click="$store.asideBlocs.toggleAside('corte-ingles')" class="w-full justify-center text-brand-700 btn btn-dark btn-solid btn-size-lg">
Acheter
</button>
<div class="bg-neutral-50 flex flex-col gap-2 px-4 py-2">
<p class="text-body-base flex flex-row gap-2 items-center">
<svg class="text-black/56 shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M14 5L8 1.5L2 5M14 5L8 8.5M14 5V11L8 14.5M2 5L8 8.5M2 5V11L8 14.5M8 8.5V14.5" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> Livraison estimée entre <strong class="font-bold">3 à 5 jours</strong>
</p>
<div aria-hidden="true" class="w-full bg-black/16 h-px"></div>
<div class="flex flex-row justify-between items-center gap-2">
<svg class="text-black/56 shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5.5 12.5C5.5 13.0523 5.05228 13.5 4.5 13.5C3.94772 13.5 3.5 13.0523 3.5 12.5M5.5 12.5C5.5 11.9477 5.05228 11.5 4.5 11.5C3.94772 11.5 3.5 11.9477 3.5 12.5M5.5 12.5H9.5M3.5 12.5H2.25C1.83579 12.5 1.5 12.1642 1.5 11.75V9.5003M13 12.5C13 13.0523 12.5523 13.5 12 13.5C11.4477 13.5 11 13.0523 11 12.5M13 12.5C13 11.9477 12.5523 11.5 12 11.5C11.4477 11.5 11 11.9477 11 12.5M13 12.5L13.75 12.5C14.1642 12.5 14.5024 12.1638 14.477 11.7504C14.3369 9.47865 13.5648 7.37792 12.3344 5.62189C12.0929 5.27728 11.7019 5.07183 11.2818 5.04877H9.5M11 12.5H9.5M9.5 5.04877V4.40986C9.5 4.03153 9.21832 3.71147 8.84201 3.67242C7.74356 3.55843 6.6286 3.5 5.5 3.5C4.3714 3.5 3.25644 3.55843 2.15799 3.67242C1.78168 3.71147 1.5 4.03153 1.5 4.40986V9.5003M9.5 5.04877V9.5003M9.5 12.5V9.5003M9.5 9.5003H1.5" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<div class="h-2 w-full bg-neutral-100 rounded-full overflow-hidden">
<div class="h-full bg-brand-700 rounded-full" style="width: 48.2%" role="progressbar" aria-valuenow="48.2" aria-valuemin="0" aria-valuemax="100" aria-label="Progression vers la livraison gratuite" aria-valuetext="48.2% complété - 24.1€ sur 50€">
</div>
</div>
<svg class="text-brand-700 shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</div>
<p class="text-body-base">Plus que <strong class="font-bold">24.1€</strong> pour la livraison offerte</p>
</div>
<div class="grid grid-cols-3 gap-4 py-4">
<div class="flex flex-col gap-1 items-center text-center text-brand-700">
<svg class=" shrink-0" width="24" height="24" 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="M4.75541 10.0589C5.82748 6.0579 9.94 3.68353 13.941 4.75559C15.262 5.10955 16.4038 5.79374 17.3036 6.69528L19.2067 8.59835H16.023C15.6088 8.59835 15.273 8.93414 15.273 9.34835C15.273 9.76256 15.6088 10.0984 16.023 10.0984H21.0156C21.2145 10.0984 21.4053 10.0193 21.546 9.87864C21.6866 9.73797 21.7656 9.54717 21.7656 9.34824V4.35575C21.7656 3.94153 21.4298 3.60575 21.0156 3.60575C20.6014 3.60575 20.2656 3.94153 20.2656 4.35575V7.53591L18.3653 5.63561C17.2841 4.55253 15.9116 3.73071 14.3292 3.3067C9.52803 2.02023 4.593 4.86947 3.30653 9.67067C3.19932 10.0708 3.43676 10.482 3.83686 10.5892C4.23696 10.6964 4.64821 10.459 4.75541 10.0589ZM20.1629 13.4108C19.7628 13.3036 19.3515 13.5411 19.2443 13.9412C18.1722 17.9422 14.0597 20.3165 10.0587 19.2445C8.73774 18.8905 7.59594 18.2063 6.69609 17.3048L4.7942 15.4017H7.97702C8.39123 15.4017 8.72702 15.0659 8.72702 14.6517C8.72702 14.2375 8.39123 13.9017 7.97702 13.9017L2.98438 13.9017C2.57016 13.9017 2.23438 14.2375 2.23438 14.6517V19.6443C2.23438 20.0585 2.57016 20.3943 2.98438 20.3943C3.39859 20.3943 3.73438 20.0585 3.73438 19.6443V16.4632L5.63444 18.3645C6.71564 19.4477 8.08796 20.2693 9.67048 20.6934C14.4717 21.9798 19.4067 19.1306 20.6932 14.3294C20.8004 13.9293 20.563 13.5181 20.1629 13.4108Z" fill="currentColor" />
</svg>
<p class="text-body-sm">Retour gratuit sous 30 jours</p>
</div>
<div class="flex flex-col gap-1 items-center text-center text-brand-700">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2.25 8.25H21.75M2.25 9H21.75M5.25 14.25H11.25M5.25 16.5H8.25M4.5 19.5H19.5C20.7426 19.5 21.75 18.4926 21.75 17.25V6.75C21.75 5.50736 20.7426 4.5 19.5 4.5H4.5C3.25736 4.5 2.25 5.50736 2.25 6.75V17.25C2.25 18.4926 3.25736 19.5 4.5 19.5Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<p class="text-body-sm">Paiement sécurisé</p>
</div>
<div class="flex flex-col gap-1 items-center text-center text-brand-700">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M21 11.25V19.5C21 20.3284 20.3284 21 19.5 21H5.25C4.42157 21 3.75 20.3284 3.75 19.5V11.25M12 4.875C12 3.42525 10.8247 2.25 9.375 2.25C7.92525 2.25 6.75 3.42525 6.75 4.875C6.75 6.32475 7.92525 7.5 9.375 7.5C10.1095 7.5 12 7.5 12 7.5M12 4.875C12 5.59024 12 7.5 12 7.5M12 4.875C12 3.42525 13.1753 2.25 14.625 2.25C16.0747 2.25 17.25 3.42525 17.25 4.875C17.25 6.32475 16.0747 7.5 14.625 7.5C13.8905 7.5 12 7.5 12 7.5M12 7.5V21M3.375 11.25H21.375C21.9963 11.25 22.5 10.7463 22.5 10.125V8.625C22.5 8.00368 21.9963 7.5 21.375 7.5H3.375C2.75368 7.5 2.25 8.00368 2.25 8.625V10.125C2.25 10.7463 2.75368 11.25 3.375 11.25Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<p class="text-body-sm">3 échantillons offert*</p>
</div>
</div>
<div class="flex flex-row justify-between items-center gap-2 sm:gap-4 border-y border-dark/16 px-4 py-2">
<div class="flex flex-row justify-start items-center gap-2">
<img src="/img/favMyNaos.png" alt="MyNAOS" class="w-5 h-5 mr-1">
<span class="h6">MyNAOS</span>
</div>
<div class="flex flex-row justify-end items-center gap-2">
<span class="justify-items-end text-body-base font-bold">+59 points de fidélité</span>
<svg class="text-brand-700 shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</div>
</div>
</div>
</div>
<div x-data class="fixed right-0 z-40 inset-y-0 lg:inset-y-0 max-w-full">
<div x-cloak x-transition.opacity x-show="$store.asideBlocs.asides.find(aside => aside.name === 'corte-ingles')?.open" class="fixed inset-0 w-full h-full bg-black/40"></div>
<div x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="relative bg-white overflow-hidden h-full lg:h-full w-screen md:w-[372px] 2xl:w-[368px] 3xl:w-[508px] flex flex-col lg:rounded-t-none p-8" x-show="$store.asideBlocs.asides.find(aside => aside.name === 'corte-ingles')?.open" @click.outside="$store.asideBlocs.closeAside('corte-ingles')">
<div class="font-medium h4 flex justify-between items-center mb-4">
<span></span>
<button type="button" @click="$store.asideBlocs.closeAside('corte-ingles')" aria-label="Label text" class=" btn btn-neutral btn-outline btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 18 18 6M6 6l12 12" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
<div class="overflow-auto flex-1">
<section class="flex flex-col gap-8">
<div class="flex flex-col gap-4">
<h2 class="h4">Titre</h2>
<h3 class="h5 text-black/64">Texte de présentation</h3>
</div>
<div>
<a href="https://www.elcorteingles.pt/etat-pur/espaco-saude/?srsltid=AfmBOop60U5cTWirTysiQn4hxbRRlKwM7Nhn_WtcrmRpmsYByXW9BFPX" type="button" target="_blank" rel="noopenner noreferer" aria-label="Acheter (s'ouvre dans un nouvel onglet)" class="justify-center btn btn-dark btn-solid btn-size-lg">
Acheter
</a>
</div>
</section>
</div>
</div>
</div>
<div class="max-sm:container sticky top-0 flex flex-col gap-4">
<div class="flex flex-col gap-1">
<h1 class="h4 font-bold">{{ product.title }}</h1>
<p class="h6 text-black/64">{{ product.subtitle }}</p>
</div>
<div class="text-body-sm flex flex-row gap-2 items-center">
<div class="flex flex-row gap-1">
{% for i in 1..5 %}
{% if i <= product.rating.score %}
{% render "@icons-heroicons--star-solid" with {
iconClass: 'text-black',
size: '16',
} %}
{% else %}
{% render "@icons-heroicons--star-outline" with {
iconClass: 'text-black',
size: '16',
} %}
{% endif %}
{% endfor %}
</div>
{% render "@template-link" with {
size: "sm",
label: product.rating.score ~ "/" ~ product.rating.total,
href: '#',
underlined: true,
type: "uno"
} %}
|
{% render "@template-link" with {
size: "sm",
label: product.rating.reviews ~ " avis",
href: '#',
underlined: true,
type: "uno"
} %}
</div>
<p class="text-body-base text-black/64">{{ product.description }}</p>
<div class="flex flex-col gap-2">
<div class="flex justify-between">
<div class="h4">{{ product.price }}€</div>
<div class="text-body-base text-black/72 self-center">{{ product.volume }}</div>
</div>
{% if buttonOpenDrawer %}
{% set buttonAttribute = ('x-data x-init="$store.asideBlocs.addAside(\'' ~ drawerName ~ '\')" @click="$store.asideBlocs.toggleAside(\'' ~ drawerName ~ '\')"')|replace({"\'": "'"}) %}
{% endif %}
{% set buttonLabel = buttonOpenDrawer ? "Acheter" : "Ajouter au panier" %}
{% render "@template-button" with {
color: "dark",
label: buttonLabel,
button_class: "w-full justify-center text-brand-700",
button_attribute: buttonAttribute
} %}
<div class="bg-neutral-50 flex flex-col gap-2 px-4 py-2">
<p class="text-body-base flex flex-row gap-2 items-center">
{% render "@icons-heroicons--cube-outline" with {
size: 16,
iconClass: "text-black/56"
} %}
Livraison estimée entre <strong class="font-bold">{{ product.shipping.duration }}</strong>
</p>
<div aria-hidden="true" class="w-full bg-black/16 h-px"></div>
<div class="flex flex-row justify-between items-center gap-2">
{% render "@icons-heroicons--truck-outline" with {
size: 16,
iconClass: "text-black/56"
} %}
<div class="h-2 w-full bg-neutral-100 rounded-full overflow-hidden">
{% set progress = (product.shipping.freeThresholdRenaming / product.shipping.freeThreshold) * 100 %}
<div class="h-full bg-brand-700 rounded-full"
style="width: {{ progress }}%"
role="progressbar"
aria-valuenow="{{ progress }}"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Progression vers la livraison gratuite"
aria-valuetext="{{ progress }}% complété - {{ product.shipping.freeThresholdRenaming|round(2) }}€ sur {{ product.shipping.freeThreshold }}€">
</div>
</div>
{% render "@icons-heroicons--information-circle-outline" with {
iconClass: "text-brand-700"
} %}
</div>
<p class="text-body-base">Plus que <strong class="font-bold">{{ product.shipping.freeThresholdRenaming }}€</strong> pour la livraison offerte</p>
</div>
<div class="grid grid-cols-3 gap-4 py-4">
{% for feature in product.features %}
<div class="flex flex-col gap-1 items-center text-center text-brand-700">
{% render "@icons-" ~ feature.icon %}
<p class="text-body-sm">{{ feature.text }}</p>
</div>
{% endfor %}
</div>
<div class="flex flex-row justify-between items-center gap-2 sm:gap-4 border-y border-dark/16 px-4 py-2">
<div class="flex flex-row justify-start items-center gap-2">
<img src="/img/favMyNaos.png" alt="MyNAOS" class="w-5 h-5 mr-1">
<span class="h6">MyNAOS</span>
</div>
<div class="flex flex-row justify-end items-center gap-2">
<span class="justify-items-end text-body-base font-bold">+{{ product.rewards.points }} points de fidélité</span>
{% render "@icons-heroicons--information-circle-outline" with {
iconClass: "text-brand-700"
} %}
</div>
</div>
</div>
</div>
{% if buttonOpenDrawer %}
{% render "@pdp-corte-ingles" %}
{% endif %}
{
"product": {
"title": "Acide salicylique 2%",
"subtitle": "Surexposition (soleil ou pollution)",
"rating": {
"score": 4.3,
"total": 5,
"reviews": 256
},
"description": "Véritable soin SOS, l'Acide salicylique 2% est le BHA le plus connu. Grâce à ses propriétés purifiantes et exfoliantes, il combat et prévient efficacement le retour des imperfections locales, affine le grain de peau et désobstrue les pores. Vos boutons et points noirs sont ainsi visiblement réduits.",
"price": 16.9,
"volume": "15ml",
"shipping": {
"duration": "3 à 5 jours",
"freeThreshold": 50,
"freeThresholdRenaming": 24.1
},
"rewards": {
"points": 59
},
"features": [
{
"icon": "heroicons--arrow-rotate-path",
"text": "Retour gratuit sous 30 jours"
},
{
"icon": "heroicons--credit-card-outline",
"text": "Paiement sécurisé"
},
{
"icon": "heroicons--gift-outline",
"text": "3 échantillons offert*"
}
]
},
"buttonOpenDrawer": true,
"drawerName": "corte-ingles"
}
No notes defined.