Change logic of the useVIewCartPixel hook

[efremov-av]

What problem is this solving?

The app has problems with pushing view_cart pixel event when variant="drawer". This problem happens because of the wrong logic of handling open/close state of the Drawer component. It switches isOpen from true to false and back when user presses on the Cart Button in the store front header:

1. User presses on the Cart button --> isOpen changes to true --> view_cart event is pushed;
2. User presses on the close Drawer button --> nothing changed;
3. User presses on the Cart button --> isOpen changed to false --> view_cart event is not pushed because isOpen state == false.

To solve this wrong behavior I added onVisibilityChanged callback function as a property argument to the Drawer component in the drawer app and made these changes in the minicart app to handle open/close events properly.

How to test it?

In the browser inspector console tab type dataLayer to see events that have been pushed. It should add view_cart event on every Drawer opening and when user adds a new product to the cart (at the moment when Drawer is opening)

https://devalex--dunnesstorespreprod.myvtex.com/

Screenshots or example usage:

minicart.before.changes.mov

minicart.after.changes.mov

Related PR

vtex-apps/drawer#75

[vtex-io-ci-cd]

Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖

Please select which version do you want to release:

• Patch (backwards-compatible bug fixes)

• Minor (backwards-compatible functionality)

• Major (incompatible API changes)

And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.

• No thanks, I would rather do it manually 😞

[beatrizmaselli]

LGTM! Nice job Alex 🚀

[vsseixaso]

LGTM!

[vmourac-vtex]

LGTM

[vtex-io-ci-cd]

Your PR has been merged! App is being published. 🚀
Version 2.67.1 → 2.67.2

After the publishing process has been completed (check #vtex-io-releases) and doing A/B tests with the new version, you can deploy your release by running:

vtex deploy [email protected]

After that your app will be updated on all accounts.

For more information on the deployment process check the docs. 📖