Example : Custom Grid/List Buttons

This script adds custom Grid/List buttons — which allows the customer to change the items per rox in the grid.

---

JS Code:

var __fast_options  = { with_product_attributes: true};

function createGridChangeItem(className, spanCount,isMobile) {
    const div = document.createElement('div');
    div.className = className;
    div.setAttribute('grid_count', spanCount);

    // Define SVG markup based on spanCount
    let svgHTML = '';
    if(isMobile)
    {
        if (spanCount === 2) {
        svgHTML = `
            <svg role="presentation" width="18" viewBox="0 0 18 18" fill="none">
            <path fill="currentColor" d="M0 0h8v8H0zM0 10h8v8H0zM10 0h8v8h-8zM10 10h8v8h-8z"></path>
        </svg>`;
        } else if (spanCount === 1) {
        svgHTML = `
        <svg role="presentation" width="18" viewBox="0 0 18 18" fill="none">
            <path fill="currentColor" d="M0 0h18v18H0z"></path>
        </svg>`;
        }
    }
    else{
        if (spanCount === 3) {
        svgHTML = `
            <svg role="presentation" width="18" viewBox="0 0 18 18" fill="none">
            <path fill="currentColor" d="M0 0h8v8H0zM0 10h8v8H0zM10 0h8v8h-8zM10 10h8v8h-8z"></path>
        </svg>`;
        } else if (spanCount === 4) {
        svgHTML = `
            <svg role="presentation" width="18" viewBox="0 0 18 18" fill="none">
            <path fill="currentColor" d="M0 0h4v4H0zM0 7h4v4H0zM0 14h4v4H0zM7 0h4v4H7zM7 7h4v4H7zM7 14h4v4H7zM14 0h4v4h-4zM14 7h4v4h-4zM14 14h4v4h-4z"></path>
        </svg>`;
        } else if (spanCount === 9) {
        svgHTML = `
        <svg role="presentation" width="18" viewBox="0 0 18 18" fill="none">
            <path fill="currentColor" d="M0 0h18v2H0zm0 4h18v2H0zm0 4h18v2H0zm0 4h18v2H0zm0 4h18v2H0z"></path>
        </svg>`;
        }
    }

    div.innerHTML = svgHTML;

    div.addEventListener('click', () => {
        window.dispatchEvent(
            new CustomEvent('change-number-of-products-per-row', {
                detail: { numberOfColumns: spanCount }
            })
        );

        const parentContainer = div.closest('.grid-change');
        if (parentContainer) {
            parentContainer.querySelectorAll('.active_layout').forEach((btn) => {
                btn.classList.remove('active_layout');
            });
        }

        div.classList.add('active_layout');
    });

    return div;
}
function gridHandler(parent) {
    const mainContainer = document.createElement('div');
    mainContainer.className = 'collection-main__sort-item grid-change';

    const container=parent.querySelector('.top-center-container');
    if (container) {
        if (window.innerWidth > 1024) {
            mainContainer.appendChild(createGridChangeItem('desktop-only grid-change_three_item', 3,false));
            mainContainer.appendChild(createGridChangeItem('desktop-only grid-change_four_item active_layout', 4,false));
            mainContainer.appendChild(createGridChangeItem('desktop-only grid-change_nine_item', 9,false));

            if (parent.querySelectorAll('.collection-main__sort-item').length === 0) {
                container.insertBefore(mainContainer,container.firstChild);
            }
        } else {
            // Mobile logic if needed
            mainContainer.appendChild(createGridChangeItem('mobile-only grid-change_four_item', 1,true));
            mainContainer.appendChild(createGridChangeItem('mobile-only grid-change_two_item active_layout', 2,true));

            if (parent.querySelectorAll('.collection-main__sort-item').length === 0) {
                container.insertBefore(mainContainer,container.firstChild);
            }
        }
    }
}

/* Main logic hook */
function hooks() {
    SerpOptions.registerHook('serp-product-grid', ({ products, element }) => {
        const parent=element.closest("#fs-serp-page");
        if(parent)
        {
           gridHandler(parent);
        }

        for (const productElement of getProductElements(element)) {
            const productID = productElement.dataset.productId;
            const data = products[productID];
        }
    });
}

/* Execute after Fast Simon SERP is ready */
if (window.SerpOptions) {
    hooks();
} else {
    window.addEventListener('fast-serp-ready', function () {
        hooks();
    });
}

Note

• The selectors of the elements can be different