> For the complete documentation index, see [llms.txt](https://the-wishlist-documentation.gitbook.io/the-wishlist-documentation-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://the-wishlist-documentation.gitbook.io/the-wishlist-documentation-docs/integrations/third-party-merchandising.md).

# Search & Merch Systems

When using 3rd party merchandising systems such as Searchspring with The Wishlist, there can be conflicts between systems when loading configurations. To manage this, you will need to leverage the mutation observer.

Note, this may also be helpful when dealing with Shopify New Accounts.

Replace the document.querySelector('.productGrid') with your own product grid wrapper class:

```
<script async>
  window.addEventListener('load', function () {
    document.body.dispatchEvent(new CustomEvent('initTheWishlist'));
  });

  function dispatchWishlistEvent() {
    // console.log('initTheWishlist dispatched');
    document.body.dispatchEvent(new CustomEvent('initTheWishlist'));

    // Manually call wishlist init if available
    if (typeof Wishlist !== 'undefined' && typeof Wishlist.init === 'function') {
      Wishlist.init();
    }

    // Re-attach the MutationObserver to the new container
    observeSearchspringGrid();
  }

  let observer;

  function observeSearchspringGrid() {
    // Disconnect previous observer if it exists
    if (observer) observer.disconnect();

    const resultsContainer = document.querySelector('.productGrid');
    if (!resultsContainer) return;

    observer = new MutationObserver((mutationsList) => {
      for (const mutation of mutationsList) {
        if (mutation.addedNodes.length > 0) {
          dispatchWishlistEvent();
          break;
        }
      }
    });

    observer.observe(resultsContainer, {
      childList: true,
      subtree: true,
    });

    // console.log('Observer attached to .productGrid');
  }

  // Initial dispatch on full load
  window.addEventListener('load', function () {
    dispatchWishlistEvent();
  });

  let lastCount = document.querySelectorAll('.productGrid .grid__item').length;
  setInterval(() => {
    const count = document.querySelectorAll('.productGrid .grid__item').length;
    if (count > lastCount) {
      lastCount = count;
      dispatchWishlistEvent();
    }
  }, 1000); // checks every 1 second  

  // Manual fallback for load more / pagination clicks
  document.addEventListener('click', function (e) {
    if (e.target.closest('.ss-load-more-button')) {
      // console.log('Load More clicked — fallback trigger initTheWishlist');
      setTimeout(() => {
        dispatchWishlistEvent();
      }, 1000);
    }
  });
</script>
```