Shopify Search & Discovery App & the Mutation Observer Web API

[Bontalexel31]

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