Get notified of cart updates in Horizons?

Technical Q&A
1

Hi,

I need to be able to respond to “cart update” events and run my own Javascript function.

In the Dawn theme, I believe this was done using the ‘subscribe’ function.

What is the equivalent in Horizons? And further, is there a resource somewhere that has information to help developers get to grips with this new theme?

2

Hi @Tristan3dt,

You can check the CartUpdateEvent event in events.js file.
You can refer to the cart-icon.js file to understand how it works.

4

Nice, thank you for this! That was the clue I needed to figure it out.

Steps below needed to add an event handler for CartUpdate events in my custom JS file, in case it helps anyone else - welcome corrections if I’ve misunderstood anything:-

  1. Add attribute type='module' to the <script> tag that includes my .js file (eg: <script src="{{ '3dt-custom.js' | asset_url }}" type="module" defer="defer"></script> - this imports the 3dt-custom.js script as a module (and so presumably takes care of the dependency tree and necessary order of loading the JS files?)
  2. Import ThemeEvents module at the top of the 3dt-custom.js file: import { ThemeEvents, CartUpdateEvent } from '@theme/events'; - this makes the ThemeEvents object accessible to the 3dt-custom.js script.
  3. Add a new event listener for ThemeEvents.cartUpdate, eg to call a function called refresh_gimmicks every time the cart is updated, run this code in the 3dt-custom.js file: document.addEventListener(ThemeEvents.cartUpdate, refresh_gimmicks);
5

Hi @Tristan3dt,

Yes, it is the process for you to do this :smiley: