App reviews, troubleshooting, and recommendations
Hey guys, On the collection page, I use the filter left bar to filter through the products.
I want to trigger a mutation using the Mutation Observer Web API as soon as the filter changes the number of products listed on the collection page, I targeted All the products but I can't get a trigger.
Is there anyone who went through something similar?
const targetElement = document.querySelector("product-list.product-list");
//const targetElement = document.querySelectorAll("product-card.product-card");
// Create a new MutationObserver instance with a callback function
const observer = new MutationObserver(callback);
// Define the callback function to handle mutations
function callback(mutationsList, observer) {
// Loop through the mutationsList to process each mutation
for (let mutation of mutationsList) {
// Check the type of mutation
if (mutation.type === "childList") {
console.log("A child node has been added or removed.");
// Handle child node changes here
} else if (mutation.type === "attributes") {
console.log("Attributes of the target element have been modified.");
// Handle attribute changes here
} else {
console.log("something triggered mutation");
}
}
}
// Configure the MutationObserver options
const config = { childList: true, subtree: true };
// Start observing the target element
observer.observe(targetElement, config);
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025