I am seeking assistance to resolve a critical Web Component event listener issue in the Horizon 4.1.4 theme.
The Symptoms:
Product Variant Selection Lag: When clicking on a different T-shirt color or variant, the selection action is not recorded/updated on screen until a completely different product page is opened.
Missing Animations: Clicking “Add to Cart” no longer triggers the standard loading state or item-added visual animation.
Delayed Opening: The cart drawer takes an unusually long time to slide open after clicking “Add to Cart”.
Drawer Freeze (Won’t Close): Once the cart drawer is open, clicking the close (X) button or background overlay does nothing—the panel remains stuck open on screen.
Quantities update correctly in the backend payload, but all front-end reactive UI component events freeze.
Theme Context: The site relies on standard Horizon 4.1.4 Web Components:
cart-drawer.js (CartDrawerComponent)
component-cart-items.js (CartItemsComponent)
component-cart-quantity-selector.js
It appears an uncaught JavaScript error or broken event listener stream inside the Shadow DOM/custom element scripts is freezing theme execution.
Has anyone experienced this specific component listener crash in Horizon 4.1.4, and what is the proper fix to restore component reactivity without breaking theme custom elements?
Every symptom you listed is what happens when a single uncaught JavaScript error stops the script from running: variant selection stops updating, animations never fire, the drawer opens late, and the close button does nothing. So don’t chase them separately, find the one error and they’ll all clear together.
Open the product page with DevTools Console, then look at the very first error, not the ones underneath it, since those are usually just knock-on effects. That first error names the file causing it, and it’s usually either a third party app script or a custom edit rather than the theme itself. To confirm which, preview a fresh unmodified copy of Horizon 4.1.4 on the same store, and if the drawer behaves normally there, it’s your customisations or an app rather than the theme version. Also test in incognito with browser extensions off, since those cause this more often than people expect.
If you share your store URL and that first console error, I’ll take a look and tell you what’s throwing it. Happy to fix it properly for you too if you’d rather have it sorted than keep digging.
The issue we are running into is on the product pages: the cart drawer badge displays “1” even when the cart is completely empty, and the side panel has trouble closing smoothly.
I’ve attached a screenshot of the initial console error we were seeing. Let me know what you spot on your end!
Thanks for the details, let me break it down properly now.
For this, I have attached a screenshot of a console error that is occurring when a variant is changed on the product page. Most likely the issue is either caused by the Globo app which you are using OR it could be in the variant-picker.js file. Quickest way to confirm which one it is, temporarily disable the Globo app and reload the product page, if the error goes and variants start updating instantly, it’s Globo rather than the theme. See the attached screenshot below:
The item added animation actually works fine on my end but one thing which I noticed is that when an item is added into the cart then the cart drawer shows empty until and unless the page is reloaded. Another error. See the attached screenshot below:
This one should clear up on its own once the second issue is fixed, since it’s almost certainly the same script failing.
They all are fixable, they just need someone digging into the theme’s JS and the app’s script to see what’s throwing. If you’d like, I’m happy to get these sorted for you properly so your variants update instantly and the cart drawer behaves the way it should.
Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.
