99 lines
3.6 KiB
PHP
99 lines
3.6 KiB
PHP
<div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 d-none" id="top-announcement-bar" data-bs-theme="dark">
|
|
<div class="container position-relative d-flex min-w-0">
|
|
<div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1" style="max-width: 458px">
|
|
<div class="nav me-2">
|
|
<button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
|
|
<i class="ci-chevron-left"></i>
|
|
</button>
|
|
</div>
|
|
<div class="swiper fs-sm text-white"
|
|
data-swiper='{
|
|
"spaceBetween": 24,
|
|
"loop": true,
|
|
"autoplay": {
|
|
"delay": 5000,
|
|
"disableOnInteraction": false
|
|
},
|
|
"navigation": {
|
|
"prevEl": "#topbarPrev",
|
|
"nextEl": "#topbarNext"
|
|
}
|
|
}'>
|
|
<div class="swiper-wrapper min-w-0" id="announcements-wrapper">
|
|
<!-- Announcements will be loaded here via AJAX -->
|
|
</div>
|
|
</div>
|
|
<div class="nav ms-2">
|
|
<button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
|
|
<i class="ci-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4" data-bs-dismiss="alert"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
#top-announcement-bar {
|
|
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
|
opacity: 0;
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
#top-announcement-bar.show-with-animation {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadAnnouncements();
|
|
});
|
|
|
|
function loadAnnouncements() {
|
|
fetch(`{{ route('product.ajax.announcements') }}`, {
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'Accept': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.announcements.trim() !== '') {
|
|
document.getElementById('announcements-wrapper').innerHTML = data.announcements;
|
|
const announcementBar = document.getElementById('top-announcement-bar');
|
|
announcementBar.classList.remove('d-none');
|
|
|
|
// Trigger animation
|
|
setTimeout(() => {
|
|
announcementBar.classList.add('show-with-animation');
|
|
}, 10);
|
|
|
|
// Reinitialize swiper if it exists
|
|
if (typeof Swiper !== 'undefined') {
|
|
const swiperElement = document.querySelector('.swiper');
|
|
if (swiperElement && swiperElement.swiper) {
|
|
swiperElement.swiper.update();
|
|
}
|
|
}
|
|
} else {
|
|
// Hide announcement bar if no data
|
|
const announcementBar = document.getElementById('top-announcement-bar');
|
|
if (announcementBar) {
|
|
announcementBar.classList.add('d-none');
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading announcements:', error);
|
|
// Hide announcement bar on error
|
|
const announcementBar = document.getElementById('top-announcement-bar');
|
|
if (announcementBar) {
|
|
announcementBar.classList.add('d-none');
|
|
}
|
|
});
|
|
}
|
|
</script>
|