Client side events for tracking the editing and removing of items from the cart

[TorbenLundsgaard]

Is your feature request related to a problem? Please describe.

I’m the author of GTM Kit (https://wordpress.org/plugins/gtm-kit/), which is a plugin that generates the data layer for Google Tag Manager. My plugin generates the GTM data layer with viewed items, items added to cart etc. In the old cart, I have used the filters woocommerce_cart_item_quantity and woocommerce_cart_item_remove_link to hook into the cart quantity selectors and add a data attribute containing product data, which I can read with JavaScript when the quantity changes.

The new cart block does not have any filters, so there is no way for a plugin to get the product data of an item which quantity has changed.

Describe the solution you'd like

I propose that the product ID should be added as a data attribute (data-product-id) to all quantity selectors (-, quantity, +, remove item):

input.wc-block-components-quantity-selector__input
button.wc-block-components-quantity-selector__button--minus 
button.wc-block-components-quantity-selector__button--plus 
button.wc-block-cart-item__remove-link

This would give plugins a reference to the product.

Describe alternatives you've considered

The only alternative I can see is doing a product lookup based on the product URL, which is far from optimal.

Additional context

[nielslange]

Hello @TorbenLundsgaard 👋

Thanks for reaching out. I've reached out to my colleagues internally to discuss your suggestion. I'll let you know once I have further information on this.

[ralucaStan]

p1679386895212899-slack-C8X6Q7XQU

[nielslange]

Hello @TorbenLundsgaard 👋

Our team has discussed this issue internally, and we understand the challenges you face with the new cart block not having the filters woocommerce_cart_item_quantity and woocommerce_cart_item_remove_link to hook into. While we acknowledge the need for a solution, we believe that adding data attributes to accommodate an imperative use-case within a UI rendered declaratively might not be the best approach.

The reason is that the imperative implementation may not be able to easily adapt to changes in the application, which could lead to potential maintenance and compatibility issues in the future. Our goal is to create a stable and maintainable codebase that is flexible enough to accommodate various use-cases without compromising its structure.

With that in mind, we remain open to investigating alternative solutions that can effectively support your plugin’s functionality. This issue will be kept open, and we will provide further information as soon as we identify a suitable alternative.

[TorbenLundsgaard]

I’m open to alternative solutions but right now I have no other suggestions.

I have a similar problem with the new ‘All products’ block where it is not possible to track ‘add to cart’ clicks because there are no filters in this block.

This is not just an issue for my plugin. There are many tracking/marketing plugins that rely on knowing which product the user is interactions with. Most plugin authors are only just starting to make their plugins compatible with the new blocks.

Let me know if I can help in any way.

[mikejolley]

@TorbenLundsgaard Do these types of events need to be tracked in the client (on click), or can they be server side to track actual events (e.g. when something happens via the store API)?

For the google analytics integration we added some events that triggered after certain events on the client side..perhaps we just need to roll that out for these buttons also.

[TorbenLundsgaard]

Google Tag Manager is a client side script so this has to be done client side.

Yould could probably do it with server-side GTM but most user don't have this option.

[mikejolley]

Ok, I'm going to change the title of the issue to better reflect the need for events and add it to the backlog. Thanks for the feedback.

[tarunvijwani]

I'm interested in working on this in the upcoming cycle.

[gtenaschuk]

Still not having a way to track or fire an event when someone interacts with the mini-cart block products? @TorbenLundsgaard did you find a solution for this?

We are trying to find a way to fire an event to update product statuses via websocket when someone remove items from the minicart block, we didn't find a way to know what is the item removed from the cart when you click on remove item link in the minicart content.