<div x-data class="fixed right-0 z-40 inset-y-0 max-w-full">
<div x-cloak x-transition.opacity x-show="$store.asideBlocs.asides.find(aside => aside.name === 'pdpProductInfo')?.open" class="fixed inset-0 w-full h-full bg-dark-40 backdrop-blur-xl"></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" x-show="$store.asideBlocs.asides.find(aside => aside.name === 'pdpProductInfo')?.open" class="h-full relative bg-light-white overflow-hidden w-screen md:max-w-screen-sm flex flex-col" @click.outside="$store.asideBlocs.closeAside('pdpProductInfo')">
<div class="p-4 md:px-10 md:py-6 font-medium text-2xl flex justify-between items-center">
Informations produit
<button type="button" @click="$store.asideBlocs.closeAside('pdpProductInfo')" class="max-md:btn-size-sm btn btn-dark-ghost btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</button>
</div>
<div class="px-4 md:px-10 overflow-auto flex-1 border-t border-b border-neutral-200">
<section class="product-details">
<!-- Title Section -->
<h1 class="text-base md:text-xl font-medium text-neutral-800 mt-5 mb-2">Informations produit</h1>
<p class="text-sm md:text-base font-medium text-neutral-800">Précieuse, un modèle conçu en acétate aux lignes épaisses et structurées, associé à une forme carrée oversize pour une allure très mode.</p>
<div class="my-6 border-t border-gray-300"></div>
<!-- Dimensions Section -->
<h2 class="text-base md:text-xl font-medium text-neutral-800 mt-5 mb-2">Dimensions</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
<div class="text-xs md:text-sm font-medium">
<div class="w-12 h-12 mx-auto flex items-center justify-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 64 28.8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4 27.3C21.5245 27.3 27.3 21.5245 27.3 14.4C27.3 7.27553 21.5245 1.5 14.4 1.5C7.27553 1.5 1.5 7.27553 1.5 14.4C1.5 21.5245 7.27553 27.3 14.4 27.3ZM14.4 28.8C22.3529 28.8 28.8 22.3529 28.8 14.4C28.8 6.4471 22.3529 0 14.4 0C6.4471 0 0 6.4471 0 14.4C0 22.3529 6.4471 28.8 14.4 28.8Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.6 27.3C56.7245 27.3 62.5 21.5245 62.5 14.4C62.5 7.27553 56.7245 1.5 49.6 1.5C42.4755 1.5 36.7 7.27553 36.7 14.4C36.7 21.5245 42.4755 27.3 49.6 27.3ZM49.6 28.8C57.5529 28.8 64 22.3529 64 14.4C64 6.4471 57.5529 7.62939e-07 49.6 7.62939e-07C41.6471 7.62939e-07 35.2 6.4471 35.2 14.4C35.2 22.3529 41.6471 28.8 49.6 28.8Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.2 15.15H28.8V13.65H35.2V15.15Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M42.8071 14.9L45.1535 17.2464L44.4464 17.9536L40.8929 14.4L44.4464 10.8464L45.1535 11.5536L42.8071 13.9H56.3929L54.0464 11.5536L54.7536 10.8464L58.3071 14.4L54.7536 17.9536L54.0464 17.2464L56.3929 14.9H42.8071Z" fill="#A3A3A3" />
</svg>
</div>
<p>Largeur du verre</p>
<p>57 mm</p>
</div>
<div class="text-sm font-medium">
<div class="w-12 h-12 mx-auto flex items-center justify-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 64 28.8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4 27.3C21.5245 27.3 27.3 21.5245 27.3 14.4C27.3 7.27553 21.5245 1.5 14.4 1.5C7.27553 1.5 1.5 7.27553 1.5 14.4C1.5 21.5245 7.27553 27.3 14.4 27.3ZM14.4 28.8C22.3529 28.8 28.8 22.3529 28.8 14.4C28.8 6.4471 22.3529 0 14.4 0C6.4471 0 0 6.4471 0 14.4C0 22.3529 6.4471 28.8 14.4 28.8Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.6 27.3C56.7245 27.3 62.5 21.5245 62.5 14.4C62.5 7.27553 56.7245 1.5 49.6 1.5C42.4755 1.5 36.7 7.27553 36.7 14.4C36.7 21.5245 42.4755 27.3 49.6 27.3ZM49.6 28.8C57.5529 28.8 64 22.3529 64 14.4C64 6.4471 57.5529 7.62939e-07 49.6 7.62939e-07C41.6471 7.62939e-07 35.2 6.4471 35.2 14.4C35.2 22.3529 41.6471 28.8 49.6 28.8Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.2 15.15H28.8V13.65H35.2V15.15Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.1016 7.60712L46.7551 9.95357L46.048 9.24646L49.6016 5.69291L53.1551 9.24646L52.448 9.95357L50.1016 7.60712V21.1929L52.448 18.8465L53.1551 19.5536L49.6016 23.1071L46.048 19.5536L46.7551 18.8465L49.1016 21.1929V7.60712Z" fill="#A3A3A3" />
</svg>
</div>
<p>Hauteur du verre</p>
<p>49 mm</p>
</div>
<div class="text-sm font-medium">
<div class="w-12 h-12 mx-auto flex items-center justify-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 64 40.34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.107107 28.8V0H1.30711V28.8H0.107107Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.1071 15.15H1.10711V13.65H51.1071C58.5906 13.65 64.6571 19.7165 64.6571 27.2V28.8H63.1571V27.2C63.1571 20.545 57.7621 15.15 51.1071 15.15Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.91421 37.7L4.26066 40.0464L3.55355 40.7536L0 37.2L3.55355 33.6464L4.26066 34.3536L1.91421 36.7H62.7L60.3536 34.3536L61.0607 33.6464L64.6142 37.2L61.0607 40.7536L60.3536 40.0464L62.7 37.7H1.91421Z" fill="#A3A3A3" />
</svg>
</div>
<p>Longueur branche</p>
<p>135 mm</p>
</div>
<div class="text-sm font-medium">
<div class="w-12 h-12 mx-auto flex items-center justify-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 64 40.34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.1071 27.3C22.2316 27.3 28.0071 21.5245 28.0071 14.4C28.0071 7.27553 22.2316 1.5 15.1071 1.5C7.98262 1.5 2.20709 7.27553 2.20709 14.4C2.20709 21.5245 7.98262 27.3 15.1071 27.3ZM15.1071 28.8C23.06 28.8 29.5071 22.3529 29.5071 14.4C29.5071 6.4471 23.06 0 15.1071 0C7.15419 0 0.707092 6.4471 0.707092 14.4C0.707092 22.3529 7.15419 28.8 15.1071 28.8Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M50.3063 27.3C57.4308 27.3 63.2063 21.5245 63.2063 14.4C63.2063 7.27553 57.4308 1.5 50.3063 1.5C43.1818 1.5 37.4063 7.27553 37.4063 14.4C37.4063 21.5245 43.1818 27.3 50.3063 27.3ZM50.3063 28.8C58.2592 28.8 64.7063 22.3529 64.7063 14.4C64.7063 6.4471 58.2592 0 50.3063 0C42.3534 0 35.9063 6.4471 35.9063 14.4C35.9063 22.3529 42.3534 28.8 50.3063 28.8Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.9079 15.15H29.5079V13.65H35.9079V15.15Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5158 37.7L29.8622 40.0464L29.1551 40.7536L25.6015 37.2L29.1551 33.6464L29.8622 34.3536L27.5158 36.7H37.9015L35.5551 34.3536L36.2622 33.6464L39.8158 37.2L36.2622 40.7536L35.5551 40.0464L37.9015 37.7H27.5158Z" fill="#A3A3A3" />
</svg>
</div>
<p>Largeur du pont</p>
<p>19 mm</p>
</div>
</div>
<div class="my-6 border-t border-gray-300"></div>
<!-- Frame Specs Section -->
<h2 class="text-base md:text-xl font-medium text-neutral-800 mt-5 mb-2">Caractéristiques monture</h2>
<div class="grid gap-2 text-sm md:text-base text-neutral-800">
<div class="flex justify-between">
<span>Brand</span>
<span>ALAIN AFFLELOU</span>
</div>
<div class="flex justify-between">
<span>Shape</span>
<span>Carrée</span>
</div>
<div class="flex justify-between">
<span>Gender</span>
<span>Femme</span>
</div>
<div class="flex justify-between">
<span>Material</span>
<span>Plastique</span>
</div>
<div class="flex justify-between">
<span>Templematerial</span>
<span>Plastique</span>
</div>
<div class="flex justify-between">
<span>Weight</span>
<span>46</span>
</div>
<div class="flex justify-between">
<span>Mounting</span>
<span>Cerclé</span>
</div>
<div class="flex justify-between">
<span>Color</span>
<span>Vert</span>
</div>
<div class="flex justify-between">
<span>Reference</span>
<span>Précieuse</span>
</div>
<div class="flex justify-between">
<span>Gtin</span>
<span>07630629427815</span>
</div>
</div>
<div class="my-6 border-t border-gray-300"></div>
<!-- Lenses Section -->
<h2 class="text-base md:text-xl font-medium text-neutral-800 mt-5 mb-2">Caractéristiques verres</h2>
<div class="flex justify-between text-sm md:text-base font-medium text-neutral-800 mb-5">
<span>Protection</span>
<span>Catégorie 2</span>
</div>
</section>
</div>
</div>
</div>
{% embed "@side-panel" with panel|default({}) %}
{% block content %}
<section class="product-details">
<!-- Title Section -->
<h1 class="text-base md:text-xl font-medium text-neutral-800 mt-5 mb-2">{{ title }}</h1>
<p class="text-sm md:text-base font-medium text-neutral-800">{{ description }}</p>
<div class="my-6 border-t border-gray-300"></div>
<!-- Dimensions Section -->
<h2 class="text-base md:text-xl font-medium text-neutral-800 mt-5 mb-2">Dimensions</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
<div class="text-xs md:text-sm font-medium">
<div class="w-12 h-12 mx-auto flex items-center justify-center">
{% render "@icons-afflelou--largeur-du-verre" %}
</div>
<p>Largeur du verre</p>
<p>{{ dimensions.lenseWidth }} mm</p>
</div>
<div class="text-sm font-medium">
<div class="w-12 h-12 mx-auto flex items-center justify-center">
{% render "@icons-afflelou--hauteur-du-verre" %}
</div>
<p>Hauteur du verre</p>
<p>{{ dimensions.lenseHeight }} mm</p>
</div>
<div class="text-sm font-medium">
<div class="w-12 h-12 mx-auto flex items-center justify-center">
{% render "@icons-afflelou--longueur-branche" %}
</div>
<p>Longueur branche</p>
<p>{{ dimensions.templeLength }} mm</p>
</div>
<div class="text-sm font-medium">
<div class="w-12 h-12 mx-auto flex items-center justify-center">
{% render "@icons-afflelou--largeur-du-pont" %}
</div>
<p>Largeur du pont</p>
<p>{{ dimensions.bridgeWidth }} mm</p>
</div>
</div>
<div class="my-6 border-t border-gray-300"></div>
<!-- Frame Specs Section -->
<h2 class="text-base md:text-xl font-medium text-neutral-800 mt-5 mb-2">Caractéristiques monture</h2>
<div class="grid gap-2 text-sm md:text-base text-neutral-800">
{% for key, value in specs %}
<div class="flex justify-between">
<span>{{ key|title|replace({'_': ' '}) }}</span>
<span>{{ value }}</span>
</div>
{% endfor %}
</div>
<div class="my-6 border-t border-gray-300"></div>
<!-- Lenses Section -->
<h2 class="text-base md:text-xl font-medium text-neutral-800 mt-5 mb-2">Caractéristiques verres</h2>
<div class="flex justify-between text-sm md:text-base font-medium text-neutral-800 mb-5">
<span>Protection</span>
<span>{{ lenses.protection }}</span>
</div>
</section>
{% endblock %}
{% endembed %}
{
"panel": {
"title": "Informations produit",
"sidePanelButton": false,
"showValue": "$store.asideBlocs.asides.find(aside => aside.name === 'pdpProductInfo')?.open",
"closeButtonAlpineClick": "$store.asideBlocs.closeAside('pdpProductInfo')"
},
"title": "Caractères Précieuse",
"description": "Précieuse, un modèle conçu en acétate aux lignes épaisses et structurées, associé à une forme carrée oversize pour une allure très mode.",
"dimensions": {
"lenseWidth": "57",
"lenseHeight": "49",
"templeLength": "135",
"bridgeWidth": "19"
},
"specs": {
"brand": "ALAIN AFFLELOU",
"shape": "Carrée",
"gender": "Femme",
"material": "Plastique",
"templeMaterial": "Plastique",
"weight": "46",
"mounting": "Cerclé",
"color": "Vert",
"reference": "Précieuse",
"gtin": "07630629427815"
},
"lenses": {
"protection": "Catégorie 2"
}
}
No notes defined.