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();
});
}