Incompatibility with GTM / Quickview

Hello Team,
We have a problem with GTM (Google Tag Manager) – there seems to be some conflict with Quickview.

The problem is after adding GTM to the site –
When clicking on a “QuickView” – you can see the QuickView modal for a second but immediately continues to enter to the product page.

We have isolated the issue and confirm that in order to reproduce it all you need to do is to add any GTM container to the site (even empty one with no trigger/variables/tags at all!).

Please advise,
Thank you!

Hi,

Could you please send us a link to your website where we can see this issue?

Kind Regards

Attached in Private Content

This plugin force redirect to the product page in the JS file /wp-content/plugins/duracelltomi-google-tag-manager/js/gtm4wp-woocommerce-enhanced.js on the following line https://gyazo.com/89535aafe8599969c604994749bb1aae
So it has some kind of event when you click on all buttons on the product and we are not able to change this in our theme.

Much appreciated.
I have opened a ticket about this with GTM4WP developers:
https://wordpress.org/support/topic/gtm4wp-adds-click-to-ui-listener/

Hi Xtemos,
The GTM4WP developer was kind to look at our issue and also provide a fix that can work easily in existing xtemos theme.

GTM4WP supports the “official woocommerce quickview plugin” developed by woocommerce team which adds “quick-view-button” class to the quickview button.

I have also tested the suggested fix by GTM4WP and confirm this method is working / resolves our issue.

Here is a demo showing where exactly to add the class:
https://www.awesomescreenshot.com/image/4338698/8c9fca9c0ec380613a6412dae9f5864f

I know it is not theme-specific and XTemos can choose implement quickview with whichever classes you choose to and I understand the “WooCommerce QuickView Plugin” is not actually “standard” or “official” because it is still a plugin and not part of the woocommerce base code.

1. Would xtemos consider implementing this fix as part of the official theme to support compatibility with GTM4WP? It is currently the most used GTM/DataLayer plugin by far from anything else out there.

2. If not, What is the best method for us to add “quick-view-button” class in the code? We would like the solution to be pre-rendered content and not added via jQuery after/during page load.

Thank you!

Hello,

We need to consult with the developers, we will let you know in this topic about our solution.

Kind Regards
XTemos Studio

Hi XTemos team,
Please have a look at this when possible we are approaching to launching the site.

Hello,

Try to add the following PHP code snippet to the child theme functions.php file to do this now

function woodmart_quick_view_btn( $id = false ) {
		if( ! $id ) $id = get_the_ID();

		if ( woodmart_get_opt( 'quick_view' ) ): ?>
			<div class="quick-view wd-action-btn wd-quick-view-btn wd-style-icon">
				<a 
					href="<?php echo esc_url( get_the_permalink( $id ) ); ?>" 
					class="open-quick-view quick-view-button"
					data-id="<?php echo esc_attr( $id ); ?>"><?php esc_html_e( 'Quick View', 'woodmart' ); ?></a>
			</div>
		<?php endif;
	}

Kind Regards
XTemos Studio

Highly appreciated! Confirmed to work.
I have added it by utilizing https://github.com/woocommerce/theme-customisations

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts