<div class="max-w-5xl mx-auto space-y-4">
<div class="grid grid-cols-2 gap-4">
<div class="relative rounded-xl overflow-hidden h-[300px]">
<img src="/img/store/img.png" alt="Vitrine de lunettes" class="w-full h-full object-cover aspect-square" />
</div>
<div class="relative rounded-xl overflow-hidden h-[300px]">
<img src="/img/store/img_1.png" alt="Intérieur du magasin" class="w-full h-full object-cover aspect-square" />
<button type="button" class="hidden md:block lg:hidden xl:block absolute bottom-4 right-4 btn btn-light btn-icons">
<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="M5.69725 1.48624C5.19563 1.48624 4.78899 1.89288 4.78899 2.3945V12.3028C4.78899 12.8044 5.19563 13.211 5.69725 13.211H7.8665L12.8474 8.23013C13.3599 7.71768 14.055 7.42975 14.7798 7.42975C15.4149 7.42975 16.0271 7.65077 16.5138 8.05022V2.3945C16.5138 1.89288 16.1071 1.48624 15.6055 1.48624H5.69725ZM18 2.3945C18 1.07205 16.9279 0 15.6055 0H5.69725C4.3748 0 3.30275 1.07205 3.30275 2.3945V12.3028C3.30275 13.6252 4.3748 14.6972 5.69725 14.6972H15.6055C16.9279 14.6972 18 13.6252 18 12.3028V2.3945ZM16.5138 10.1335L15.6614 9.2811C15.4276 9.04732 15.1105 8.91599 14.7798 8.91599C14.4492 8.91599 14.1321 9.04732 13.8983 9.2811L9.96836 13.211H15.6055C16.1071 13.211 16.5138 12.8044 16.5138 12.3028V10.1335ZM0.743119 3.30275C1.15353 3.30275 1.48624 3.63546 1.48624 4.04587V15.6055C1.48624 15.8464 1.58193 16.0774 1.75226 16.2477C1.92259 16.4181 2.15361 16.5138 2.3945 16.5138H13.9541C14.3645 16.5138 14.6972 16.8465 14.6972 17.2569C14.6972 17.6673 14.3645 18 13.9541 18H2.3945C1.75944 18 1.15039 17.7477 0.701331 17.2987C0.252276 16.8496 0 16.2406 0 15.6055V4.04587C0 3.63546 0.332706 3.30275 0.743119 3.30275ZM9 4.78899C8.49838 4.78899 8.09174 5.19563 8.09174 5.69725C8.09174 6.19886 8.49838 6.6055 9 6.6055C9.50162 6.6055 9.90826 6.19886 9.90826 5.69725C9.90826 5.19563 9.50162 4.78899 9 4.78899ZM6.6055 5.69725C6.6055 4.3748 7.67756 3.30275 9 3.30275C10.3224 3.30275 11.3945 4.3748 11.3945 5.69725C11.3945 7.01969 10.3224 8.09174 9 8.09174C7.67756 8.09174 6.6055 7.01969 6.6055 5.69725Z" fill="currentColor" />
</svg>
Voir toutes les photos
</button>
<button type="button" class="block md:hidden lg:block xl:hidden absolute bottom-4 right-4 btn btn-light 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="M5.69725 1.48624C5.19563 1.48624 4.78899 1.89288 4.78899 2.3945V12.3028C4.78899 12.8044 5.19563 13.211 5.69725 13.211H7.8665L12.8474 8.23013C13.3599 7.71768 14.055 7.42975 14.7798 7.42975C15.4149 7.42975 16.0271 7.65077 16.5138 8.05022V2.3945C16.5138 1.89288 16.1071 1.48624 15.6055 1.48624H5.69725ZM18 2.3945C18 1.07205 16.9279 0 15.6055 0H5.69725C4.3748 0 3.30275 1.07205 3.30275 2.3945V12.3028C3.30275 13.6252 4.3748 14.6972 5.69725 14.6972H15.6055C16.9279 14.6972 18 13.6252 18 12.3028V2.3945ZM16.5138 10.1335L15.6614 9.2811C15.4276 9.04732 15.1105 8.91599 14.7798 8.91599C14.4492 8.91599 14.1321 9.04732 13.8983 9.2811L9.96836 13.211H15.6055C16.1071 13.211 16.5138 12.8044 16.5138 12.3028V10.1335ZM0.743119 3.30275C1.15353 3.30275 1.48624 3.63546 1.48624 4.04587V15.6055C1.48624 15.8464 1.58193 16.0774 1.75226 16.2477C1.92259 16.4181 2.15361 16.5138 2.3945 16.5138H13.9541C14.3645 16.5138 14.6972 16.8465 14.6972 17.2569C14.6972 17.6673 14.3645 18 13.9541 18H2.3945C1.75944 18 1.15039 17.7477 0.701331 17.2987C0.252276 16.8496 0 16.2406 0 15.6055V4.04587C0 3.63546 0.332706 3.30275 0.743119 3.30275ZM9 4.78899C8.49838 4.78899 8.09174 5.19563 8.09174 5.69725C8.09174 6.19886 8.49838 6.6055 9 6.6055C9.50162 6.6055 9.90826 6.19886 9.90826 5.69725C9.90826 5.19563 9.50162 4.78899 9 4.78899ZM6.6055 5.69725C6.6055 4.3748 7.67756 3.30275 9 3.30275C10.3224 3.30275 11.3945 4.3748 11.3945 5.69725C11.3945 7.01969 10.3224 8.09174 9 8.09174C7.67756 8.09174 6.6055 7.01969 6.6055 5.69725Z" fill="currentColor" />
</svg>
</button>
</div>
</div>
<div class="relative rounded-xl overflow-hidden h-[300px] bg-gray-100">
<div id="store-map" class="w-full h-full">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2623.3704359478315!2d2.3202016770622995!3d48.88927707133626!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fad1d10c725%3A0xa879b36b67c30f5a!2s98%20Av.%20de%20Clichy%2C%2075017%20Paris!5e0!3m2!1sfr!2sfr!4v1732567114782!5m2!1sfr!2sfr" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="h-full w-full"></iframe>
</div>
<button type="button" class="absolute bottom-4 right-4 btn btn-light btn-icons">
<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="M3.05546 3.05546C3.57118 2.53973 4.27065 2.25 5 2.25H8C8.41421 2.25 8.75 2.58579 8.75 3C8.75 3.41421 8.41421 3.75 8 3.75H5C4.66848 3.75 4.35054 3.8817 4.11612 4.11612C3.8817 4.35054 3.75 4.66848 3.75 5V8C3.75 8.41421 3.41421 8.75 3 8.75C2.58579 8.75 2.25 8.41421 2.25 8V5C2.25 4.27065 2.53973 3.57118 3.05546 3.05546ZM15.25 3C15.25 2.58579 15.5858 2.25 16 2.25H19C19.7293 2.25 20.4288 2.53973 20.9445 3.05546C21.4603 3.57118 21.75 4.27065 21.75 5V8C21.75 8.41421 21.4142 8.75 21 8.75C20.5858 8.75 20.25 8.41421 20.25 8V5C20.25 4.66848 20.1183 4.35054 19.8839 4.11612C19.6495 3.8817 19.3315 3.75 19 3.75H16C15.5858 3.75 15.25 3.41421 15.25 3ZM3 15.25C3.41421 15.25 3.75 15.5858 3.75 16V19C3.75 19.3315 3.8817 19.6495 4.11612 19.8839C4.35054 20.1183 4.66848 20.25 5 20.25H8C8.41421 20.25 8.75 20.5858 8.75 21C8.75 21.4142 8.41421 21.75 8 21.75H5C4.27065 21.75 3.57118 21.4603 3.05546 20.9445C2.53973 20.4288 2.25 19.7293 2.25 19V16C2.25 15.5858 2.58579 15.25 3 15.25ZM21 15.25C21.4142 15.25 21.75 15.5858 21.75 16V19C21.75 19.7293 21.4603 20.4288 20.9445 20.9445C20.4288 21.4603 19.7293 21.75 19 21.75H16C15.5858 21.75 15.25 21.4142 15.25 21C15.25 20.5858 15.5858 20.25 16 20.25H19C19.3315 20.25 19.6495 20.1183 19.8839 19.8839C20.1183 19.6495 20.25 19.3315 20.25 19V16C20.25 15.5858 20.5858 15.25 21 15.25Z" fill="currentColor" />
</svg>
Agrandir la carte
</button>
</div>
</div>
<script>
function initMap() {
const storeLocation = {
lat: 48.8566,
lng: 2.3522
};
const map = new google.maps.Map(document.getElementById('store-map'), {
center: storeLocation,
zoom: 16,
styles: [{
"featureType": "poi",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}]
});
const marker = new google.maps.Marker({
position: storeLocation,
map: map,
title: "ALAIN AFFLELOU Opticien et Acousticien Paris"
});
}
</script>
{# components/store-gallery-map/store-gallery-map.twig #}
<div class="max-w-5xl mx-auto space-y-4">
{# Photo Gallery Grid #}
<div class="grid grid-cols-2 gap-4">
{# Left Image #}
<div class="relative rounded-xl overflow-hidden h-[300px]">
<img
src="{{ store.gallery[0].url }}"
alt="Vitrine de lunettes"
class="w-full h-full object-cover aspect-square"
/>
</div>
{# Right Image with overlay button #}
<div class="relative rounded-xl overflow-hidden h-[300px]">
<img
src="{{ store.gallery[1].url }}"
alt="Intérieur du magasin"
class="w-full h-full object-cover aspect-square"
/>
{% render "@template-button" with {
color: "light",
type: "leading-icon",
label: "Voir toutes les photos",
icon: {
name: "library--image"
},
button_class: "hidden md:block lg:hidden xl:block absolute bottom-4 right-4",
} %}
{% render "@template-button" with {
color: "light",
type: "only-icon",
icon: {
name: "library--image"
},
button_class: "block md:hidden lg:block xl:hidden absolute bottom-4 right-4",
} %}
</div>
</div>
{# Map Section #}
<div class="relative rounded-xl overflow-hidden h-[300px] bg-gray-100">
<div id="store-map" class="w-full h-full">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2623.3704359478315!2d2.3202016770622995!3d48.88927707133626!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fad1d10c725%3A0xa879b36b67c30f5a!2s98%20Av.%20de%20Clichy%2C%2075017%20Paris!5e0!3m2!1sfr!2sfr!4v1732567114782!5m2!1sfr!2sfr" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="h-full w-full"></iframe>
</div>
{% render "@template-button" with {
color: "light",
type: "leading-icon",
label: "Agrandir la carte",
icon: {
name: "library--scale-upsize"
},
button_class: "absolute bottom-4 right-4",
} %}
</div>
</div>
{# Map Script #}
<script>
function initMap() {
const storeLocation = {
lat: {{ store.location.lat }},
lng: {{ store.location.lng }}
};
const map = new google.maps.Map(document.getElementById('store-map'), {
center: storeLocation,
zoom: 16,
styles: [
{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
}
]
});
const marker = new google.maps.Marker({
position: storeLocation,
map: map,
title: "{{ store.name }}"
});
}
</script>
{
"store": {
"name": "ALAIN AFFLELOU Opticien et Acousticien Paris",
"gallery": [
{
"url": "/img/store/img.png",
"alt": "Vitrine de lunettes"
},
{
"url": "/img/store/img_1.png",
"alt": "Intérieur du magasin"
}
],
"location": {
"lat": 48.8566,
"lng": 2.3522,
"address": "98 Avenue de Clichy, 75017 Paris"
}
}
}
No notes defined.