Wishlist is displaying with the header and footer

[miluak]

Hi, I tried this wishlist in a shopify store and everything I did properly. But on opening wishlist page ,its displaying product-card including my websites header and footer.No idea why its displaying like this! And image is also not displaying for the product

[dlerm]

@miluak does your product.card.liquid template have {% layout none %} at the top? That is what avoids the normal layout (header / footer) from loading in via the Ajax calls.

[miluak]

Heyy @dlerm Thanks for your help .{% layout none %} was missing in my product.card.liquid. Its proper now But this wishlist doesn't display my product images and no remove from wishlist button also in the wishlist page

[dlerm]

@miluak Do you have some sort of lazyload plugin running on your site? You may need to initialize the lazyload plugin on the wishlist page (preferably after the items have finished loading - see below about new event hooks).

To remove the items from the wishlist, you simply need to render the button-wishlist snippet inside of your product card. That button acts as a toggle to add/remove depending on the previous state. If you previously had the item in wishlist, and click the toggle button, the item will then be removed.

I will likely add some custom document events for:

1. When the wishlist is updated
2. When the wishlist has finished loading into the wishlist viewing page These event will make it easier for you and other to hook into the the wishlist functionality and trigger your own code (lazyload init, refresh page, etc).