After adding to cart: drawer or cart page
Choose what happens when a customer adds wishlist items to the cart, learn how the widgets refresh your theme's cart drawer (Dawn, Horizon and others), and find the event theme developers can hook into.
When a customer clicks Add to cart or Add all to cart in a wishlist, the app adds the items through Shopify's cart API. Your theme's cart drawer does not see that on its own: themes only redraw their drawer when their own product form tells them to. The app therefore tells the theme itself, using the same mechanisms the theme's product form uses, and you can choose to send the customer to the cart page instead.
Choosing the behavior
- In your Shopify admin, open the B2B Wishlist Project Planner app
- Go to Wishlist Settings
- Under Cart Settings, pick an option for After adding to cart:
- Stay on the page and open the theme's cart drawer (default): the items are added, the theme's cart drawer, notification and header count refresh, and the drawer opens where the theme has one. If the theme has no drawer and the app cannot open one, a short "added to cart" message appears instead.
- Go to the cart page: the customer lands on
/cartas soon as the items are added. This is the safe choice for themes whose drawer does not pick up additions made outside its own product form.
- Click Save
The setting applies to the classic account widget, the full-page Projects experience and shared wishlists, for single items and Add all to cart alike. When some items could not be added because of inventory, the inventory notice shows first; with the cart-page option its button reads View cart.
How the drawer refresh works
The app refreshes the cart through the theme's own hooks, so the drawer shows exactly what the theme would show after a normal add:
- Dawn and themes built on Dawn: the app fetches the theme's cart drawer (or cart notification) and header cart-count sections and hands them to the drawer the way Dawn's product form does, so the drawer re-renders and opens. It also publishes Dawn's
cart-updatemessage for the cart page. - Horizon and themes built on Shopify's storefront events: the app dispatches Shopify's standard
shopify:cart:lines-updateevent with the updated cart. Horizon's cart items re-render, the header count updates, and the drawer opens if you enabled Open cart drawer when adding in the theme editor. Earlier Horizon releases, which listened forcart:update, are handled too. - Other themes: the app dispatches the custom events many third-party themes listen for (
cart:refresh,cart:updated,cart:change,cart:build,theme:cart:refresh,cart-drawer:refreshand others), asks Liquid Ajax Cart to re-read the cart where a theme uses it, and then tries to open the drawer through common drawer elements and toggles.
If the drawer still shows old contents
Some themes refresh their drawer only from their own code paths and ignore every outside signal. In that case:
- Switch After adding to cart to Go to the cart page. Customers see the correct cart immediately and nothing depends on the theme.
- Or have your theme developer listen for the app's event (next section) and call the theme's own refresh routine.
- If you are not sure which applies to your theme, reach out through our contact form and tell us the theme name.
For theme developers: the wishlist:cart:updated event
Every time the wishlist widgets add to the cart and keep the customer on the page, they dispatch wishlist:cart:updated on document. The event's detail carries the updated cart (the /cart.js JSON), the lines that were just added and source: "wishlist". Listen for it and call whatever your theme uses to redraw its drawer:
document.addEventListener('wishlist:cart:updated', (event) => {
const { cart, lines } = event.detail;
// Example: ask your theme to re-render and open its drawer
document.querySelector('my-cart-drawer')?.refresh(cart);
document.querySelector('my-cart-drawer')?.open();
});The event is dispatched after the Dawn, Horizon and generic hooks above have run, so a theme that already reacts to one of those needs nothing extra.
If you have questions or need help, reach out through our contact form.
Styling the V2 widgets
Match the full-page Projects experience, save panel and dialogs to your store from the app's Appearance page: colors, fonts, heading style, corner radius and shadows, with a live preview. Custom CSS is available for developers.
How to share wishlists/projects
Customers can share their wishlists and project lists with others using a generated link - great for design clients, contractors, and purchasing teams.