search

woocommerce / pinterest-for-woocommerce

A native Pinterest integration for WooCommerce. Development is managed by Ventures.
https://woocommerce.com/products/pinterest-for-woocommerce/
GNU General Public License v3.0
22 stars 9 forks source link

AJAX Add to Cart for Blocks does not fire Pinterest Tag events. #960

Closed message-dimke closed 6 months ago

message-dimke commented 6 months ago

When /shop uses blocks to display products and Enable AJAX add to cart buttons on archives is set to ON Pinterest Tag events do not render.

WooCommerce_settings_‹_WordPress_Pinterest_—_WordPress

They do try to render, but instead of appearing in the deferred_events queue, they fall into the immediate_events one. Due to the nature of REST API request Blocks use, we can not identify those as AJAX requests with wp_doing_ajax(), which returns FALSE, and even if we could, Blocks do not honor cart fragments, so we are unable to use those to fire Pinterest Tag events realtime.

To test the PR:

  1. Being at develop branch and using Block to render your /shop page, with Enable AJAX add to cart buttons on archives set to ON, click 'Add to Cart' button under any of the products on the page.
  2. Watch no 'Add to Cart' Pinterest Tag event is fired.
  3. Refresh the page.
  4. Check no 'Add to Cart' Pinterest Tag event is fired.
  5. Checkout fix/ajax-add-to-cart-on-blocks branch.
  6. Click 'Add to Cart' button under any of the products on the page.
  7. Check no 'Add to Cart' Pinterest Tag event is fired.
  8. Refresh the page.
  9. Check 'Add to Cart' Pinterest Tag event is fired.
  10. Click Add to Cart on multiple products.
  11. Refresh the page.
  12. Check multiple 'Add to Cart' Pinterest Tag events are fired.
ecgan commented 6 months ago
  • Checkout fix/ajax-add-to-cart-on-blocks branch.
  • Click 'Add to Cart' button under any of the products on the page.
  • Check no 'Add to Cart' Pinterest Tag event is fired.
  • Refresh the page.
  • Check 'Add to Cart' Pinterest Tag event is fired.

Why do we need to "refresh the page"? 🤔 This behavior is different from the default (non-Block) Shop page.

ecgan commented 6 months ago
  • Click Add to Cart on multiple products.
  • Refresh the page.
  • Check multiple 'Add to Cart' Pinterest Tag events are fired.

If I click "Add to cart" one time only for each product, then it works as expected. However, if I click "Add to cart" multiple times on a product, then it seems like it will only recognize the first "add" and not the subsequent adds. It seems like if the product is already in the cart, then clicking more "Add to cart" will not fire the Pinterest "Add to cart" event.

See demo video below (with voice):

https://github.com/woocommerce/pinterest-for-woocommerce/assets/417342/9d500ef9-86f9-43a8-be4b-059b0b723ced

ecgan commented 6 months ago

When /shop uses blocks to display products and Enable AJAX add to cart buttons on archives is set to ON Pinterest Tag events do not render.

Which block do you use?

In my testing in my comments above, I was using the "Products (Beta)" block, and I had those findings that I mentioned.

I just tested using another block called "Products by Category", and the "Add to cart" button works as expected, even without this PR.

See demo video below (with voice):

https://github.com/woocommerce/pinterest-for-woocommerce/assets/417342/79824a20-7a29-4ed7-b2cd-067e7c88cf08

So this makes me wonder: Is the issue due to the "Products (Beta)" block? 🤔

message-dimke commented 6 months ago

Why do we need to "refresh the page"? 🤔 This behavior is different from the default (non-Block) Shop page.

We need to refresh when testing to emulate page reload and see how deferred events are rendered. Yes, this is a different behavior from a non-block version since the non-block version supports things Blocks do not.

Which block do you use?

Products (Beta)

However, if I click "Add to cart" multiple times on a product, then it seems like it will only recognize the first "add" and not the subsequent adds. It seems like if the product is already in the cart, then clicking more "Add to cart" will not fire the Pinterest "Add to cart" event.

You are right. I looked into the code and found a check if product is already inside the cart. If it is, then we update its counter inside the cart; if it is not, then we add it to the cart. Increasing the product's quantity does not trigger any add-to-cart action, and we do not see the event.

Here https://github.com/woocommerce/woocommerce/blob/5ee4a4c1b10e66defbd6389e49f8949f65e6395f/plugins/woocommerce/src/StoreApi/Utilities/CartController.php#L84-L95

I could hook into woocommerce_cart_item_set_quantity action to generate another add to cart Pinterest Tag event in this situation.

Overall, I must agree that Products (Beta) is an odd Block and may have bugs. I would assume it is not different from Products By Category, but that is not true.

ecgan commented 6 months ago

Which block do you use?

Products (Beta) [...] Overall, I must agree that Products (Beta) is an odd Block and may have bugs. I would assume it is not different from Products By Category, but that is not true.

Since the issue is about the "Products (Beta)" block which is still in beta, and since this PR isn't really working as expected (i.e. does not behave the same as "Products by Category" block and also the conventional Shop page), I suggest we hold off on this PR first, and wait until the "Products (Beta)" block goes out of beta and becomes stable.

Hopefully by the time it becomes stable, everything would work out of the box and we don't need this PR.

message-dimke commented 6 months ago

Decided not to go with this PR and wait until Products block will exit its beta state since Product by Category block does work properly.