Products adding to Wishlist but not showing on Wishlist page.

[lewbar123]

Hi,

I have followed the instructions and installed the code to our website. I can see in the console when we add products to the Wishlist that it is succesful.

However the wishlist page shows loading then displays no products. The following error is in the console.

[Shopify Wishlist] Failed to load content for handle: cascade-white-sparkle-10mm-shower-panel TypeError: Cannot read properties of null (reading 'outerHTML')
at Wishlist.js?v=110723133079899158341661432513:39:24
at async Promise.all (index 0)
at async setupGrid (Wishlist.js?v=110723133079899158341661432513:47:21)

Thanks in advance.

[robmart312]

I'm getting the same error in the console on both Dawn and a custom theme I built

[giraf]

In the Wishlist.js i have changed in the selectors list the productCard: '.product-card' to productCard:'.card'
const selectors = { button: '[button-wishlist]', grid: '[grid-wishlist]', productCard: '.card', };

[dlerm]

Hey @lewbar123 & @robmart312 it seems that @giraf's solution is correct. The classname selector for your product card snippet may differ from theme to theme. If you view the product card snippet file you are using, you should find the classname on the outer most element in the snippet. Once you have that classname, update the Wishlist.js file in the selectors variable to reference the new productCard classname.

Example:
Product card classname: product-item

const selectors = {
  button: '[button-wishlist]',
  grid: '[grid-wishlist]',
  productCard: '.product-item', // updated
};