Skip to content
This repository has been archived by the owner on Aug 14, 2023. It is now read-only.

Singleton wrapper for theme-cart.js #155

Open
1aurabrown opened this issue Mar 15, 2019 · 0 comments
Open

Singleton wrapper for theme-cart.js #155

1aurabrown opened this issue Mar 15, 2019 · 0 comments

Comments

@1aurabrown
Copy link

Hello, I am developing a theme which involves a mini-cart, which I understand has been intentionally excluded from the starter theme. In the past I've used https://cartjs.org, this library is pretty old and I've already had to make modifications to it to get it working correctly with the previous version of Slate, so this time I wanted to roll my own mini-cart.

I have both a Cart section and a Product section, both of which are present within the Product page template, and each of these sections may trigger changes to the cart (Product: add to cart, Cart: remove from cart). My issue is getting the Cart section to react to changes triggered by the Product section. I have made a wrapper around shopify/theme-cart, which both sections may import. With the addition of https://www.npmjs.com/package/event-emitter, the cart-api-wrapper emits a change event after any successful request to the cart API. The Product section should be able to call an addToCart method in this object, which will trigger an event on success to which the Cart section is subscribed, triggering re-render within the Cart section. However because of the setup with Webpack in Slate, it seems that the cart-api-wrapper object imported into the Product section js is a different instance from the one imported in the Cart section js. The cart-api-wrapper should be a singleton, however the instance that the Cart section is subscribed to is different than the instance that the Product section interacts with. Changes originating from the Cart section itself do trickle down to the re-render event listener within the Cart section, as expected.

It appears that that within the Product template entry point the cart-wrapper module is included twice (once from the Cart section which is present on every page, once from the Product section). I'm not super familiar with Webpack but from what I understand, this is not supposed to be happening. Has anyone successfully implemented a pattern like this, or do you have other suggestions for implementing the mini-cart in such a way that it reacts to cart api events originating from any other section?

Thanks!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant