I need to add an EVENT for my wishlist's add to cart to work

Shopify Discussion
, ,
1

Hi,

I have an app called SWishlist and it provides a wishlist page with add to cart buttons below each product added to the wishlist on my website (Horizon theme): 3rd Day - you may need to add a product to the wishlist to see what I mean.

Once you add a product to the cart, it needs the page to be refreshed before it appears in the cart or increases the cart product count.

They provided me with this event: swishlist:st-wishlist-add-to-cart (Triggered when a customer clicks the “Add to cart”, “Add all to cart” button on the Wishlist page.)

I need to use this to make sure the item is added to cart automatically with no need for a page refresh.

Any help would be so appreciated!

Asa.

2

Hey @3rdDay

Open your Shopify theme code

Go to:

Shopify Admin → Online Store → Themes → Edit Code

  1. Open main JavaScript file

Find one of these:

assets/theme.js
assets/global.js
assets/main.js

Open the main theme JS file

  1. Add SWishlist event listener

Paste this at the bottom:

document.addEventListener(‘swishlist:st-wishlist-add-to-cart’, function () {
syncCart();
});

  1. Create cart sync function

Paste below it:

function syncCart() {
fetch(‘/cart.js’)
.then(res => res.json())
.then(cart => {

  // Update cart count in header
  document.querySelectorAll('[data-cart-count]').forEach(el => {
    el.textContent = cart.item_count;
  });

});

}
5) Save file

Click Save in theme editor.

  1. Test in store

Now test:

Open wishlist page (SWishlist)
Click Add to cart
Check header cart icon

It should update instantly
No refresh needed

Thank You !

3

Hi @3rdDay, this is a common issue with themes and apps that add items to the cart. Not all themes are compatible with all apps.

My suggestions here would be in the following order:

  1. Request the app developer’s help to ensure that the event they fire also refreshes your theme’s cart implementation (might be the cleanest). Since this is a native Shopify theme (horizon) - I’m sure they can help you with the implementation.
  2. Shopify just released a new feature called AI toolkit that allows you to connect AI models like ChatGPT or Claude and let them edit your theme code for you.
  3. Do it yourself following the steps I outlined in this reply.

For (2) Once you set everything up for the AI toolkit following this Shopify article the prompt would be fairly simple:

Help me update my theme code to update my cart when the wishlist event fires.

swishlist:st-wishlist-add-to-cart (Triggered when a customer clicks the “Add to cart”, “Add all to cart” button on the Wishlist page.)

(3) Do it yourself guide

Connects the Swishlist app’s swishlist:st-wishlist-add-to-cart event to the Horizon theme’s cart UI so the cart icon, drawer, and items refresh automatically when a customer adds a product from their wishlist.

How It Works

When Swishlist adds an item to cart it fires swishlist:st-wishlist-add-to-cart on document. The bridge script listens for that event, fetches the current cart from Shopify’s AJAX API, then re-dispatches a cart:update event that Horizon’s built-in components already know how to handle.

Files Changed

File Action
assets/swishlist-cart-bridge.js Created — the bridge script
snippets/scripts.liquid Edited — loads the bridge on every page

Step-by-Step

Step 1 — Create the bridge script

Create a new file at assets/swishlist-cart-bridge.js with the following content:

window.addEventListener('swishlist:st-wishlist-add-to-cart', async () => {
  try {
    const response = await fetch('/cart.js', {
      headers: { Accept: 'application/json' },
    });

    if (!response.ok) return;

    const cart = await response.json();

    document.dispatchEvent(
      new CustomEvent('cart:update', {
        bubbles: true,
        detail: {
          resource: cart,
          sourceId: 'swishlist',
          data: {
            source: 'swishlist',
            itemCount: cart.item_count,
          },
        },
      })
    );
  } catch (error) {
    console.error('[swishlist-cart-bridge] Failed to refresh cart:', error);
  }
});

Step 2 — Load the script on every page

Open snippets/scripts.liquid and find this block (or add somewhere near the bottom of the file):

<script
  src="{{ 'auto-close-details.js' | asset_url }}"
  defer="defer"
></script>

Add the bridge script directly after it:

<script
  src="{{ 'swishlist-cart-bridge.js' | asset_url }}"
  defer="defer"
></script>
4

Thanks so much, however, this sadly didn’t work.

6

@3rdDay, it might be useful to share some screenshots of what your code looks like.

It’s hard for anybody to help blindly. The answers from @Wsp and @Abel_Lesle look good and should work (in theory).

8

Hi @3rdDay ,

Have you tried options 1 and 2 that were suggested on my previous response?

I’ve reached out to help further as we’d need the collab access to your store to assist.

Best,

Lesle

10

Thanks so much,

I’ve messaged you.

Asa

11

This works! Thank you so much! :blush: