120 lines
4.7 KiB
JavaScript
120 lines
4.7 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const contactForm = document.getElementById('contactForm');
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const formData = new FormData(form);
|
|
const alertContainer = document.getElementById('form-alerts');
|
|
|
|
alertContainer.innerHTML = '';
|
|
|
|
fetch('contact.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showAlert('success', 'Message sent successfully! We will get back to you shortly.');
|
|
form.reset();
|
|
} else {
|
|
showAlert('danger', 'An error occurred: ' + (data.error || 'Please try again.'));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showAlert('danger', 'A network error occurred. Please try again.');
|
|
console.error('Error:', error);
|
|
});
|
|
});
|
|
}
|
|
|
|
function showAlert(type, message) {
|
|
const alertContainer = document.getElementById('form-alerts');
|
|
const wrapper = document.createElement('div');
|
|
wrapper.innerHTML = [
|
|
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
|
|
` <div>${message}</div>`,
|
|
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
|
|
'</div>'
|
|
].join('');
|
|
alertContainer.append(wrapper);
|
|
}
|
|
|
|
// --- Search Functionality ---
|
|
const searchForm = document.getElementById('searchForm');
|
|
if (searchForm) {
|
|
const searchInput = document.getElementById('searchInput');
|
|
const searchButton = document.getElementById('searchButton');
|
|
const searchResultsSection = document.getElementById('searchResults');
|
|
const resultsContainer = document.getElementById('resultsContainer');
|
|
const noResults = document.getElementById('noResults');
|
|
|
|
searchForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const query = searchInput.value.trim();
|
|
|
|
if (query === '') {
|
|
return;
|
|
}
|
|
|
|
// Show loading state
|
|
searchButton.disabled = true;
|
|
searchButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Searching...';
|
|
resultsContainer.innerHTML = '';
|
|
noResults.style.display = 'none';
|
|
searchResultsSection.style.display = 'block';
|
|
|
|
fetch(`search.php?q=${encodeURIComponent(query)}`)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.length > 0) {
|
|
displayResults(data);
|
|
} else {
|
|
noResults.style.display = 'block';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Search error:', error);
|
|
resultsContainer.innerHTML = '<p class="text-danger text-center">An error occurred while searching. Please try again.</p>';
|
|
})
|
|
.finally(() => {
|
|
// Restore button state
|
|
searchButton.disabled = false;
|
|
searchButton.innerHTML = 'Search';
|
|
});
|
|
});
|
|
|
|
function displayResults(products) {
|
|
products.forEach(product => {
|
|
const pricesHtml = product.prices.map(p => `
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
${p.retailer}
|
|
<span class="badge bg-primary rounded-pill">R ${parseFloat(p.price).toFixed(2)}</span>
|
|
</li>
|
|
`).join('');
|
|
|
|
const productCard = `
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">${product.name}</h5>
|
|
<ul class="list-group list-group-flush">
|
|
${pricesHtml}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
resultsContainer.innerHTML += productCard;
|
|
});
|
|
}
|
|
}
|
|
});
|