@grdistro/store-locator-widget
Version:
A modular store locator widget with Mapbox integration that can be embedded in any website
151 lines (143 loc) • 4.48 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Store Locator Integration Example</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
margin: 0;
padding: 2rem;
background-color: #f8fafc;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
color: #1f2937;
margin-bottom: 2rem;
}
.integration-info {
background: white;
padding: 1.5rem;
border-radius: 0.5rem;
margin-bottom: 2rem;
border: 1px solid #e2e8f0;
}
code {
background: #f1f5f9;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.875rem;
}
pre {
background: #1e293b;
color: #e2e8f0;
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>🏪 Store Locator Widget</h1>
<div class="integration-info">
<h2>How to Integrate</h2>
<p>Add this to your website:</p>
<pre><code><!-- 1. Include the store locator script -->
<script src="store-locator.js"></script>
<!-- 2. Create a container element -->
<div id="my-store-locator"></div>
<!-- 3. Initialize the widget -->
<script>
const storeLocator = new StoreLocator({
containerId: 'my-store-locator',
apiEndpoint: 'https://your-api.com/api/stores',
height: '600px',
stores: [
{
id: 1,
name: 'Downtown Store',
address: '123 Main St, City, State 12345',
phone: '(555) 123-4567',
latitude: '40.7580',
longitude: '-73.9855',
isOpen: true
}
// ... more stores
],
onStoreSelect: (store) => {
console.log('Selected store:', store);
}
});
</script></code></pre>
</div>
<!-- Store Locator Widget Container -->
<div id="demo-store-locator"></div>
</div>
<!-- Include the store locator widget -->
<script src="store-locator.js"></script>
<!-- Initialize the demo -->
<script>
// Sample store data
const sampleStores = [
{
id: 1,
name: 'Downtown Electronics',
address: '123 Main Street, New York, NY 10001',
phone: '(555) 123-4567',
latitude: '40.7580',
longitude: '-73.9855',
isOpen: true
},
{
id: 2,
name: 'Uptown Gadgets',
address: '456 Broadway, New York, NY 10013',
phone: '(555) 234-5678',
latitude: '40.7614',
longitude: '-73.9776',
isOpen: false
},
{
id: 3,
name: 'Brooklyn Tech Hub',
address: '789 Atlantic Ave, Brooklyn, NY 11238',
phone: '(555) 345-6789',
latitude: '40.6892',
longitude: '-73.9442',
isOpen: true
},
{
id: 4,
name: 'Queens Digital Store',
address: '321 Northern Blvd, Queens, NY 11354',
phone: '(555) 456-7890',
latitude: '40.7505',
longitude: '-73.8370',
isOpen: true
}
];
// Initialize the store locator
const storeLocator = new StoreLocator({
containerId: 'demo-store-locator',
height: '600px',
stores: sampleStores,
showSearch: true,
showFilters: true,
showMap: true,
onStoreSelect: (store) => {
console.log('Selected store:', store);
alert(`You selected: ${store.name}`);
}
});
// Listen to store selection events
document.getElementById('demo-store-locator').addEventListener('storeSelect', (event) => {
console.log('Store selected via event:', event.detail.store);
});
</script>
</body>
</html>