ECOMMERCE/resources/views/components/home/product-highlight.blade.php

<style>
        .shimmer-wrapper-highlight {
            overflow: hidden;
        }

        .shimmer-wrapper-highlight .shimmer {
            position: relative;
            overflow: hidden;
        }

        .shimmer-wrapper-highlight .shimmer::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.3) 50%,
                    rgba(255, 255, 255, 0) 100%);
            animation: shimmer-wrapper-highlight-shimmer 1.5s infinite;
        }

        @keyframes shimmer-wrapper-highlight-shimmer {
            0% {
                transform: translateX(-100%);
            }

            100% {
                transform: translateX(100%);
            }
        }

        .shimmer-wrapper-highlight .shimmer-line {
            background-color: rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }

        .shimmer-wrapper-highlight .shimmer-content {
            position: relative;
            overflow: hidden;
        }
    </style>

<section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5" id="product-highlights-section">
    <h2 class="text-center pb-2 pb-sm-3">{{ __('weeks_highlights.this_weeks_highlights') }}</h2>

    <div class="row g-0 overflow-x-auto pb-2 pb-sm-3 mb-3">
        <div class="col-auto pb-1 pb-sm-0 mx-auto">
            <ul class="nav nav-pills flex-nowrap text-nowrap" id="product-highlights-tabs">
                <li class="nav-item">
                    <a class="nav-link active" href="#" data-type="best_sellers"
                        data-url="{{ route('product.ajax.highlights') }}">
                        {{ __('weeks_highlights.best_sellers') }}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-type="new_arrivals"
                        data-url="{{ route('product.ajax.highlights') }}">
                        {{ __('weeks_highlights.new_arrivals') }}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-type="sale_items"
                        data-url="{{ route('product.ajax.highlights') }}">
                        {{ __('weeks_highlights.sale_items') }}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-type="top_rated"
                        data-url="{{ route('product.ajax.highlights') }}">
                        {{ __('weeks_highlights.top_rated') }}
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="position-relative">
        <div  class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-3" id="product-highlights-container">



        </div>

        <div class="text-center py-5 d-none" id="product-highlights-loading">
            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-3">
                @for ($i = 1; $i <= 10; $i++)
                    <div class="col">
                        <div class="shimmer-wrapper-highlight">
                            <div class="shimmer">
                                <div class="shimmer-content rounded">
                                    <div class="shimmer-line shimmer-image rounded mb-3"
                                        style="height: 0; padding-bottom: 100%; position: relative;">
                                        <div
                                            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.1); border-radius: 4px;">
                                        </div>
                                    </div>
                                    <div class="shimmer-line shimmer-title rounded mb-2"
                                        style="height: 20px; width: 80%;"></div>
                                    <div class="shimmer-line shimmer-price rounded" style="height: 16px; width: 60%;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endfor
            </div>
        </div>
    </div>
</section>



<script>
    /*!
     * Product Highlights AJAX functionality
     * Handles tab switching and AJAX loading for product highlights section
     */

    document.addEventListener('DOMContentLoaded', function() {
        const tabsContainer = document.getElementById('product-highlights-tabs');
        const productsContainer = document.getElementById('product-highlights-container');
        const loadingSpinner = document.getElementById('product-highlights-loading');

        if (!tabsContainer || !productsContainer || !loadingSpinner) {
            return;
        }

        // Load first tab content on page load
        const firstTab = tabsContainer.querySelector('.nav-link.active');
        if (firstTab) {
            const type = firstTab.dataset.type;
            const url = firstTab.dataset.url;
            if (type && url) {
                loadProductHighlights(type, url);
            }
        }

        // Handle tab clicks
        tabsContainer.addEventListener('click', function(e) {
            e.preventDefault();

            const tab = e.target.closest('.nav-link');
            if (!tab) return;

            // Get the type and URL from data attributes
            const type = tab.dataset.type;
            const url = tab.dataset.url;

            if (!type || !url) return;

            // Update active tab
            tabsContainer.querySelectorAll('.nav-link').forEach(t => t.classList.remove('active'));
            tab.classList.add('active');

            // Load products via AJAX
            loadProductHighlights(type, url);
        });

        function loadProductHighlights(type, url) {
            // Show loading spinner
            productsContainer.style.display = 'none';
            loadingSpinner.classList.remove('d-none');

            // Build URL with parameters
            const requestUrl = `${url}?type=${type}`;

            // Make AJAX request
            fetch(requestUrl)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Update products container with new HTML
                        productsContainer.innerHTML = data.products;
                    } else {
                        // Handle error
                        productsContainer.innerHTML =
                            '<div class="col-12 text-center py-4">Error loading products</div>';
                    }
                })
                .catch(error => {
                    console.error('Error loading product highlights:', error);
                    productsContainer.innerHTML =
                        '<div class="col-12 text-center py-4">Error loading products</div>';
                })
                .finally(() => {
                    // Hide loading spinner and show products
                    loadingSpinner.classList.add('d-none');
                    productsContainer.style.display = 'flex';

                    // Re-initialize any components that might be needed for the new products
                    if (window.bootstrap && window.bootstrap.Tooltip) {
                        const tooltipTriggerList = [].slice.call(productsContainer.querySelectorAll(
                            '[data-bs-toggle="tooltip"]'));
                        tooltipTriggerList.map(function(tooltipTriggerEl) {
                            return new bootstrap.Tooltip(tooltipTriggerEl);
                        });
                    }
                });
        }
    });
</script>