add_to_cart tracking incompatible with QuadLayers Direct Checkout for WooCommerce Pro Plugin

[A-Fitz]

Describe the bug:

Your plugin expects that the added_to_cart event will come with a button parameter. The QuadLayers Direct Checkout for WooCommerce Pro Plugin does not supply such a parameter upon use of its AJAX originated button, causing the Google Analytics Integration tracking to fail.

Very similar to #382.

Your plugin's code, classic.js L52 v2.1.8:

document.body.onadded_to_cart = function (
		e,
		fragments,
		cartHash,
		button
	) {
...

QuadLayers Direct Checkout for WooCommerce Pro Plugin code, qlwcdc-pro.js L113 v3.0.2 (code not available in public source control):

$(document).on(
		'click',
		'.single_add_to_cart_button:not(.qlwcdc_quick_purchase):not(.disabled)',
		function (e) {
			var $thisbutton = $(this),
				$form = $thisbutton.closest('form.cart'),
				product_id =
					$form.find('input[name=variation_id]').val() ||
					$form.find('[name=add-to-cart]').val() ||
					false;

			if ($('body').hasClass('qlwcdc-product-ajax') && product_id) {
				e.preventDefault();

				$.ajax({
					type: 'POST',
					url: woocommerce_params.ajax_url, // woocommerce_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'),
					data:
						$form.serialize() +
						'&' +
						$.param({
							'add-to-cart': product_id,
							action: 'qlwcdc_add_to_cart_action',
						}),
					beforeSend: function (response) {
						$thisbutton.removeClass('added').addClass('loading');
					},
					complete: function (response) {
						$thisbutton.addClass('added').removeClass('loading');
					},
					success: function (response) {
						if (response.error & response.product_url) {
							window.location = response.product_url;
							return;
						}
						$(document.body).trigger('added_to_cart', [
							response.fragments,
							response.cart_hash
						]);
						$(document.body).trigger(
							'added_to_cart_message',
							product_id
						);
					},
				});

				return false;
			}
		}
	);

Steps to reproduce:

1. Install and enable the QuadLayers Direct Checkout for WooCommerce Pro Plugin. I tested with v3.0.2, alongside v3.4.0 of the non-PRO plugin which is required by the PRO plugin.
2. Enable the QuadLayers Direct Checkout for WooCommerce Pro Plugin and set the "Add ajax add to cart" and "Add ajax add to cart alert" Product settings to true.
3. Click "Add to Cart" on a single product page.
4. Watch the console log for an error and see how the "View Cart" button does not appear.

Expected behavior:

The add_to_cart event is triggered and succeeds as usual

Actual behavior:

Failure to track action and interruption of the Direct Checkout plugin. Console error: "Google Analytics for WooCommerce: Could not read product ID from the button given in added_to_cart event. Check whether WooCommerce Core events or elements are malformed by other extensions."

Additional details:

As a workaround, the Direct Checkout plugin can be manually edited like so:

Details

$(document).on(
		'click',
		'.single_add_to_cart_button:not(.qlwcdc_quick_purchase):not(.disabled)',
		function (e) {
			var $thisbutton = $(this),
				$form = $thisbutton.closest('form.cart'),
				product_id =
					$form.find('input[name=variation_id]').val() ||
					$form.find('[name=add-to-cart]').val() ||
					false;
				if ($('body').hasClass('qlwcdc-product-ajax') && product_id) {
					$thisbutton.data('data-product_id', product_id);
					$thisbutton.val(product_id); //there is probably a better way to do this...
					e.preventDefault();
					
					$.ajax({
						type: 'POST',
						url: woocommerce_params.ajax_url, // woocommerce_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'),
						data:
							$form.serialize() +
							'&' +
							$.param({
								'add-to-cart': product_id,
								action: 'qlwcdc_add_to_cart_action',
							}),
						beforeSend: function (response) {
							$thisbutton.removeClass('added').addClass('loading');
						},
						complete: function (response) {
							$thisbutton.addClass('added').removeClass('loading');
						},
						success: function (response) {
							if (response.error & response.product_url) {
								window.location = response.product_url;
								return;
							}
							$(document.body).trigger('added_to_cart', [
								response.fragments,
								response.cart_hash,
								$thisbutton
							]);
							$(document.body).trigger(
								'added_to_cart_message',
								product_id
							);
						},
					});

					return false;
			}
		}
	);

[tomalec]

Hi @A-Fitz

Thank you for the report and all the code details!
Because of the closed source of QuadLayers Direct Checkout for WooCommerce Pro Plugin, it's hard for us to help with compatibility.

And given the details you provided, if #386 didn't fix the problem,
This means the global product is not available, and they fire the added_to_cart event in a different way than WooCommerce core does—without the crucial product ID set as the button's value or data attribute.
Then we do not know what product was added to the cart and cannot track the event correctly to Google Analytics.

That's why I suggest reaching out to QuadLayers support and asking them for compatibility with the WooCommerce added_to_cart event. And send all the needed attributes exactly in the way you proposed in the Additional details.

Please let us know how that works out or if the extension would fail to track the event despite the product ID being set & sent or the product variable being available.