engineerized

“You have reached out to the Facebook for WooCommerce support forum”

I just did it, this is the right forum for the “Facebook for WooCommerce” right?

Which “class” are you listening to for the add to cart button?

Hello! Thank you for that, already did that, they have it right setup for their theme.

Thank you Thomas, the fix worked for Undefined google_business_vertical and id

google_business_vertical: "retail"
id: "BRW3"

We have the same issue after updating the plugin. Will reinstall to v1.13 and wait for the fix.

google_business_vertical: undefined,
undefined:

All the input fields below <button> is also added

<input type="hidden" name="gtm4wp_id" value="130">
<input type="hidden" name="gtm4wp_name" value="DESIGN">
<input type="hidden" name="gtm4wp_sku" value="ME36W">
<input type="hidden" name="gtm4wp_category" value="DESIGNFOR">
<input type="hidden" name="gtm4wp_price" value="167">
<input type="hidden" name="gtm4wp_stocklevel" value="6">

That means that the woocommerce_after_add_to_cart_button is working but still the add to cart event won’t fire?

• This reply was modified 3 years, 5 months ago by engineerized.

Hey @skyverge. Of course, I was really eager to figure it out and didn’t give up til it worked. Yes for sure, I reused the code from plugin version 1.9.15.

<script>
				document.addEventListener('DOMContentLoaded', function() {
				  jQuery && jQuery(function($){
					$('body').on('added_to_cart', function(event) {
					  // Ajax action.
					  $.get('?wc-ajax=fb_inject_add_to_cart_event', function(data) {
						$('head').append(data);
					  });
					});
				  });
				}, false);
			</script>

Here is the add_action function that needs to be added to make it all work.

// AddToCart form is simply submitted via Ajax
add_action( 'wc_ajax_fb_inject_add_to_cart_event', [ $this, 'add_to_cart_event_js' ] );

Hi, thank you @skyverge. I was now able to make it work by adding js to listen for wc-ajax and then added following code to the plugin:

		 /*Use js for add to cart when form is simply submitted via Ajax instead of a page load*/
		public function add_to_cart_event_js() {

			if ( self::$isEnabled ) {
	
			ob_start();

			echo '<script>';

			echo $this->pixel->build_event('AddToCart', [
					'content_ids'  => $this->get_cart_content_ids(),
					'content_type' => 'product',
					'contents'     => $this->get_cart_contents(),
					'value'        => $this->get_cart_total(),
					'currency'     => get_woocommerce_currency(),
				] );
			echo '</script>';
			}
			$pixel = ob_get_clean();

			wp_send_json( $pixel );
		}

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.

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 @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

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?

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.