Skip to main content

Example : Sale Badges

Logic​

Add a sale badge to every product with a compare price greater than 0.

JS Code:​

customization.js
function hooks() {
    const badge = `<div class="my-badge">Sale</>`;

    FastAutocomplete.registerHook('render-autocomplete-product-item', ({product, index, element}) => {
        // 1. cleaup badge if it's no needed anymore
        const badgeElement = element.querySelector('.my-badge');
        if (badgeElement) {
            badgeElement.remove();
        }

        // 2. check if badge needed + add badge
        if (product.p_c && product.p_c !== '0.00') {
            const imageElement = element.querySelector('.fs-product-image');

            imageElement.style.position = "relative";
            imageElement.insertAdjacentHTML('afterbegin', badge);
        }
    });
}

if (window.FastAutocomplete) {
    hooks();
} else {
    window.addEventListener('fast-autocomplete-ready', function () {
        hooks();
    });
}

CSS Code:​

customization.css
.my-badge{
    top: 0;
    left: 0;
    position: absolute;
    padding: 3px 5px;
    background: red;
    color: white;
    font-weight: bold
}

Result​

[image]