diff --git a/package.json b/package.json index f665b78..706ba0d 100644 --- a/package.json +++ b/package.json @@ -47,11 +47,10 @@ "uglify:edd-checkout": "mkdirp assets/integration && uglifyjs src/js/edd-checkout.js --compress --mangle --output assets/integration/edd-checkout.js", "uglify:cf7": "mkdirp assets/integration && uglifyjs src/js/contact-form-7.js --compress --mangle --output assets/integration/contact-form-7.js", "copy:images": "node ./bin/copy-images.js", - "format": "wp-scripts format", + "format": "wp-scripts format ./src/js", "lint:css": "wp-scripts lint-style", - "lint:js": "wp-scripts lint-js", - "lint:js:src": "wp-scripts lint-js ./src/js", - "lint:js-fix": "wp-scripts lint-js --fix", + "lint:js": "wp-scripts lint-js ./src/js", + "lint:js-fix": "wp-scripts lint-js ./src/js --fix", "watch": "wp-scripts start src/js/frontend/woocommerce-blocks.js --output-path=build/frontend", "watch:tailwind": "npx tailwindcss -i ./src/scss/tailwind.scss -o ./src/scss/_tailwind-compiled.scss --watch", "audit:prod": "npm audit --omit=dev", diff --git a/src/js/contact-form-7.js b/src/js/contact-form-7.js index a86f25d..63f14cc 100644 --- a/src/js/contact-form-7.js +++ b/src/js/contact-form-7.js @@ -1,7 +1,7 @@ -document.addEventListener( 'wpcf7mailsent', function ( event ) { - window[ window.gtmkit_settings.datalayer_name ].push( { +document.addEventListener('wpcf7mailsent', function (event) { + window[window.gtmkit_settings.datalayer_name].push({ event: 'gtmkit.CF7MailSent', formId: event.detail.contactFormId, response: event.detail.inputs, - } ); -} ); + }); +}); diff --git a/src/js/edd-checkout.js b/src/js/edd-checkout.js index 5783ee5..d313686 100644 --- a/src/js/edd-checkout.js +++ b/src/js/edd-checkout.js @@ -1,46 +1,39 @@ // eslint-disable-next-line no-undef -jQuery( document ).ready( function ( $ ) { - $( document.body ).on( +jQuery(document).ready(function ($) { + $(document.body).on( 'change', '.edd-item-quantity', gtmkitEddUpdateItemQuantity ); function gtmkitEddUpdateItemQuantity() { - const $this = $( this ), - quantity = parseInt( $this.val() ), - key = $this.data( 'key' ), - downloadId = $this - .closest( '.edd_cart_item' ) - .data( 'download-id' ), + const $this = $(this), + quantity = parseInt($this.val()), + key = $this.data('key'), + downloadId = $this.closest('.edd_cart_item').data('download-id'), options = JSON.parse( $this .parent() - .find( - 'input[name="edd-cart-download-' + key + '-options"]' - ) + .find('input[name="edd-cart-download-' + key + '-options"]') .val() ); - const cartItems = Object.entries( window.gtmkit_data.edd.cart_items ); - cartItems.forEach( ( item ) => { - if ( item[ 1 ].download.download_id === downloadId ) { - if ( typeof item[ 1 ].download.price_id !== 'undefined' ) { - if ( item[ 1 ].download.price_id === options.price_id ) { + const cartItems = Object.entries(window.gtmkit_data.edd.cart_items); + cartItems.forEach((item) => { + if (item[1].download.download_id === downloadId) { + if (typeof item[1].download.price_id !== 'undefined') { + if (item[1].download.price_id === options.price_id) { Object.assign( - window.gtmkit_data.edd.cart_items[ item[ 0 ] ], + window.gtmkit_data.edd.cart_items[item[0]], { quantity } ); } } else { - Object.assign( - window.gtmkit_data.edd.cart_items[ item[ 0 ] ], - { - quantity, - } - ); + Object.assign(window.gtmkit_data.edd.cart_items[item[0]], { + quantity, + }); } } - } ); + }); } -} ); +}); diff --git a/src/js/edd.js b/src/js/edd.js index 7a535be..4909dfe 100644 --- a/src/js/edd.js +++ b/src/js/edd.js @@ -1,58 +1,49 @@ // eslint-disable-next-line no-undef -jQuery( document ).ready( function ( $ ) { +jQuery(document).ready(function ($) { const datalayerName = window.gtmkit_settings.datalayer_name; - $( document.body ).on( - 'click.eddAddToCart', - '.edd-add-to-cart', - function ( e ) { - e.preventDefault(); + $(document.body).on('click.eddAddToCart', '.edd-add-to-cart', function (e) { + e.preventDefault(); - const $this = $( this ); + const $this = $(this); - const form = $this.parents( 'form' ).last(); - const download = $this.data( 'download-id' ); - const variablePrice = $this.data( 'variable-price' ); - const itemPriceIds = []; + const form = $this.parents('form').last(); + const download = $this.data('download-id'); + const variablePrice = $this.data('variable-price'); + const itemPriceIds = []; - // eslint-disable-next-line @wordpress/no-unused-vars-before-return - const itemData = JSON.parse( - form.find( '.gtmkit_product_data' ).val() - ); + // eslint-disable-next-line @wordpress/no-unused-vars-before-return + const itemData = JSON.parse(form.find('.gtmkit_product_data').val()); - // eslint-disable-next-line @wordpress/no-unused-vars-before-return - let quantity = parseInt( form.find( '.edd-item-quantity' ).val() ); + // eslint-disable-next-line @wordpress/no-unused-vars-before-return + let quantity = parseInt(form.find('.edd-item-quantity').val()); - if ( variablePrice === 'yes' ) { - if ( - ! form.find( - '.edd_price_option_' + download + ':checked', - form - ).length - ) { - return false; - } + if (variablePrice === 'yes') { + if ( + !form.find('.edd_price_option_' + download + ':checked', form) + .length + ) { + return false; + } - const priceMode = $this.data( 'price-mode' ); + const priceMode = $this.data('price-mode'); - form.find( - '.edd_price_option_' + download + ':checked', - form - ).each( function ( index ) { - itemPriceIds[ index ] = $( this ).val(); + form.find('.edd_price_option_' + download + ':checked', form).each( + function (index) { + itemPriceIds[index] = $(this).val(); - const itemPrice = $( this ).data( 'price' ); - if ( itemPrice && itemPrice > 0 ) { - itemData.price = parseFloat( itemPrice ); + const itemPrice = $(this).data('price'); + if (itemPrice && itemPrice > 0) { + itemData.price = parseFloat(itemPrice); } - if ( priceMode === 'multi' ) { + if (priceMode === 'multi') { quantity = parseInt( form .find( '.edd-item-quantity' + '[name="edd_download_quantity_' + - $( this ).val() + + $(this).val() + '"]' ) .val() @@ -62,24 +53,24 @@ jQuery( document ).ready( function ( $ ) { itemData.quantity = quantity; } - pushDatalayer( itemData ); - } ); - } else { - itemData.quantity = quantity; - pushDatalayer( itemData ); - } + pushDatalayer(itemData); + } + ); + } else { + itemData.quantity = quantity; + pushDatalayer(itemData); } - ); + }); - function pushDatalayer( itemData ) { - window[ datalayerName ].push( { ecommerce: null } ); - window[ datalayerName ].push( { + function pushDatalayer(itemData) { + window[datalayerName].push({ ecommerce: null }); + window[datalayerName].push({ event: 'add_to_cart', ecommerce: { currency: window.gtmkit_data.edd.currency, value: itemData.price * itemData.quantity, - items: [ itemData ], + items: [itemData], }, - } ); + }); } -} ); +}); diff --git a/src/js/frontend/woocommerce-blocks/index.js b/src/js/frontend/woocommerce-blocks/index.js index f4759b9..962bb2b 100644 --- a/src/js/frontend/woocommerce-blocks/index.js +++ b/src/js/frontend/woocommerce-blocks/index.js @@ -13,14 +13,14 @@ import { shippingInfo, paymentInfo, pushEvent } from './utils'; * Track the shipping rate being set */ addAction( - `${ actionPrefix }-checkout-set-selected-shipping-rate`, + `${actionPrefix}-checkout-set-selected-shipping-rate`, namespace, - ( { shippingRateId } ) => { + ({ shippingRateId }) => { window.gtmkit_data.wc.chosen_shipping_method = shippingRateId; - if ( window.gtmkit_settings.wc.add_shipping_info.config === 0 ) return; + if (window.gtmkit_settings.wc.add_shipping_info.config === 0) return; - if ( window.gtmkit_settings.wc.add_shipping_info.config === 2 ) { + if (window.gtmkit_settings.wc.add_shipping_info.config === 2) { shippingInfo(); } } @@ -30,14 +30,14 @@ addAction( * Track the payment method being set */ addAction( - `${ actionPrefix }-checkout-set-active-payment-method`, + `${actionPrefix}-checkout-set-active-payment-method`, namespace, - ( { value } ) => { + ({ value }) => { window.gtmkit_data.wc.chosen_payment_method = value; - if ( window.gtmkit_settings.wc.add_payment_info.config === 0 ) return; + if (window.gtmkit_settings.wc.add_payment_info.config === 0) return; - if ( window.gtmkit_settings.wc.add_payment_info.config === 2 ) { + if (window.gtmkit_settings.wc.add_payment_info.config === 2) { paymentInfo(); } } @@ -48,12 +48,11 @@ addAction( * * Note, this is used to indicate checkout submission, not `purchase` which is triggered on the thanks page. */ -addAction( `${ actionPrefix }-checkout-submit`, namespace, () => { - if ( window.gtmkit_settings.wc.add_shipping_info.config !== 0 ) +addAction(`${actionPrefix}-checkout-submit`, namespace, () => { + if (window.gtmkit_settings.wc.add_shipping_info.config !== 0) shippingInfo(); - if ( window.gtmkit_settings.wc.add_payment_info.config !== 0 ) - paymentInfo(); -} ); + if (window.gtmkit_settings.wc.add_payment_info.config !== 0) paymentInfo(); +}); /** * Change cart item quantities @@ -61,78 +60,77 @@ addAction( `${ actionPrefix }-checkout-submit`, namespace, () => { * @summary Custom change_cart_quantity event. */ addAction( - `${ actionPrefix }-cart-set-item-quantity`, + `${actionPrefix}-cart-set-item-quantity`, namespace, - ( { product, quantity = 1 } ) => { - if ( product.quantity < quantity ) { + ({ product, quantity = 1 }) => { + if (product.quantity < quantity) { // quantity increase const quantityAdded = quantity - product.quantity; - const item = JSON.parse( product.extensions.gtmkit.item ); + const item = JSON.parse(product.extensions.gtmkit.item); item.quantity = quantityAdded; const eventParams = { ecommerce: { currency: window.gtmkit_data.wc.currency, - value: ( product.prices.sale_price / 100 ) * quantityAdded, - items: [ item ], + value: (product.prices.sale_price / 100) * quantityAdded, + items: [item], }, }; - pushEvent( 'add_to_cart', eventParams ); + pushEvent('add_to_cart', eventParams); } else { // quantity decrease const quantityRemoved = product.quantity - quantity; - const item = JSON.parse( product.extensions.gtmkit.item ); + const item = JSON.parse(product.extensions.gtmkit.item); item.quantity = quantityRemoved; const eventParams = { ecommerce: { currency: window.gtmkit_data.wc.currency, - value: - ( product.prices.sale_price / 100 ) * quantityRemoved, - items: [ item ], + value: (product.prices.sale_price / 100) * quantityRemoved, + items: [item], }, }; - pushEvent( 'remove_from_cart', eventParams ); + pushEvent('remove_from_cart', eventParams); } } ); addAction( - `${ actionPrefix }-cart-remove-item`, + `${actionPrefix}-cart-remove-item`, namespace, - ( { product, quantity } ) => { - const item = JSON.parse( product.extensions.gtmkit.item ); + ({ product, quantity }) => { + const item = JSON.parse(product.extensions.gtmkit.item); const eventParams = { ecommerce: { currency: window.gtmkit_data.wc.currency, - value: ( product.prices.sale_price / 100 ) * quantity, - items: [ item ], + value: (product.prices.sale_price / 100) * quantity, + items: [item], }, }; - pushEvent( 'remove_from_cart', eventParams ); + pushEvent('remove_from_cart', eventParams); } ); addAction( - `${ actionPrefix }-cart-add-item`, + `${actionPrefix}-cart-add-item`, namespace, - ( { product, quantity = 1 } ) => { - const item = JSON.parse( product.extensions.gtmkit.item ); + ({ product, quantity = 1 }) => { + const item = JSON.parse(product.extensions.gtmkit.item); const eventParams = { ecommerce: { currency: window.gtmkit_data.wc.currency, - value: ( product.prices.sale_price / 100 ) * quantity, - items: [ item ], + value: (product.prices.sale_price / 100) * quantity, + items: [item], }, }; - pushEvent( 'add_to_cart', eventParams ); + pushEvent('add_to_cart', eventParams); } ); diff --git a/src/js/frontend/woocommerce-blocks/utils.js b/src/js/frontend/woocommerce-blocks/utils.js index 97c0885..ded675b 100644 --- a/src/js/frontend/woocommerce-blocks/utils.js +++ b/src/js/frontend/woocommerce-blocks/utils.js @@ -4,23 +4,23 @@ * @param {string} eventName * @param {Object} eventParams */ -export const pushEvent = ( eventName, eventParams ) => { - window[ window.gtmkit_settings.datalayer_name ].push( { ecommerce: null } ); - window[ window.gtmkit_settings.datalayer_name ].push( { +export const pushEvent = (eventName, eventParams) => { + window[window.gtmkit_settings.datalayer_name].push({ ecommerce: null }); + window[window.gtmkit_settings.datalayer_name].push({ event: eventName, eventParams, - } ); + }); - if ( window.gtmkit_settings.console_log === 'on' ) + if (window.gtmkit_settings.console_log === 'on') // eslint-disable-next-line no-console - console.log( `Pushing event ${ eventName }` ); + console.log(`Pushing event ${eventName}`); }; /** * Track shipping info */ export const shippingInfo = () => { - if ( window.gtmkit_data.wc.add_shipping_info.fired === true ) return; + if (window.gtmkit_data.wc.add_shipping_info.fired === true) return; const eventParams = { ecommerce: { @@ -31,7 +31,7 @@ export const shippingInfo = () => { }, }; - pushEvent( 'add_shipping_info', eventParams ); + pushEvent('add_shipping_info', eventParams); window.gtmkit_data.wc.add_shipping_info.fired = true; }; @@ -40,7 +40,7 @@ export const shippingInfo = () => { * Track payment info */ export const paymentInfo = () => { - if ( window.gtmkit_data.wc.add_payment_info.fired === true ) return; + if (window.gtmkit_data.wc.add_payment_info.fired === true) return; const eventParams = { ecommerce: { @@ -51,7 +51,7 @@ export const paymentInfo = () => { }, }; - pushEvent( 'add_payment_info', eventParams ); + pushEvent('add_payment_info', eventParams); window.gtmkit_data.wc.add_payment_info.fired = true; }; diff --git a/src/js/woocommerce-checkout.js b/src/js/woocommerce-checkout.js index 3c4f2a7..d166fb2 100644 --- a/src/js/woocommerce-checkout.js +++ b/src/js/woocommerce-checkout.js @@ -1,92 +1,90 @@ -if ( document.readyState === 'loading' ) { - document.addEventListener( 'DOMContentLoaded', gtmkitLoadCheckout ); +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', gtmkitLoadCheckout); } else { gtmkitLoadCheckout(); } function gtmkitLoadCheckout() { - if ( window.gtmkit_data.wc.is_cart ) gtmkitCart(); - if ( window.gtmkit_data.wc.is_checkout ) gtmkitCheckout(); + if (window.gtmkit_data.wc.is_cart) gtmkitCart(); + if (window.gtmkit_data.wc.is_checkout) gtmkitCheckout(); } function gtmkitCart() { - document.addEventListener( 'click', function ( e ) { + document.addEventListener('click', function (e) { const eventTargetElement = e.target; if ( - ! eventTargetElement || - ! eventTargetElement.closest( '[name=update_cart]' ) + !eventTargetElement || + !eventTargetElement.closest('[name=update_cart]') ) return true; gtmkitCartQuantityChange(); - } ); + }); - document.addEventListener( 'keypress', function ( e ) { + document.addEventListener('keypress', function (e) { const eventTargetElement = e.target; if ( - ! eventTargetElement || - ! eventTargetElement.closest( + !eventTargetElement || + !eventTargetElement.closest( '.woocommerce-cart-form input[type=number]' ) ) return true; gtmkitCartQuantityChange(); - } ); + }); } function gtmkitCartQuantityChange() { const datalayerName = window.gtmkit_settings.datalayer_name; document - .querySelectorAll( '.product-quantity input.qty' ) - .forEach( function ( qtyElement ) { + .querySelectorAll('.product-quantity input.qty') + .forEach(function (qtyElement) { const defaultValue = qtyElement.defaultValue; - let currentValue = parseInt( qtyElement.value ); - if ( isNaN( currentValue ) ) currentValue = defaultValue; + let currentValue = parseInt(qtyElement.value); + if (isNaN(currentValue)) currentValue = defaultValue; - if ( defaultValue !== currentValue ) { - const cartItem = qtyElement.closest( '.cart_item' ); + if (defaultValue !== currentValue) { + const cartItem = qtyElement.closest('.cart_item'); const productData = - cartItem && cartItem.querySelector( '.remove' ); - if ( ! productData ) return; + cartItem && cartItem.querySelector('.remove'); + if (!productData) return; const itemData = JSON.parse( - productData.getAttribute( 'data-gtmkit_product_data' ) + productData.getAttribute('data-gtmkit_product_data') ); - if ( defaultValue < currentValue ) { + if (defaultValue < currentValue) { // quantity increase itemData.quantity = currentValue - defaultValue; - window[ datalayerName ].push( { ecommerce: null } ); - window[ datalayerName ].push( { + window[datalayerName].push({ ecommerce: null }); + window[datalayerName].push({ event: 'add_to_cart', ecommerce: { currency: window.gtmkit_data.wc.currency, value: - itemData.price * - ( currentValue - defaultValue ), - items: [ itemData ], + itemData.price * (currentValue - defaultValue), + items: [itemData], }, - } ); + }); } else { // quantity decrease itemData.quantity = defaultValue - currentValue; - window[ datalayerName ].push( { ecommerce: null } ); - window[ datalayerName ].push( { + window[datalayerName].push({ ecommerce: null }); + window[datalayerName].push({ event: 'remove_from_cart', ecommerce: { currency: window.gtmkit_data.wc.currency, value: - itemData.price * - ( defaultValue - currentValue ), - items: [ itemData ], + itemData.price * (defaultValue - currentValue), + items: [itemData], }, - } ); + }); } } - } ); + }); } function gtmkitCheckout() { @@ -96,46 +94,42 @@ function gtmkitCheckout() { ) return; - if ( window.gtmkit_settings.wc.add_shipping_info.config === 2 ) { - document.addEventListener( 'change', function ( e ) { + if (window.gtmkit_settings.wc.add_shipping_info.config === 2) { + document.addEventListener('change', function (e) { const eventTargetElement = e.target; if ( - ! eventTargetElement || - ( ! eventTargetElement.closest( - 'input[name^=shipping_method]' - ) && - ! eventTargetElement.closest( + !eventTargetElement || + (!eventTargetElement.closest('input[name^=shipping_method]') && + !eventTargetElement.closest( '.wc-block-components-shipping-rates-control' - ) ) + )) ) return true; gtmkitShippingEvent(); - } ); + }); } - if ( window.gtmkit_settings.wc.add_payment_info.config === 2 ) { - document.addEventListener( 'change', function ( e ) { + if (window.gtmkit_settings.wc.add_payment_info.config === 2) { + document.addEventListener('change', function (e) { const eventTargetElement = e.target; if ( - ! eventTargetElement || - ( ! eventTargetElement.closest( - 'input[name=payment_method]' - ) && - ! eventTargetElement.closest( + !eventTargetElement || + (!eventTargetElement.closest('input[name=payment_method]') && + !eventTargetElement.closest( '.wc-block-checkout__payment-method' - ) ) + )) ) return true; gtmkitPaymentEvent(); - } ); + }); } - document.addEventListener( 'click', function ( e ) { - const eventTargetElement = e.target.closest( 'button' ); + document.addEventListener('click', function (e) { + const eventTargetElement = e.target.closest('button'); - if ( ! eventTargetElement ) { + if (!eventTargetElement) { return true; } @@ -152,11 +146,11 @@ function gtmkitCheckout() { } else { return true; } - } ); + }); } function gtmkitShippingEvent() { - if ( window.gtmkit_data.wc.add_shipping_info.fired === true ) return; + if (window.gtmkit_data.wc.add_shipping_info.fired === true) return; const datalayerName = window.gtmkit_settings.datalayer_name; @@ -165,7 +159,7 @@ function gtmkitShippingEvent() { shippingElement = document.querySelector( 'input[name^=shipping_method]:checked' ); - if ( ! shippingElement ) { + if (!shippingElement) { shippingElement = document.querySelector( 'input[name^=shipping_method]' ); // select the first shipping method @@ -173,10 +167,10 @@ function gtmkitShippingEvent() { const shippingTier = shippingElement ? shippingElement.value - : window.gtmkit_settings.wc.text[ 'shipping-tier-not-found' ]; + : window.gtmkit_settings.wc.text['shipping-tier-not-found']; - window[ datalayerName ].push( { ecommerce: null } ); - window[ datalayerName ].push( { + window[datalayerName].push({ ecommerce: null }); + window[datalayerName].push({ event: 'add_shipping_info', ecommerce: { currency: window.gtmkit_data.wc.currency, @@ -184,30 +178,28 @@ function gtmkitShippingEvent() { shippingTier, items: window.gtmkit_data.wc.cart_items, }, - } ); + }); window.gtmkit_data.wc.add_shipping_info.fired = true; } function gtmkitPaymentEvent() { - if ( window.gtmkit_data.wc.add_payment_info.fired === true ) return; + if (window.gtmkit_data.wc.add_payment_info.fired === true) return; let paymentElement; const datalayerName = window.gtmkit_settings.datalayer_name; - paymentElement = document.querySelector( '.payment_methods input:checked' ); - if ( ! paymentElement ) { - paymentElement = document.querySelector( - 'input[name^=payment_method]' - ); // select the first payment method + paymentElement = document.querySelector('.payment_methods input:checked'); + if (!paymentElement) { + paymentElement = document.querySelector('input[name^=payment_method]'); // select the first payment method } const paymentType = paymentElement ? paymentElement.value - : window.gtmkit_settings.wc.text[ 'payment-method-not-found' ]; + : window.gtmkit_settings.wc.text['payment-method-not-found']; - window[ datalayerName ].push( { ecommerce: null } ); - window[ datalayerName ].push( { + window[datalayerName].push({ ecommerce: null }); + window[datalayerName].push({ event: 'add_payment_info', ecommerce: { currency: window.gtmkit_data.wc.currency, @@ -215,7 +207,7 @@ function gtmkitPaymentEvent() { paymentType, items: window.gtmkit_data.wc.cart_items, }, - } ); + }); window.gtmkit_data.wc.add_payment_info.fired = true; } diff --git a/src/js/woocommerce.js b/src/js/woocommerce.js index 980fc5a..e684d3c 100644 --- a/src/js/woocommerce.js +++ b/src/js/woocommerce.js @@ -16,69 +16,67 @@ function gtmkitLoad() { // Set list name and position on product blocks document - .querySelectorAll( '.wc-block-grid .wc-block-grid__product' ) - .forEach( function ( gridItem ) { - const productGrid = gridItem.closest( '.wc-block-grid' ); - const productData = gridItem.querySelector( - '.gtmkit_product_data' - ); + .querySelectorAll('.wc-block-grid .wc-block-grid__product') + .forEach(function (gridItem) { + const productGrid = gridItem.closest('.wc-block-grid'); + const productData = gridItem.querySelector('.gtmkit_product_data'); - if ( productGrid && productData ) { + if (productGrid && productData) { const productGridClasses = productGrid.classList; - if ( productGridClasses ) { - for ( const i in productBlockIndex ) { - if ( productGridClasses.contains( i ) ) { + if (productGridClasses) { + for (const i in productBlockIndex) { + if (productGridClasses.contains(i)) { const itemData = JSON.parse( productData.getAttribute( 'data-gtmkit_product_data' ) ); itemData.item_list_name = - window.gtmkit_settings.wc.text[ i ]; - itemData.index = productBlockIndex[ i ]; + window.gtmkit_settings.wc.text[i]; + itemData.index = productBlockIndex[i]; productData.setAttribute( 'data-gtmkit_product_data', - JSON.stringify( itemData ) + JSON.stringify(itemData) ); - productBlockIndex[ i ]++; + productBlockIndex[i]++; } } } } - } ); + }); // view_item_list event in product lists const productDataElements = document.querySelectorAll( '.gtmkit_product_data' ); - if ( productDataElements.length ) { + if (productDataElements.length) { const items = []; let itemData; - productDataElements.forEach( function ( productData ) { + productDataElements.forEach(function (productData) { itemData = JSON.parse( - productData.getAttribute( 'data-gtmkit_product_data' ) + productData.getAttribute('data-gtmkit_product_data') ); - items.push( itemData ); - } ); + items.push(itemData); + }); - window[ datalayerName ].push( { ecommerce: null } ); - window[ datalayerName ].push( { + window[datalayerName].push({ ecommerce: null }); + window[datalayerName].push({ event: 'view_item_list', ecommerce: { items, }, - } ); + }); } // add_to_cart event for simple products in product lists - document.addEventListener( 'click', function ( e ) { + document.addEventListener('click', function (e) { const eventTargetElement = e.target; let event; - if ( ! eventTargetElement ) { + if (!eventTargetElement) { return true; } @@ -89,8 +87,8 @@ function gtmkitLoad() { ) { event = 'add_to_cart'; } else if ( - ( eventTargetElement.closest( '.products' ) || - eventTargetElement.closest( '.wc-block-grid__products' ) ) && + (eventTargetElement.closest('.products') || + eventTargetElement.closest('.wc-block-grid__products')) && eventTargetElement.closest( '.add_to_wishlist, .tinvwl_add_to_wishlist_button:not(.tinvwl-product-in-list)' ) @@ -105,37 +103,37 @@ function gtmkitLoad() { ); const productData = productElement && - productElement.querySelector( '.gtmkit_product_data' ); - if ( ! productData ) { + productElement.querySelector('.gtmkit_product_data'); + if (!productData) { return true; } const itemData = JSON.parse( - productData.getAttribute( 'data-gtmkit_product_data' ) + productData.getAttribute('data-gtmkit_product_data') ); - window[ datalayerName ].push( { ecommerce: null } ); - window[ datalayerName ].push( { + window[datalayerName].push({ ecommerce: null }); + window[datalayerName].push({ event, ecommerce: { currency: window.gtmkit_data.wc.currency, value: itemData.price, - items: [ itemData ], + items: [itemData], }, - } ); - } ); + }); + }); // add_to_cart event on product page - document.addEventListener( 'click', function ( e ) { + document.addEventListener('click', function (e) { const eventTargetElement = e.target; let event; - if ( ! eventTargetElement ) { + if (!eventTargetElement) { return true; } let addToCart; - addToCart = eventTargetElement.closest( 'form.cart' ); + addToCart = eventTargetElement.closest('form.cart'); if ( addToCart && @@ -156,16 +154,15 @@ function gtmkitLoad() { '.yith-wcwl-add-to-wishlist' ); - if ( addToWishlist ) { - addToCart = - addToWishlist.parentNode.querySelector( 'form.cart' ); - if ( addToCart ) { + if (addToWishlist) { + addToCart = addToWishlist.parentNode.querySelector('form.cart'); + if (addToCart) { event = 'add_to_wishlist'; } } } - if ( ! event ) { + if (!event) { return true; } @@ -173,107 +170,105 @@ function gtmkitLoad() { '[name=variation_id]' ); const productIsGrouped = - addToCart.classList && - addToCart.classList.contains( 'grouped_form' ); + addToCart.classList && addToCart.classList.contains('grouped_form'); - if ( productVariantId.length ) { + if (productVariantId.length) { let quantity = 1; let price; - if ( selectedProductVariationData ) { + if (selectedProductVariationData) { const quantityElement = - addToCart.querySelector( '[name=quantity]' ); + addToCart.querySelector('[name=quantity]'); selectedProductVariationData.quantity = - ( quantityElement && quantityElement.value ) || 1; + (quantityElement && quantityElement.value) || 1; quantity = selectedProductVariationData.quantity; price = selectedProductVariationData.price; } if ( - ( selectedProductVariationData && event === 'add_to_cart' ) || + (selectedProductVariationData && event === 'add_to_cart') || event === 'add_to_wishlist' ) { - window[ datalayerName ].push( { ecommerce: null } ); - window[ datalayerName ].push( { + window[datalayerName].push({ ecommerce: null }); + window[datalayerName].push({ event, ecommerce: { currency: window.gtmkit_data.wc.currency, value: price * quantity, - items: [ selectedProductVariationData ], + items: [selectedProductVariationData], }, - } ); + }); } - } else if ( productIsGrouped ) { + } else if (productIsGrouped) { const productsInGroup = document.querySelectorAll( '.grouped_form .gtmkit_product_data' ); const products = []; let value = 0; - productsInGroup.forEach( function ( productData ) { + productsInGroup.forEach(function (productData) { let productQuantity = document.querySelectorAll( 'input[name=quantity\\[' + - productData.getAttribute( 'data-gtmkit_product_id' ) + + productData.getAttribute('data-gtmkit_product_id') + '\\]]' ); - productQuantity = parseInt( productQuantity[ 0 ].value ); + productQuantity = parseInt(productQuantity[0].value); - if ( 0 === productQuantity ) { + if (0 === productQuantity) { return true; } const itemData = JSON.parse( - productData.getAttribute( 'data-gtmkit_product_data' ) + productData.getAttribute('data-gtmkit_product_data') ); itemData.quantity = productQuantity; - products.push( itemData ); + products.push(itemData); value += itemData.price * itemData.quantity; - } ); + }); - if ( 0 === products.length ) { + if (0 === products.length) { return true; } - window[ datalayerName ].push( { ecommerce: null } ); - window[ datalayerName ].push( { + window[datalayerName].push({ ecommerce: null }); + window[datalayerName].push({ event, ecommerce: { currency: window.gtmkit_data.wc.currency, value, items: products, }, - } ); + }); } else { const itemData = JSON.parse( - addToCart.querySelector( '[name=gtmkit_product_data]' ) && - addToCart.querySelector( '[name=gtmkit_product_data]' ) - .value + addToCart.querySelector('[name=gtmkit_product_data]') && + addToCart.querySelector('[name=gtmkit_product_data]').value ); itemData.quantity = - addToCart.querySelector( '[name=quantity]' ) && - addToCart.querySelector( '[name=quantity]' ).value; + addToCart.querySelector('[name=quantity]') && + addToCart.querySelector('[name=quantity]').value; - window[ datalayerName ].push( { ecommerce: null } ); - window[ datalayerName ].push( { + window[datalayerName].push({ ecommerce: null }); + window[datalayerName].push({ event, ecommerce: { currency: window.gtmkit_data.wc.currency, value: itemData.price * itemData.quantity, - items: [ itemData ], + items: [itemData], }, - } ); + }); } - } ); + }); // remove_from_cart event on cart remove links - document.addEventListener( 'click', function ( e ) { + document.addEventListener('click', function (e) { const productData = e.target; if ( - ! productData || - ! productData.closest( + !productData || + !productData.closest( '.mini_cart_item a.remove,.product-remove a.remove' ) ) { @@ -281,30 +276,28 @@ function gtmkitLoad() { } const itemData = JSON.parse( - productData.getAttribute( 'data-gtmkit_product_data' ) + productData.getAttribute('data-gtmkit_product_data') ); - if ( ! itemData ) return true; + if (!itemData) return true; - window[ datalayerName ].push( { + window[datalayerName].push({ event: 'remove_from_cart', ecommerce: { - items: [ itemData ], + items: [itemData], }, - } ); - } ); + }); + }); // select_item event on clicks in product lists const productListItemSelector = '.products li:not(.product-category) a:not(.add_to_cart_button,.add_to_wishlist,.tinvwl_add_to_wishlist_button),' + '.wc-block-grid__products li:not(.product-category) a:not(.add_to_cart_button,.add_to_wishlist,.tinvwl_add_to_wishlist_button),' + '.woocommerce-grouped-product-list-item__label a:not(.add_to_wishlist,.tinvwl_add_to_wishlist_button)'; - document.addEventListener( 'click', function ( e ) { + document.addEventListener('click', function (e) { const eventTargetElement = e.target; - const linkElement = eventTargetElement.closest( - productListItemSelector - ); - if ( ! linkElement ) return true; + const linkElement = eventTargetElement.closest(productListItemSelector); + if (!linkElement) return true; const product = eventTargetElement.closest( '.product,.wc-block-grid__product' @@ -312,86 +305,80 @@ function gtmkitLoad() { let productData; - if ( product ) { - productData = product.querySelector( '.gtmkit_product_data' ); + if (product) { + productData = product.querySelector('.gtmkit_product_data'); } else { return true; } if ( 'undefined' === - typeof productData.getAttribute( 'data-gtmkit_product_data' ) + typeof productData.getAttribute('data-gtmkit_product_data') ) { return true; } const itemData = JSON.parse( - productData.getAttribute( 'data-gtmkit_product_data' ) + productData.getAttribute('data-gtmkit_product_data') ); - if ( ! itemData ) return true; + if (!itemData) return true; - window[ datalayerName ].push( { + window[datalayerName].push({ event: 'select_item', ecommerce: { - items: [ itemData ], + items: [itemData], }, - } ); - } ); + }); + }); // track product variations on product page // eslint-disable-next-line no-undef - jQuery( document ).on( - 'found_variation', - function ( event, productVariation ) { - if ( 'undefined' === typeof productVariation ) return; - - const variationsForm = event.target; - const productVariationData = JSON.parse( - variationsForm.querySelector( '[name=gtmkit_product_data]' ) && - variationsForm.querySelector( '[name=gtmkit_product_data]' ) - .value - ); + jQuery(document).on('found_variation', function (event, productVariation) { + if ('undefined' === typeof productVariation) return; - productVariationData.item_id = productVariation.variation_id; - if ( - window.gtmkit_settings.wc.use_sku && - productVariation.sku && - '' !== productVariation.sku - ) { - productVariationData.item_id = productVariation.sku; - } + const variationsForm = event.target; + const productVariationData = JSON.parse( + variationsForm.querySelector('[name=gtmkit_product_data]') && + variationsForm.querySelector('[name=gtmkit_product_data]').value + ); - productVariationData.price = productVariation.display_price; + productVariationData.item_id = productVariation.variation_id; + if ( + window.gtmkit_settings.wc.use_sku && + productVariation.sku && + '' !== productVariation.sku + ) { + productVariationData.item_id = productVariation.sku; + } - const productAttributes = []; - for ( const attribKey in productVariation.attributes ) { - productAttributes.push( - productVariation.attributes[ attribKey ] - ); - } - productVariationData.item_variant = productAttributes - .filter( ( n ) => n ) - .join( '|' ); - selectedProductVariationData = productVariationData; - - if ( window.gtmkit_settings.wc.view_item.config !== 0 ) { - window[ datalayerName ].push( { ecommerce: null } ); - window[ datalayerName ].push( { - event: 'view_item', - ecommerce: { - currency: window.gtmkit_data.wc.currency, - value: productVariationData.price, - items: [ productVariationData ], - }, - } ); - } + productVariationData.price = productVariation.display_price; + + const productAttributes = []; + for (const attribKey in productVariation.attributes) { + productAttributes.push(productVariation.attributes[attribKey]); } - ); + productVariationData.item_variant = productAttributes + .filter((n) => n) + .join('|'); + selectedProductVariationData = productVariationData; + + if (window.gtmkit_settings.wc.view_item.config !== 0) { + window[datalayerName].push({ ecommerce: null }); + window[datalayerName].push({ + event: 'view_item', + ecommerce: { + currency: window.gtmkit_data.wc.currency, + value: productVariationData.price, + items: [productVariationData], + }, + }); + } + }); } -if ( document.readyState === 'loading' ) { - document.addEventListener( 'DOMContentLoaded', gtmkitLoad ); +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', gtmkitLoad); } else { gtmkitLoad(); }