Untitled

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Function to get query parameter from the URL
    function getQueryParam(param) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(param);
    }

    // Retrieve the 'highlight' query parameter (product handle or tag)
    const highlightHandle = getQueryParam('highlight');

    if (highlightHandle) {
        // Select the product container
        const productsContainer = document.querySelector('.grid.grid--uniform');

        if (!productsContainer) {
            console.warn('Product container not found');
            return;
        }

        // Select all product items
        const productElements = productsContainer.querySelectorAll('.grid__item.grid-product');

        // Separate products into two arrays: highlighted and others
        const highlightedProducts = [];
        const otherProducts = [];

        productElements.forEach(product => {
            // Check the product handle (data-product-handle) against the highlight parameter
            const productHandle = product.getAttribute('data-product-handle');

            if (productHandle === highlightHandle) {
                highlightedProducts.push(product);
            } else {
                otherProducts.push(product);
            }
        });

        if (highlightedProducts.length > 0) {
            // Clear the product container
            productsContainer.innerHTML = '';

            // Append highlighted products first, followed by others
            highlightedProducts.forEach(product => productsContainer.appendChild(product));
            otherProducts.forEach(product => productsContainer.appendChild(product));
        } else {
            console.warn(`No product found with handle "${highlightHandle}"`);
        }
    }
});
</script>