You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Aug 14, 2023. It is now read-only.
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!
The text was updated successfully, but these errors were encountered:
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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!
The text was updated successfully, but these errors were encountered: