Skip to main content

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