Business Listings
Business Listings
Explore local businesses in your area
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6" id="businessContainer"></div>
</main>
<script>
// Replace with your Google Sheets API key and Sheet link
const API_KEY = 'AIzaSyDdQ3SL0OIpaClZSM3wT-C0GhK5XsdN9iQ'; // Obtain from Google Cloud Console
const SHEET_LINK = 'https://docs.google.com/spreadsheets/d/1E7yspgfGJUBrHi0RYUVEv02BKEaaElnRvCKSTb1GCqY/edit?usp=sharing'; // e.g., https://docs.google.com/spreadsheets/d/YOUR_SHEET_ID/edit?usp=sharing
const RANGE = 'Sheet1!A1:AA'; // Adjust if your sheet name or range differs
function getSheetIdFromLink(link) {
const match = link.match(/\/d\/([a-zA-Z0-9_-]+)/);
return match ? match[1] : null;
}
async function fetchBusinessData() {
const SHEET_ID = getSheetIdFromLink(SHEET_LINK);
if (!SHEET_ID) {
console.error('Invalid Sheet link');
return;
}
try {
const response = await fetch(
`https://sheets.googleapis.com/v4/spreadsheets/${SHEET_ID}/values/${RANGE}?key=${API_KEY}`
);
const data = await response.json();
if (!data.values) {
console.error('No data found');
return;
}
// Extract headers and rows
const headers = data.values[0];
const rows = data.values.slice(1);
// Map rows to business objects
const businesses = rows.map(row => {
const business = {};
headers.forEach((header, index) => {
business[header] = row[index] || '';
});
return business;
});
// Render cards
renderBusinesses(businesses);
} catch (error) {
console.error('Error fetching data:', error);
}
}
function renderBusinesses(businesses) {
const container = document.getElementById('businessContainer');
container.innerHTML = '';
businesses.forEach(business => {
// Sanitize Name for HTML ID
const safeName = business['Name of Business'].replace(/[^a-zA-Z0-9]/g, '_');
const cardHtml = `
<label for="modal-${safeName}" class="cursor-pointer">
<div class="card bg-white rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="${business['Image'] || 'https://via.placeholder.com/300x200'}" alt="${business['Name of Business']}">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900">${business['Name of Business']}</h3>
<p class="text-sm text-gray-600">${business['Main Category of Business']}</p>
<p class="mt-2 text-sm text-gray-500">${business['Sub Category']}</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="inline-block bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">${business['Business Contact Number']}</span>
<span class="inline-block bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">${business['WH']}</span>
</div>
</div>
</div>
</label>
<input class="modal-state hidden" id="modal-${safeName}" type="checkbox" />
<div class="modal">
<label class="modal__bg absolute inset-0 cursor-pointer" for="modal-${safeName}"></label>
<div class="modal__inner">
<label class="modal__close" for="modal-${safeName}">×</label>
<div>
<h2 class="text-2xl font-bold text-gray-900 mb-4">${business['Name of Business']}</h2>
<div class="flex flex-col md:flex-row gap-6">
<div class="md:w-1/2">
<img class="w-full rounded-md" src="${business['Image'] || 'https://via.placeholder.com/300x200'}" alt="${business['Name of Business']}">
</div>
<div class="md:w-1/2">
<h3 class="text-lg font-semibold text-gray-900 mb-2">Details</h3>
<table class="w-full text-sm">
<tbody>
<tr>
<td class="py-1 font-medium text-gray-700">Address</td>
<td class="py-1 text-gray-600">${business['Address of Business']}</td>
</tr>
<tr>
<td class="py-1 font-medium text-gray-700">Contact</td>
<td class="py-1 text-gray-600">${business['Business Contact Number']}</td>
</tr>
<tr>
<td class="py-1 font-medium text-gray-700">WhatsApp</td>
<td class="py-1 text-gray-600">${business['Business Whatsapp Number']}</td>
</tr>
<tr>
<td class="py-1 font-medium text-gray-700">Google Pay</td>
<td class="py-1 text-gray-600">${business['GOOGLE PAY Number']}</td>
</tr>
<tr>
<td class="py-1 font-medium text-gray-700">Website</td>
<td class="py-1 text-gray-600"><a href="${business['website']}" target="_blank" class="text-blue-600 hover:underline">${business['website'] || 'N/A'}</a></td>
</tr>
<tr>
<td class="py-1 font-medium text-gray-700">Social Media</td>
<td class="py-1 text-gray-600"><a href="${business['social']}" target="_blank" class="text-blue-600 hover:underline">${business['social'] || 'N/A'}</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-900 mb-2">Working Days</h3>
<ul class="list-disc pl-5 text-gray-600">
${[business['WD1'], business['WD2'], business['WD3'], business['WD4'], business['WD5'], business['WD6'], business['WD7']].filter(day => day).map(day => `<li>${day}</li>`).join('')}
</ul>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-900 mb-2">Additional Info</h3>
<p class="text-gray-600">${business['additional'] || 'No additional information'}</p>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-900 mb-2">Location</h3>
<a href="${business['Google Map Location']}" target="_blank" class="text-blue-600 hover:underline">${business['Google Map Location'] || 'N/A'}</a>
</div>
</div>
</div>
</div>
`;
container.innerHTML += cardHtml;
});
}
// Fetch data on page load
document.addEventListener('DOMContentLoaded', fetchBusinessData);
</script>