Add to cart ajax filter event not working

Hey @engineerized,

Thanks so much for bringing this to us! Could I ask you to please open up a support request with us over here?

https://skyverge.com/contact/

Please include a system status when you do so, as we can get a better idea of what might be going on. You can grab it by going to:

WooCommerce > Status?and clicking on?Get system report.

Thanks so much!

Julie ??
SkyVerge

I have the same issue: when I enable the plugin, the Add to Cart ajax action is not working anymore.
Products are added to cart but users are not aware about this.

I’ve tried also to deactivate the pixel code, by using:
add_filter('facebook_for_woocommerce_integration_pixel_enabled', '__return_false', 20);

but the issue remains. so it’s not related to pixel JS code but due to other modification of woocommerce.

Any suggestion on how to solve is very welcome

• This reply was modified 4 years, 6 months ago by fabio.grasso.

Hey @fabiograsso / @engineerized!

Thanks for the additional information. Our plugin will currently monitor for the following AJAX events when adding a product to cart:

// AddToCart while AJAX is enabled
			add_action( 'woocommerce_ajax_added_to_cart', [ $this, 'add_filter_for_add_to_cart_fragments' ] );
			// AddToCart while using redirect to cart page
			if ( 'yes' === get_option( 'woocommerce_cart_redirect_after_add' ) ) {
				add_filter( 'woocommerce_add_to_cart_redirect', [ $this, 'set_last_product_added_to_cart_upon_redirect' ], 10, 2 );
				add_action( 'woocommerce_ajax_added_to_cart',   [ $this, 'set_last_product_added_to_cart_upon_ajax_redirect' ] );
				add_action( 'woocommerce_after_cart',           [ $this, 'inject_add_to_cart_redirect_event' ], 10, 2 );
			}

It could be that the theme in use is not triggering these same actions and filters to allow the AddToCart JS to be output to screen. From the class name posted by @engineerized, it looks like this is the Savoy theme.

Are you using the Savoy theme too @fabiograsso? Does the tracking work if you temporarily switch to a default theme?

Cheers,

Simon.

Thank you @skyverge for reaching out. Yes I’m using Savoy theme & latest WordPress, WooCommerce. I have tried to change add_action function from woocommerce_ajax_added_to_cart to woocommerce_add_to_cart. I also noticed that the placeholder <div class=”wc-facebook-pixel-event-placeholder”></div> is always visible in the body tag no matter if Ajax “Add to cart” button is clicked or not. The code I’m referring to is:

// insert placeholder for events injected when a product is added to the cart through Ajax
$( document.body ).append( '**<div class=\"wc-facebook-pixel-event-placeholder\"></div>**' );

Thank you in advance.

No, my theme is Flora by Wyde

I try to setup a sandbox environment in order to test with other themes

• This reply was modified 4 years, 6 months ago by fabio.grasso.

Hi @engineerized,

Thanks for confirming! Yes, that code will be added to the document, as it would be used during other add to cart events. With AJAX, we need to store the value that was added, especially in the case of redirect after adding to cart too. So I’m afraid rather than changing the actions to the standard add to cart action, it would need to be customized specifically for the Savoy theme. Do you know what WordPress action is called when they use their AJAX add to cart button?

Thanks @fabiograsso! If you could confirm it works with a default theme such as Storefront or TwentyTwenty with WooCommerce AJAX add to cart enabled, then it would seem to be the same root cause. If the theme is using a unique way of adding products to cart with AJAX that does not trigger the standard WooCommerce actions, it will need further customization for the plugin to track the event.

Could you let me know how you get on once you’ve had chance to run tests with your sandbox environment?

Cheers!

Simon.

Hi @skyverge thank you for that. I have previously checked with Savoy team and I got this answer from them regards which action theme use for their AJAX add to cart.

“The default addtocart form is submitted via Ajax, so you should be able to use the hook-after-the-product-was-successfully-added-tocart”>woocommerce_add_to_cart action.”

But I’m not sure which add_action to change to make this work?

@skyverge I’ve tested with Storefront and I confirm that using that theme it works fine.

So it must be something related to the theme, even if at this point not only to mine, since @engineerized has the same problem with a different theme.

I’m also investigating the problem with the developers of the theme, maybe you can work together for understand what’s wrong. Here is the link to the discussion: https://themeforest.net/comments/24257465

Hey @engineerized / @fabiograsso!

Thanks for confirming it works with the default theme in place! As you can see, with two different themes, it doesn’t track the AddToCart event due to the difference in the implementation of the add to cart ajax. It’s an impossible task to try and support the different coding styles of all third-party themes out there, which is why we code towards the WooCommerce standard.

In both cases, it seems like the developers may not be using the same WooCommerce hooks that the Facebook for WooCommerce plugin would be listening for. I’m afraid the response from Savoy doesn’t give too much to go on either as we’re already tracking the ‘woocommerce_add_to_cart‘ action.

If you’d like, I’d be happy to take a quick look at theme files to see if I could find a workaround for you, though I’m afraid I wouldn’t be able to guarantee a solution given the third-party code involved. In which case, I’d need a copy of the theme files to look through. If that sounds like a plan, could you please also raise a support request via our support form?

Otherwise, if you hear anything further from the theme developers on how to capture the added to cart ajax action, could you let me know?

Cheers!

Simon.

Hey @skyverge thank you, I understand. Found these add action hooks but I’m not sure which add_action to change to make this work?

<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="nm-simple-add-to-cart-button single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
        
        <?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
	</form>

	<?php do_action( 'woocommerce_after_add_to_cart_form' ); ?>

<?php endif; ?>

Add these add actions from woocommerce-functions

/*
 *	Add-to-cart (AJAX) redirect: Include custom template
 */
function nm_ajax_add_to_cart_redirect_template() {
    if ( isset( $_REQUEST['nm-ajax-add-to-cart'] ) ) {
        wc_get_template( 'ajax/add-to-cart-fragments.php' );
        exit;
    }
}
add_action( 'wp', 'nm_ajax_add_to_cart_redirect_template', 1000 );
/*
 *	Add-to-cart (static) redirect: Add body class so the Cart panel will show
 */
if ( get_option( 'woocommerce_cart_redirect_after_add' ) != 'yes' ) { // Only show cart panel if redirect is disabled
    function nm_add_to_cart_class() {
        // Add a class to the <body> tag so it can be checked with JS
        global $nm_body_class;
        $nm_body_class[] = apply_filters( 'nm_static_atc_class', 'nm-added-to-cart' );
    }
    add_action( 'woocommerce_add_to_cart', 'nm_add_to_cart_class' );
}

/*
 *	Cart: Get refreshed header fragment
 */
if ( ! function_exists( 'nm_header_add_to_cart_fragment' ) ) {
    function nm_header_add_to_cart_fragment( $fragments ) {
        $cart_count = nm_get_cart_contents_count();
        $fragments['.nm-menu-cart-count'] = $cart_count;

        return $fragments;
    }
}
add_filter( 'woocommerce_add_to_cart_fragments', 'nm_header_add_to_cart_fragment' ); // Ensure cart contents update when products are added to the cart via Ajax

Hey @engineerized,

Thanks for digging those out! I think that’s close to what we’d need but not quite it. It looks like they’re using some of the actions we’re also hooked into, but not initiating anything specifically.

For instance, if the default woocommerce_ajax_added_to_cart action is triggered by their AJAX implementation, then our plugin will check that woocommerce_cart_redirect_after_add WooCommerce option is turned off before adding a filter on woocommerce_add_to_cart_fragments which will add the event tracking.

If woocommerce_cart_redirect_after_add is turned on in WooCommerce, then this is where it uses the additional filters and actions to catch the product data before the redirect, and then track the event once the page has refreshed. This relies on woocommerce_ajax_added_to_cart event being triggered to store the product data temporarily in the WooCommerce session.

Then finally, it needs the woocommerce_after_cart action to be triggered to inject the actual tracking event. While I understand this is a bit fiddly, this might be useful information you could ask the Savoy theme developers to see if they can offer some suggestions as to how their implementation works. Of course, if you’d like us to take a look as mentioned previously, please do get in touch!

When you use the AJAX add to cart with your theme, does it redirect to the cart page afterward? Do you have the WooCommerce AJAX redirect option enabled under WooCommerce > Settings > Products > Add to Cart behavior > “Redirect to the basket page after successful addition“?

Cheers!

Simon.

Thank you @skyverge for the awesome support. I will check with them. So basically I would need to change the add_action “woocommerce_ajax_added_to_cart” to some other action that this theme use? If we have the right function here it will work?

I have not that enabled only “Enable AJAX add to cart buttons on archives” is checked.

Hey @engineerized, yes that’s what I’m thinking at the moment!

It would be good to confirm if they are using that action, then we can certainly look into it further if you contact us directly to do some closer testing. Otherwise, maybe they can suggest a different custom action that they call instead for a similar purpose, and we can then help suggest a custom code snippet that would hook onto this and call the Facebook for WooCommerce for add to cart tracking.

If you do hear back from them in either case, could you let me know so we could take another look?

Cheers!

Simon.

Hey @skyverge, I got following answer now from the savoy theme team regards AJAX add to cart function. See below.

“There’s no custom actions used when adding to cart, the default WooCommerce add-to-cart form is simply submitted via Ajax instead of a page load (the default WooCommerce Ajax functions have not been changed either).

Note that you can prevent this by disabling the “AJAX Add-to-Cart” setting on the “Theme Settings > Single Product” page.”

If I disable it I will not have the AJAX function which is showing mini cart menu on right once you add product to cart. I do not use redirect to cart. If you add product to cart you see that directly on your right.
The function I use you can see on the following demo page if you add product to cart. Savoy Theme – Demo Product Page

Thank you in advance.

I had a similar response from the author of my theme (Flora):

We are sorry but we have never seen this issue before.

However, this theme does only one thing with the ‘woocommerce_add_to_cart_fragments’ to update the cart in the dropdown menu after adding the product to the cart. It is the standard WooCommerce action.

In my case the issue is present also when I disable the ajax cart.

However, I have already spent far too much time on this issue. I moved all the management of the Pixel to Google Tag, using the Google Tag Manager for WordPress plugin, injecting the Woocommerce data into the datalayer (it’s also convenient for Google Analytics) and then using the Simo Ahava template for Facebook Pixel.

I have to find a solution for product sync, but for the moment it’s not a priority.

Sorry to give up but I ran out of time to test, I know you are working on a version that supports the Server-Side API, I will try your plugin again when it becomes available

• This reply was modified 4 years, 6 months ago by fabio.grasso.
• This reply was modified 4 years, 6 months ago by fabio.grasso.
• This reply was modified 4 years, 6 months ago by fabio.grasso.