<div class="relative md:py-8 h-full w-full flex flex-col sm:h-[calc(100vh-200px)]">
<div class="order-2 md:absolute md:inset-0 md:z-0 w-full h-full">
<div x-data="googleMap()" x-init="init()" class="flex gap-4 h-full">
<div id="DEMO_MAP_ID" class="w-full sm:h-full" :class="$store.locator.filteredDistanceStores.length !== 0 ? 'max-sm:aspect-square' : 'max-sm:aspect-[2/3]' "></div>
</div>
<script>
function googleMap() {
let mapsLib = null;
let markerLib = null;
let mapInstance = null;
return {
mapId: "DEMO_MAP_ID",
markers: [],
selectedMarker: null,
markerCluster: null,
CustomOverlayWindow: null,
infoWindow: null,
async init() {
try {
await this.loadLibraries();
await this.initializeMapAndMarkers();
this.watchStores();
} catch (error) {
console.error('Erreur init:', error);
}
},
initializeMapAndMarkers() {
this.initMap();
this.updateMarkersFromStore();
},
watchStores() {
this.$watch('$store.locator.allStores', () => {
this.updateMarkersFromStore();
});
this.$store.locator.onSelectStore = (store) => {
this.showStorePopup(store);
};
},
async loadLibraries() {
try {
const {
maps,
marker
} = await this.setupGoogleLibraries();
mapsLib = maps;
markerLib = marker;
} catch (error) {
console.error('Erreur lors du chargement des bibliothèques:', error);
throw error;
}
},
async setupGoogleLibraries() {
const [maps, marker] = await Promise.all([
google.maps.importLibrary("maps"),
google.maps.importLibrary("marker"),
]);
this.CustomOverlayWindow = class extends google.maps.OverlayView {
constructor(position, contentHTML, map) {
super();
this.position = position;
this.containerDiv = document.createElement("div");
this.containerDiv.className = "absolute z-[999] pointer-events-auto";
this.containerDiv.appendChild(contentHTML);
const arrow = document.createElement("div");
arrow.className = `
absolute
top-1/2 left-[-7px] -translate-y-1/2
border-y-[7px] border-y-transparent
border-r-[7px] border-r-white
`;
this.containerDiv.appendChild(arrow);
this.setMap(map);
}
onAdd() {
this.getPanes().floatPane.appendChild(this.containerDiv);
}
draw() {
const projection = this.getProjection();
const point = projection.fromLatLngToDivPixel(this.position);
if (point) {
const offsetX = 24;
const offsetY = -this.containerDiv.offsetHeight / 2;
this.containerDiv.style.left = `${point.x + offsetX}px`;
this.containerDiv.style.top = `${point.y + offsetY}px`;
}
}
onRemove() {
this.containerDiv?.remove();
}
close() {
this.setMap(null);
}
};
return {
maps,
marker
};
},
async initMap() {
if (!mapsLib) {
throw new Error('Les bibliothèques Google Maps ne sont pas chargées');
}
try {
const urlParams = new URLSearchParams(window.location.search);
const lat = urlParams.get('lat') || 6.603354;
const lng = urlParams.get('lng') || 1.888334;
const validation = this.$store.locator.validateCoordinates(lat, lng);
const coordinates = validation.isValid ?
validation.coordinates : {
lat: 46.603354,
lng: 1.888334
};
mapInstance = new google.maps.Map(document.getElementById(this.mapId), {
center: coordinates,
zoom: 4,
mapId: this.mapId,
mapTypeControl: false,
fullscreenControl: false,
streetViewControl: false,
zoomControl: !this.$store.screen.isMobile
});
this.$store.locator.mapInstance = mapInstance;
this.$store.locator.updateDistances();
mapInstance.addListener('idle', () => {
this.$store.locator.updateDistances();
this.updateUrlParams();
});
} catch (error) {
console.error('Erreur lors de l\'initialisation de la carte:', error);
throw error;
}
},
updateUrlParams() {
if (!mapInstance) return;
try {
const center = mapInstance.getCenter();
const newUrl = new URL(window.location.href);
const validation = this.$store.locator.validateCoordinates(
center.lat(),
center.lng()
);
if (validation.isValid) {
newUrl.searchParams.set('lat', validation.coordinates.lat.toFixed(6));
newUrl.searchParams.set('lng', validation.coordinates.lng.toFixed(6));
window.history.replaceState({}, '', newUrl.toString());
}
} catch (error) {
console.error('Erreur lors de la mise à jour des paramètres URL:', error);
}
},
createMarkerElement(isSelected = false) {
const container = document.createElement('div');
container.className = `relative group`;
const baseClass = isSelected ?
'text-black hover:text-neutral-900' :
'text-brand-500 hover:text-brand-600';
const detailPathClass = isSelected ?
'fill-white' :
'fill-black group-hover:fill-white';
container.innerHTML = `
<svg width="41" height="49" viewBox="0 0 41 49" fill="none" xmlns="http://www.w3.org/2000/svg" class="transition-colors duration-200 ${baseClass}">
<path d="M21.5709 48.2273L21.5709 48.2274L21.5759 48.2246L21.6419 48.1875L21.6438 48.1864C21.6843 48.1634 21.7407 48.1311 21.8121 48.0894L21.56 47.6576L21.8121 48.0894C21.9549 48.006 22.1575 47.8852 22.4115 47.7276C22.9191 47.4126 23.6333 46.9495 24.4855 46.3428C26.186 45.132 28.4554 43.3354 30.7311 40.9871C35.2546 36.3193 40 29.2591 40 20.1495C40 9.30109 31.2732 0.5 20.5 0.5C9.72676 0.5 1 9.30109 1 20.1495C1 29.2591 5.74544 36.3193 10.2689 40.9871C12.5446 43.3354 14.814 45.132 16.5145 46.3428C17.3667 46.9495 18.0809 47.4126 18.5885 47.7276C18.8425 47.8852 19.0451 48.006 19.1879 48.0894L19.44 47.6576L19.1879 48.0894C19.2593 48.1311 19.3157 48.1634 19.3562 48.1864L19.358 48.1874L19.4223 48.2236L19.4252 48.2252C20.0904 48.5932 20.9089 48.5892 21.5709 48.2273Z" fill="currentColor" stroke="white" stroke-linejoin="round"/>
<path class="${detailPathClass}" fill-rule="evenodd" clip-rule="evenodd" d="M28.7676 24.4986H13.331L13.3631 24.2493C13.6217 22.2282 14.5391 20.5823 16.0902 19.3575C17.6352 18.1364 19.3937 17.5171 21.3176 17.5171C23.2957 17.5171 24.9873 18.1205 26.3448 19.3103C27.7007 20.5 28.5066 22.1623 28.7402 24.2526L28.7676 24.4986ZM21.3177 16.3559C18.779 16.3559 16.5538 17.2136 14.7033 18.9055C12.8579 20.5945 11.9218 22.8317 11.9218 25.5549C11.9218 28.2532 12.8448 30.4591 14.6654 32.1118C16.4887 33.7672 18.6502 34.6064 21.0888 34.6064C23.1885 34.6064 25.0014 34.1216 26.4777 33.1652C27.8869 32.2525 28.9513 30.9261 29.6455 29.2188L28.4592 28.9541C27.1369 31.9591 24.6588 33.4816 21.0888 33.4816C19.0591 33.4816 17.2387 32.7608 15.6782 31.3391C14.1162 29.9147 13.3108 28.0068 13.2844 25.6664L13.2819 25.4418H30.1426V25.007C30.0432 22.4551 29.1634 20.349 27.5265 18.7549C25.8926 17.1631 23.8038 16.3559 21.3177 16.3559Z"/>
<path class="${detailPathClass}" fill-rule="evenodd" clip-rule="evenodd" d="M23.7425 10.5L23.7384 10.6097C23.7105 11.4097 23.4413 12.0745 22.9371 12.585C22.403 13.1245 21.724 13.3984 20.9195 13.3984C20.1349 13.3984 19.467 13.1252 18.9334 12.5855C18.4282 12.0754 18.1584 11.4102 18.1305 10.6097L18.1271 10.5H16.9199L16.9226 10.6172C16.9521 11.7614 17.3271 12.6959 18.0383 13.396C18.7816 14.1286 19.7507 14.5 20.9195 14.5C22.0885 14.5 23.0573 14.1286 23.8008 13.396C24.5119 12.6964 24.8875 11.7617 24.917 10.6172L24.9199 10.5H23.7425Z"/>
</svg>
`;
return container;
},
updateMarkersFromStore() {
if (!markerLib || !mapInstance) return;
try {
this.clearMarkers();
const validStores = this.$store.locator.allStores.filter(store => {
const validation = this.$store.locator.validateCoordinates(store.lat, store.lng);
if (!validation.isValid) {
console.warn(`Marqueur ignoré pour le store ${store.id || 'Unknown'}: ${validation.error}`);
return false;
}
return true;
});
this.markers = validStores.map(store => {
const validation = this.$store.locator.validateCoordinates(store.lat, store.lng);
const position = validation.coordinates;
const marker = new markerLib.AdvancedMarkerElement({
position,
content: this.createMarkerElement(),
map: mapInstance
});
this.addMarkerEvents(marker, store);
return marker;
});
this.createMarkerCluster(this.markers);
} catch (error) {
console.error('Erreur lors de la mise à jour des marqueurs:', error);
}
},
clearMarkers() {
try {
if (this.markerCluster) {
this.markerCluster.setMap(null);
}
this.markers.forEach(marker => marker.setMap(null));
this.markers = [];
} catch (error) {
console.error('Erreur lors du nettoyage des marqueurs:', error);
}
},
createMarkerCluster(markersToCluster) {
if (!mapInstance || !markersToCluster.length) return;
try {
this.markerCluster = new markerClusterer.MarkerClusterer({
markers: markersToCluster,
map: mapInstance,
ignoreHidden: true,
algorithm: new markerClusterer.SuperClusterAlgorithm({
radius: 150,
maxZoom: 12
}),
renderer: {
render: ({
count,
position
}) => {
let size = 56;
if (count < 10) size = 40;
else if (count >= 100) size = 72;
const container = document.createElement('div');
container.className = `
flex items-center justify-center
rounded-full
text-black text-body-lg font-bold
ring-2 ring-brand-500/32
bg-brand-500
transition-all duration-200
hover:ring-[6px] hover:bg-brand-600 hover:text-white
`;
container.style.width = `${size}px`;
container.style.height = `${size}px`;
container.textContent = count;
return new markerLib.AdvancedMarkerElement({
position,
content: container
});
}
}
});
} catch (error) {
console.error('Erreur lors de la création du cluster de marqueurs:', error);
}
},
showStorePopup(store) {
const content = this.createInfoWindowContent(store);
const closeBtn = content.querySelector('[data-close]');
if (this.$store.screen.isMobile) {
const layer = document.createElement('div');
layer.className = "fixed inset-0 z-[9999] bg-white p-4 overflow-auto";
closeBtn?.addEventListener('click', () => {
layer.remove();
this.closeInfoWindow();
});
layer.appendChild(content);
document.body.appendChild(layer);
} else {
const position = new google.maps.LatLng(store.lat, store.lng);
this.$store.locator.setMapCenter(store.lat, store.lng);
closeBtn?.addEventListener('click', () => this.closeInfoWindow());
this.infoWindow = new this.CustomOverlayWindow(position, content, this.$store.locator.mapInstance);
}
},
addMarkerEvents(marker, store) {
marker.addListener('gmp-click', () => {
if (this.infoWindow) {
this.infoWindow.close();
}
if (this.selectedMarker) {
this.selectedMarker.setMap(null);
}
const selected = new markerLib.AdvancedMarkerElement({
position: {
lat: parseFloat(store.lat),
lng: parseFloat(store.lng)
},
content: this.createMarkerElement(true),
map: mapInstance
});
this.addMarkerEvents(selected, store);
this.selectedMarker = selected;
this.showStorePopup(store);
});
},
createInfoWindowContent(store) {
const div = document.createElement('div');
div.className = "max-md:fixed max-md:inset-0 w-full h-full bg-white z-[9999]";
div.innerHTML = `<div class="flex flex-col gap-3 cursor-default h-full bg-white md:shadow-32 md:w-screen-50 md:max-w-80 p-3" @click.outside="closeInfoWindow()">
<div class="bg-brand-100 flex justify-between items-start gap-2 relative px-4 py-2">
<div>
<h3 class="text-click-sm text-black font-bold uppercase line-clamp-1">${store.name}</h3>
<p class="text-click-xs leading-tight text-black/80">${store.address}<br>${store.city}</p>
</div>
<button
type="button"
data-close
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="flex flex-col gap-3 text-click-xs px-4">
<div class="flex items-center gap-2 font-bold">
<svg class=" 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="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z"
stroke="currentColor"
stroke-width="1.5"
fill="none"
/>
</svg> ${store.phone
? `<a href="tel:${store.phone.replace(/\s+/g, '')}">${store.phone}</a>`
: `<span>Téléphone non disponible</span>`
}
</div>
<div class="flex flex-col gap-2">
<h4 class="font-bold flex items-center gap-1">
<svg class=" shrink-0"
width="16"
height="16"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 21 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z"
stroke="currentColor"
stroke-width="1.5"
fill="none"
/>
</svg> Horaires d’ouverture
</h4>
<div class="divide-y divide-black/08">
${Alpine.store('locator').days.map(day => {
const value = (store[day.key] || '').trim();
const segments = value.includes(',') ? value.split(',').map(s => s.trim()) : [value];
const closed = segments[0].toLowerCase().includes("fermé");
return `
<div class="flex justify-between py-1">
<span class="font-bold">${day.label}</span>
<span class="whitespace-nowrap">
${segments.filter(Boolean).join('<br>') || 'Fermé'}
</span>
</div>
`;
}).join('')}
</div>
</div>
<a href="https://www.google.com/maps/dir/?api=1&destination=${store.lat},${store.lng}"
type="button"
target="_blank" rel="noopenner noreferer"
aria-label="Itinéraire (s'ouvre dans un nouvel onglet)"
class="w-fit btn btn-dark btn-outline btn-size-sm btn-icons">
Itinéraire
<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="M17.051 2.52738C17.2846 2.43058 17.5535 2.48403 17.7323 2.66281C17.911 2.84159 17.9645 3.11047 17.8677 3.34404L11.7202 18.1699C11.6147 18.4239 11.3557 18.5791 11.082 18.5522C10.8083 18.5254 10.5843 18.3228 10.5302 18.0532L9.1652 11.2299L2.34186 9.86488C2.07224 9.81076 1.86968 9.58677 1.84284 9.31308C1.81601 9.0394 1.97122 8.78033 2.2252 8.67488L17.051 2.52738Z"
stroke="currentColor"
stroke-width="1.5"
fill="none"
/>
</svg>
</a>
</div>
</div>`;
return div;
},
closeInfoWindow() {
this.infoWindow.close();
this.selectedMarker.setMap(null);
this.selectedMarker = null;
}
};
}
</script>
</div>
<div class="sm:container order-1 md:order-none md:z-20 grid grid-cols-4 sm:grid-cols-12 pointer-events-none">
<div class="bg-white col-span-4 sm:col-span-12 md:col-span-4 h-full flex flex-col pointer-events-auto">
<div class="flex flex-col gap-6 adjusted-marg-x-sm py-6 bg-white">
<h1 class="h6">Trouver un point de vente près de chez moi</h1>
<div class="flex gap-4">
<div class="relative flex-1" x-data="SearchPlace()" @click.away="showPredictions = false">
<div class="flex gap-3">
<div class="relative flex-1">
<div class="input-wrapper input-wrapper-select relative flex items-center bg-white h-12 overflow-hidden">
<input x-ref="input" type="text" x-model="query" @focus="showPredictions = predictions.length > 0" placeholder="Adresse, code postal..." class="form-select w-full h-full pl-4 pr-12 text-neutral-900 text-base placeholder-neutral-500" />
<button type="button" @click="getLocation()" aria-label="géolocalisez-vous" class="absolute right-3 top-1/2 -translate-y-1/2 btn btn-light btn-solid btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13Z" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M8 0.5V3" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M0.5 8H3" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M8 15.5V13" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M15.5 8H13" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
<div x-cloak x-show="showPredictions" class="absolute z-10 top-full left-0 right-0 mt-2 bg-white shadow-md dropdown-content w-full overflow-auto max-h-screen-40" x-transition>
<template x-for="prediction in predictions" :key="prediction.place_id">
<button @click="selectPlace(prediction)" class="dropdown-item cursor-pointer p-2 truncate text-left w-full">
<span x-text="prediction.structured_formatting.main_text + ', ' + prediction.structured_formatting.secondary_text" class="text-neutral-900"></span>
</button>
</template>
</div>
</div>
<button type="button" class=" btn btn-dark btn-outline btn-size-md">
OK
</button>
</div>
</div>
</div>
</div>
<script>
function SearchPlace() {
return {
query: '',
lastSelectedQuery: '',
autocomplete: null,
geocoder: null,
predictions: [],
showPredictions: false,
selectedPlace: null,
isLocating: false,
async init() {
try {
const {
AutocompleteService
} = await google.maps.importLibrary("places");
this.autocomplete = new AutocompleteService();
this.geocoder = new google.maps.Geocoder();
this.getLocation(false);
this.$watch('query', this.debounce(this.handleQueryChange, 300));
} catch (error) {
console.error('Erreur chargement Google Places :', error);
}
},
handleQueryChange(value) {
if (value === this.lastSelectedQuery) {
console.log("lastSelectedQuery OK")
return;
}
console.log("value", value)
if (value.length > 2) {
console.log("getPredictions OK")
this.getPredictions(value);
} else {
console.log("clearPredictions OK")
this.clearPredictions();
}
},
async getPredictions(input) {
try {
const response = await this.autocomplete.getPlacePredictions({
input,
types: ['(regions)'],
});
this.predictions = response.predictions;
console.log(this.predictions.length > 0)
this.showPredictions = this.predictions.length > 0;
} catch (error) {
console.error('Erreur predictions :', error);
}
},
async selectPlace(prediction) {
try {
const response = await this.geocoder.geocode({
placeId: prediction.place_id
});
const result = response.results[0];
const location = result.geometry.location;
const components = result.address_components;
let postalCode = components.find(c => c.types.includes('postal_code'))?.long_name;
const city = components.find(c => c.types.includes('locality'))?.long_name ||
components.find(c => c.types.includes('postal_town'))?.long_name ||
components.find(c => c.types.includes('administrative_area_level_3'))?.long_name ||
components.find(c => c.types.includes('administrative_area_level_2'))?.long_name;
const country = components.find(c => c.types.includes('country'))?.long_name;
// Fallback 1: Try to extract postal code from formatted address
if (!postalCode && result.formatted_address) {
const match = result.formatted_address.match(/\b\d{5}\b/);
if (match) postalCode = match[0];
}
const parts = [];
if (postalCode) parts.push(postalCode);
if (city) parts.push(city);
if (country) parts.push(country);
this.query = parts.join(', ');
this.lastSelectedQuery = this.query;
this.$store.locator.setMapCenter(location.lat(), location.lng(), 12);
this.clearPredictions();
this.$nextTick(() => {
this.$refs.input?.blur();
});
} catch (error) {
console.error('Erreur géolocalisation :', error);
}
},
getLocation(showError = true) {
if (!navigator.geolocation) {
showError && alert('La géolocalisation n\'est pas supportée par ce navigateur.');
return;
}
this.isLocating = true;
navigator.geolocation.getCurrentPosition(
(position) => {
const {
latitude,
longitude
} = position.coords || {};
if (!latitude || !longitude) {
console.warn('Coordonnées GPS vides.');
this.isLocating = false;
return;
}
Alpine.store('locator').setMapCenter(latitude, longitude, 12);
this.isLocating = false;
},
(error) => {
this.isLocating = false;
if (!showError) return;
const messages = {
1: "Veuillez autoriser la géolocalisation dans les paramètres du navigateur.",
2: "Votre position n'est pas disponible actuellement.",
3: "La demande de géolocalisation a expiré."
};
alert(messages[error.code] || "Erreur de géolocalisation inconnue.");
}, {
enableHighAccuracy: true,
timeout: 3000,
maximumAge: 30000
}
);
},
clearPredictions() {
this.showPredictions = false;
this.predictions = [];
},
debounce(func, delay) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
}
}
}
</script>
</div>
</div>
<div class="sm:container order-3 md:order-none md:z-10 grid grid-cols-4 sm:grid-cols-12 pointer-events-none">
<div class="bg-white col-span-4 sm:col-span-12 md:col-span-4 h-full flex flex-col pointer-events-auto">
<div class="flex flex-col gap-3 h-full md:max-h-screen-50 overflow-auto adjusted-marg-x-sm adjusted-marg-b-sm max-sm:adjusted-marg-t-sm" x-data="listStoreLocator()" x-show="stores.length > 0">
<div class="text-body-sm self-stretch justify-center"><span x-text="stores.length < 10 ? stores.length : '9'"></span> points de vente État pur</div>
<template x-for="store in getStores">
<div class="flex flex-col gap-3 bg-white w-full border border-black/16 " x-data="{ open: false }">
<div class="px-4 py-3 flex items-start justify-between gap-2">
<div class="flex-1 min-w-0">
<h3 class="text-click-sm font-bold uppercase text-black truncate" x-text="store.name"></h3>
<p class="text-click-xs text-black/80 leading-snug line-clamp-2">
<span x-text="store.address"></span><br>
<span x-text="`${store.city} (${store.distance})`"></span>
</p>
</div>
<div>
<button type="button" @click="$store.locator.goToStore(store)" aria-label="Label text" class=" btn btn-dark btn-simple btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="16" height="16" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M15.5 6L15.5 3.1C15.5001 2.69101 15.2511 2.3232 14.8713 2.17133L10.8713 0.571333C10.633 0.475999 10.3671 0.475999 10.1287 0.571333L5.87134 2.27467C5.63296 2.37 5.36705 2.37 5.12867 2.27467L1.18601 0.697333C1.03153 0.635421 0.85637 0.654428 0.718768 0.748035C0.581166 0.841642 0.499157 0.997578 0.500007 1.164L0.500007 10.746C0.499938 11.155 0.748928 11.5228 1.12867 11.6747L5.12867 13.2747C5.36705 13.37 5.63296 13.37 5.87134 13.2747L7.79201 12.506" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M5.5 2.346L5.5 13.346" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M10.5 0.5L10.5 5.5" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M12.5 10.2993C12.6381 10.2993 12.75 10.4113 12.75 10.5493" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M12.25 10.5493C12.25 10.4113 12.3619 10.2993 12.5 10.2993" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M12.5 10.8C12.3619 10.8 12.25 10.6881 12.25 10.55" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M12.75 10.5493C12.75 10.6874 12.6381 10.7993 12.5 10.7993" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M12.5 7.54933C14.1569 7.54933 15.5 8.89248 15.5 10.5493C15.5 11.83 13.708 14.2667 12.894 15.308C12.7992 15.4293 12.6539 15.5002 12.5 15.5002C12.3461 15.5002 12.2008 15.4293 12.106 15.308C11.292 14.2673 9.5 11.83 9.5 10.5493C9.5 8.89248 10.8431 7.54933 12.5 7.54933V7.54933Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col gap-4 text-click-xs px-4 pb-4">
<div class="bg-brand-100 flex flex-col gap-2 px-4 py-3">
<button class="flex justify-between items-center gap-2 w-full text-body-xs" @click="open = !open" :aria-expanded="open" aria-controls="accordion-hours">
<span class="flex items-center gap-1.5">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<template x-if="$store.locator.getOpeningStatus(store).status === 'Ouvert'">
<span>
<span class="font-bold">Ouvert</span>
<span x-text="' jusqu’à ' + $store.locator.getOpeningStatus(store).end"></span>
</span>
</template>
<template x-if="$store.locator.getOpeningStatus(store).status === 'Fermé'">
<span class="font-bold">Fermé</span>
</template>
</span>
<svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" :class="{'rotate-180': open}">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />
</svg> </button>
<div x-show="open" x-collapse id="accordion-hours" class="divide-y divide-black/08">
<template x-for="day in $store.locator.days" :key="day.key">
<div class="flex justify-between py-1">
<span class="font-bold text-black" x-text="day.label"></span>
<span class="text-right whitespace-nowrap text-neutral-800" x-html="(store[day.key] || 'Fermé').split(',').filter(Boolean).join('<br>')"></span>
</div>
</template>
</div>
</div>
</div>
</div>
</template>
</div>
<script>
function listStoreLocator() {
return {
get stores() {
const bounds = this.$store.locator.mapInstance?.getBounds();
const stores = this.$store.locator.filteredDistanceStores || [];
if (!bounds) return [];
return stores.filter(store => {
const lat = parseFloat(store.lat);
const lng = parseFloat(store.lng);
if (isNaN(lat) || isNaN(lng)) return false;
return bounds.contains(new google.maps.LatLng(lat, lng));
});
},
get getStores() {
// Return a maximum of 9 shops
return this.stores.slice(0, 9);
}
}
}
</script>
</div>
</div>
</div>
<div class="relative md:py-8 h-full w-full flex flex-col sm:h-[calc(100vh-200px)]">
<div class="order-2 md:absolute md:inset-0 md:z-0 w-full h-full">
{% render '@google-map' %}
</div>
<div class="sm:container order-1 md:order-none md:z-20 grid grid-cols-4 sm:grid-cols-12 pointer-events-none">
<div class="bg-white col-span-4 sm:col-span-12 md:col-span-4 h-full flex flex-col pointer-events-auto">
{% render '@search-store_locator' %}
</div>
</div>
<div class="sm:container order-3 md:order-none md:z-10 grid grid-cols-4 sm:grid-cols-12 pointer-events-none">
<div class="bg-white col-span-4 sm:col-span-12 md:col-span-4 h-full flex flex-col pointer-events-auto">
{% render '@store-list' %}
</div>
</div>
</div>
/* No context defined. */
No notes defined.