104 lines
3.5 KiB
PHP
104 lines
3.5 KiB
PHP
<section class="container pb-5 mb-1 mb-sm-3 mb-lg-4 mb-xl-5" id="brand-home-section">
|
|
<div class="swiper my-md-3"
|
|
data-swiper='{
|
|
"slidesPerView": 2,
|
|
"pagination": {
|
|
"el": ".swiper-pagination",
|
|
"clickable": true
|
|
},
|
|
"breakpoints": {
|
|
"500": {
|
|
"slidesPerView": 3
|
|
},
|
|
"768": {
|
|
"slidesPerView": 4,
|
|
"spaceBetween": 12
|
|
},
|
|
"992": {
|
|
"slidesPerView": 5,
|
|
"spaceBetween": 20
|
|
},
|
|
"1200": {
|
|
"slidesPerView": 6,
|
|
"spaceBetween": 24
|
|
}
|
|
}
|
|
}'>
|
|
<div class="swiper-wrapper" id="brand-container">
|
|
<!-- Brands will be loaded via AJAX -->
|
|
</div>
|
|
|
|
<!-- Pagination (Bullets) -->
|
|
<div class="swiper-pagination position-static mt-3"></div>
|
|
</div>
|
|
|
|
<!-- Loading state -->
|
|
<div class="text-center py-5 d-none" id="brand-loading">
|
|
<div class="swiper my-md-3">
|
|
<div class="swiper-wrapper">
|
|
@for ($i = 1; $i <= 6; $i++)
|
|
<div class="swiper-slide text-body">
|
|
<div class="shimmer-wrapper">
|
|
<div class="shimmer">
|
|
<div class="shimmer-content rounded">
|
|
<div class="shimmer-line shimmer-image rounded"
|
|
style="height: 60px; width: 100%; background-color: rgba(0, 0, 0, 0.1);">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endfor
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const brandContainer = document.getElementById('brand-container');
|
|
const loadingSpinner = document.getElementById('brand-loading');
|
|
const section = document.getElementById('brand-home-section');
|
|
|
|
if (!brandContainer || !loadingSpinner) {
|
|
return;
|
|
}
|
|
|
|
// Load brands on page load
|
|
loadBrands();
|
|
|
|
function loadBrands() {
|
|
// Show loading spinner
|
|
loadingSpinner.classList.remove('d-none');
|
|
|
|
// Make AJAX request for brands with images
|
|
fetch('{{ route("product.ajax.brands-with-images") }}')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.brands) {
|
|
brandContainer.innerHTML = data.brands;
|
|
} else {
|
|
// Handle error
|
|
brandContainer.innerHTML = '<div class="swiper-slide text-center py-4">Error loading brands</div>';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading brands:', error);
|
|
brandContainer.innerHTML = '<div class="swiper-slide text-center py-4">Error loading brands</div>';
|
|
})
|
|
.finally(() => {
|
|
// Hide loading spinner
|
|
loadingSpinner.classList.add('d-none');
|
|
|
|
// Re-initialize Swiper
|
|
if (window.Swiper) {
|
|
const swiper = section.querySelector('.swiper');
|
|
if (swiper && swiper.swiper) {
|
|
swiper.swiper.update();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|