<div x-data class="fixed right-0 z-40 bottom-0 lg:inset-y-0 max-w-full md:max-w-full !max-w-[95%]">
<div x-cloak x-transition.opacity x-show="" 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 rounded-t-md 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="" @click.outside="">
<div class="font-medium h4 flex justify-between items-center mb-4">
<span></span>
<button type="button" @click="" 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">
<div x-init="$el.closest('.fixed').querySelector('.relative').classList.add('h-screen')">
<section class="flex flex-col gap-2">
<div class="flex flex-col gap-8">
<h3 class="h5 flex gap-1.5">
<span class="text-success"><svg class=" shrink-0" width="32" height="32" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4.5 12.7546L10.5 18.7546L19.5 5.25464" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg></span>
Votre produit a été ajouté au panier
</h3>
<div>
<div class="min-h-14 mb-1 bg-brand-100 flex">
<div class="flex-shrink-0 overflow-hidden self-center">
<img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="La mousse nettoyante" class="w-[64px] ml-2 h-auto object-cover" />
</div>
<div class="flex-1 p-2 flex flex-col justify-between">
<div class="block p-1 text-start">
<div class="flex items-center gap-3">
<div class="text-body-sm">
<h4 class="font-bold">Acide salicylique 2%</h4>
<p>Boutons, points noirs • <span class="text-black/64">15 ml</span></p>
</div>
</div>
</div>
<div class="flex justify-between items-center px-2 py-2 gap-4">
<div class="flex flex-row gap-4 text-body-sm font-bold whitespace-nowrap">
13,41 €
</div>
<div>
<div>
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full items-center">
<div class="input-qty-wrapper" x-data="{qty: 0 }">
<button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
<input type="number" class="input-qty
" placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">
<button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-neutral-50 flex flex-col gap-1 px-2 py-1.5">
<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: NaN%" role="progressbar" aria-valuenow="NaN" aria-valuemin="0" aria-valuemax="100" aria-label="Progression vers la livraison gratuite" aria-valuetext="NaN% complété - NaN€ sur €">
</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>
<div class="flex items-center gap-2">
<div class="text-brand-600">
<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="M2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM15.6103 10.1859C15.8511 9.84887 15.773 9.38046 15.4359 9.1397C15.0989 8.89894 14.6305 8.97701 14.3897 9.31407L11.1543 13.8436L9.53033 12.2197C9.23744 11.9268 8.76256 11.9268 8.46967 12.2197C8.17678 12.5126 8.17678 12.9874 8.46967 13.2803L10.7197 15.5303C10.8756 15.6862 11.0921 15.7656 11.3119 15.7474C11.5316 15.7293 11.7322 15.6153 11.8603 15.4359L15.6103 10.1859Z" fill="currentColor" />
</svg>
</div>
<p class="text-sm">Votre livraison <strong>est offerte</strong> !</p>
</div>
</div>
</div>
<div class="min-h-14 block">
<h3 class="text-body-lg font-bold text-black/64">Recommandé pour vous</h3>
<div class="border-b flex">
<div class="flex-shrink-0 overflow-hidden self-center">
<img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="La mousse nettoyante" class="w-[64px] h-auto object-cover" />
</div>
<div class="flex-1 p-2 flex flex-col justify-between">
<div class="block p-1 text-start">
<div class="flex items-center gap-3">
<div class="text-body-sm">
<h4 class="font-bold hover:text-brand-700">La mousse nettoyante</h4>
<p>Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
</div>
</div>
</div>
<div class="flex justify-between items-center px-2 py-2 gap-4">
<div class="flex flex-row gap-4 text-body-sm font-bold whitespace-nowrap">
13,41 €
</div>
<div>
<button class="py-1 px-2 text-body-xs bg-black text-neutral-25 font-bold">Ajouter</button>
</div>
</div>
</div>
</div>
<div class="border-b flex">
<div class="flex-shrink-0 overflow-hidden self-center">
<img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="La mousse nettoyante" class="w-[64px] h-auto object-cover" />
</div>
<div class="flex-1 p-2 flex flex-col justify-between">
<div class="block p-1 text-start">
<div class="flex items-center gap-3">
<div class="text-body-sm">
<h4 class="font-bold hover:text-brand-700">La mousse nettoyante</h4>
<p>Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
</div>
</div>
</div>
<div class="flex justify-between items-center px-2 py-2 gap-4">
<div class="flex flex-row gap-4 text-body-sm font-bold whitespace-nowrap">
13,41 €
</div>
<div>
<button class="py-1 px-2 text-body-xs bg-black text-neutral-25 font-bold">Ajouter</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="adjusted-marg-t-sm">
<div>
<a href="https://www.elcorteingles.pt/etat-pur/espaco-saude/?srsltid=AfmBOop60U5cTWirTysiQn4hxbRRlKwM7Nhn_WtcrmRpmsYByXW9BFPX" type="button" target="_blank" rel="noopenner noreferer" aria-label="Voir mon panier (s'ouvre dans un nouvel onglet)" class="justify-center btn btn-dark btn-solid btn-size-lg">
Voir mon panier
</a>
</div>
<div class="p-px my-2">
<a href="https://www.elcorteingles.pt/etat-pur/espaco-saude/?srsltid=AfmBOop60U5cTWirTysiQn4hxbRRlKwM7Nhn_WtcrmRpmsYByXW9BFPX" type="button" target="_blank" rel="noopenner noreferer" aria-label="Continuer mes achats (s'ouvre dans un nouvel onglet)" class="justify-center btn btn-dark btn-outline btn-size-lg">
Continuer mes achats
</a>
</div>
<span class="text-body-xs text-neutral-dark">Les frais de livraison et code promo s’appliquent lors du paiement.</span>
</div>
</section>
</div>
</div>
</div>
</div>
{% embed "@side-panel" with { custom_panel_class: "md:max-w-full !max-w-[95%]" } %}
{% block content %}
<div x-init="$el.closest('.fixed').querySelector('.relative').classList.add('h-screen')"> <section class="flex flex-col gap-2">
<div class="flex flex-col gap-8">
<h3 class="h5 flex gap-1.5">
<span class="text-success">{% render "@icons-heroicons--check-outline" with {size: 32} %}</span>
Votre produit a été ajouté au panier</h3>
<div>
<div class="min-h-14 mb-1 bg-brand-100 flex">
<div class="flex-shrink-0 overflow-hidden self-center">
<img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg"
alt="La mousse nettoyante"
class="w-[64px] ml-2 h-auto object-cover"/>
</div>
<div class="flex-1 p-2 flex flex-col justify-between">
<div class="block p-1 text-start">
<div class="flex items-center gap-3">
<div class="text-body-sm">
<h4 class="font-bold">Acide salicylique 2%</h4>
<p>Boutons, points noirs • <span class="text-black/64">15 ml</span></p>
</div>
</div>
</div>
<div class="flex justify-between items-center px-2 py-2 gap-4">
<div class="flex flex-row gap-4 text-body-sm font-bold whitespace-nowrap">
13,41 €
</div>
<div>
<div>
{% render "@template-input-qty" with {
id: product_id,
name: product_id,
type: "qty",
label: product_name,
required: false,
disabled: false,
value: quantity,
state: input.state,
class: "items-center"
} %}
</div>
</div>
</div>
</div>
</div>
<div class="bg-neutral-50 flex flex-col gap-1 px-2 py-1.5">
<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>
<div class="flex items-center gap-2">
<div class="text-brand-600">
{% render "@icons-heroicons--check-circle-solid" %}
</div>
<p class="text-sm">Votre livraison <strong>est offerte</strong> !</p>
</div>
</div>
</div>
<div class="min-h-14 block">
<h3 class="text-body-lg font-bold text-black/64">Recommandé pour vous</h3>
<div class="border-b flex">
<div class="flex-shrink-0 overflow-hidden self-center">
<img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg"
alt="La mousse nettoyante"
class="w-[64px] h-auto object-cover"/>
</div>
<div class="flex-1 p-2 flex flex-col justify-between">
<div class="block p-1 text-start">
<div class="flex items-center gap-3">
<div class="text-body-sm">
<h4 class="font-bold hover:text-brand-700">La mousse nettoyante</h4>
<p>Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
</div>
</div>
</div>
<div class="flex justify-between items-center px-2 py-2 gap-4">
<div class="flex flex-row gap-4 text-body-sm font-bold whitespace-nowrap">
13,41 €
</div>
<div>
<button class="py-1 px-2 text-body-xs bg-black text-neutral-25 font-bold">Ajouter</button>
</div>
</div>
</div>
</div>
<div class="border-b flex">
<div class="flex-shrink-0 overflow-hidden self-center">
<img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg"
alt="La mousse nettoyante"
class="w-[64px] h-auto object-cover"/>
</div>
<div class="flex-1 p-2 flex flex-col justify-between">
<div class="block p-1 text-start">
<div class="flex items-center gap-3">
<div class="text-body-sm">
<h4 class="font-bold hover:text-brand-700">La mousse nettoyante</h4>
<p>Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
</div>
</div>
</div>
<div class="flex justify-between items-center px-2 py-2 gap-4">
<div class="flex flex-row gap-4 text-body-sm font-bold whitespace-nowrap">
13,41 €
</div>
<div>
<button class="py-1 px-2 text-body-xs bg-black text-neutral-25 font-bold">Ajouter</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="adjusted-marg-t-sm">
<div>
{% render "@template-button" with {
label: "Voir mon panier",
href: "https://www.elcorteingles.pt/etat-pur/espaco-saude/?srsltid=AfmBOop60U5cTWirTysiQn4hxbRRlKwM7Nhn_WtcrmRpmsYByXW9BFPX",
external: true,
color: "dark",
type: "solid",
button_class: "justify-center",
} %}
</div>
<div class="p-px my-2">
{% render "@template-button" with {
label: "Continuer mes achats",
href: "https://www.elcorteingles.pt/etat-pur/espaco-saude/?srsltid=AfmBOop60U5cTWirTysiQn4hxbRRlKwM7Nhn_WtcrmRpmsYByXW9BFPX",
external: true,
color: "dark",
type: "outline",
button_class: "justify-center",
} %}
</div>
<span class="text-body-xs text-neutral-dark">Les frais de livraison et code promo s’appliquent lors du paiement.</span>
</div>
</section>
</div>
{% endblock %}
{% endembed %}
/* No context defined. */
'use strict';
module.exports = {
label: 'Drawer add to cart side panel',
preview: '@preview-side-panel',
meta: {
name: "drawer-add-to-cart"
},
context: {
panel: {
title: '',
sidePanelButton: false,
mobilePanel: "full",
showValue: '$store.asideBlocs.asides.find(aside => aside.name === \'drawer-add-to-cart\')?.open',
closeButtonAlpineClick: '$store.asideBlocs.closeAside(\'drawer-add-to-cart\')',
},
},
};
No notes defined.