Example : HTML element from PDP to PLP

Logic

adding an HTML element from PDP to PLP

JS Code:

/* get all products to loop on */
function getProductElements(element) {
    return [...element.querySelectorAll(`.fs-results-product-card`)];
}

function hooks() {
    window.SerpOptions.registerHook("serp-product-grid", ({products, element}) => {

        for (const productElement of getProductElements(element)) {
            /* get product data */
            const productID = productElement.dataset.productId;
            const data = products[productID];
            const url = data.productURL;


            $.ajax({
              url: url,
              success: function (data) {
                data = data.replace(/<img[^>]*>/g,"");
                data = data.replace(/<script[^>]*>/g,"");
                data = data.replace(/<head[^>]*>/g,"");
                data = data.replace(/<style[^>]*>/g,"");
                data = data.replace(/<embed[^>]*>/g,"");

                var container = document.createElement('div');
                container.innerHTML = data;

                var fullprice = container.querySelectorAll('.ProductMeta__PriceList.Heading');
                console.log(fullprice);

                if (productElement.querySelectorAll(`.ProductMeta__PriceList.Heading`).length === 0) {
                  productElement.querySelector(".info-container").insertAdjacentHTML('beforeend', fullprice[0].outerHTML);
                }

              },
            });
        }
    });
}

// execution here
if (window.SerpOptions) {
    hooks();
} else {
    window.addEventListener('fast-serp-ready', function () {
        hooks();
    });
}