| @@ -1,19 +1,444 @@ | ||
| 1 | -(function($){ | |
| 2 | - | |
| 3 | - $(document).ready(function($) { | |
| 4 | - | |
| 5 | - $(document).on( 'click', 'a[href*="wcf-next-step"]', function(e) { | |
| 6 | - | |
| 7 | - e.preventDefault(); | |
| 8 | - | |
| 9 | - if( 'undefined' !== typeof cartflows.is_pb_preview && '1' == cartflows.is_pb_preview ) { | |
| 10 | - e.stopPropagation(); | |
| 11 | - return; | |
| 12 | - } | |
| 13 | - | |
| 14 | - window.location.href = cartflows.next_step; | |
| 15 | - | |
| 16 | - return false; | |
| 17 | - }); | |
| 18 | - }); | |
| 19 | -})(jQuery); | |
| 1 | +( function ( $ ) { | |
| 2 | + const wcf_order_review_toggler = function () { | |
| 3 | + const mobile_order_review_section = $( | |
| 4 | + '.wcf-collapsed-order-review-section' | |
| 5 | + ), | |
| 6 | + mobile_order_review_wrap = $( | |
| 7 | + '.wcf-cartflows-review-order-wrapper' | |
| 8 | + ), | |
| 9 | + desktop_order_review_wrap = $( '.wcf-order-wrap' ); | |
| 10 | + | |
| 11 | + let timeout = false; | |
| 12 | + const resizeEvent = | |
| 13 | + 'onorientationchange' in window ? 'orientationchange' : 'resize'; | |
| 14 | + | |
| 15 | + $( '.wcf-order-review-toggle' ).on( | |
| 16 | + 'click', | |
| 17 | + function wcf_show_order_summary( e ) { | |
| 18 | + e.preventDefault(); | |
| 19 | + | |
| 20 | + if ( mobile_order_review_section.hasClass( 'wcf-show' ) ) { | |
| 21 | + mobile_order_review_wrap.slideUp( 400 ); | |
| 22 | + mobile_order_review_section.removeClass( 'wcf-show' ); | |
| 23 | + $( '.wcf-order-review-toggle-text' ).text( | |
| 24 | + cartflows.order_review_toggle_texts.toggle_show_text | |
| 25 | + ); | |
| 26 | + } else { | |
| 27 | + mobile_order_review_wrap.slideDown( 400 ); | |
| 28 | + mobile_order_review_section.addClass( 'wcf-show' ); | |
| 29 | + $( '.wcf-order-review-toggle-text' ).text( | |
| 30 | + cartflows.order_review_toggle_texts.toggle_hide_text | |
| 31 | + ); | |
| 32 | + } | |
| 33 | + } | |
| 34 | + ); | |
| 35 | + | |
| 36 | + $( window ).on( resizeEvent, function () { | |
| 37 | + clearTimeout( timeout ); | |
| 38 | + | |
| 39 | + timeout = setTimeout( function () { | |
| 40 | + const width = window.innerWidth || $( window ).width(); | |
| 41 | + | |
| 42 | + if ( width >= 769 ) { | |
| 43 | + mobile_order_review_wrap.css( { display: 'none' } ); | |
| 44 | + mobile_order_review_wrap.removeClass( 'wcf-show' ); | |
| 45 | + $( '.wcf-order-review-toggle' ).removeClass( 'wcf-show' ); | |
| 46 | + $( '.wcf-order-review-toggle-text' ).text( | |
| 47 | + cartflows.order_review_toggle_texts.toggle_show_text | |
| 48 | + ); | |
| 49 | + } | |
| 50 | + }, 200 ); | |
| 51 | + } ); | |
| 52 | + | |
| 53 | + // Update checkout when shipping methods changes. | |
| 54 | + mobile_order_review_wrap.on( | |
| 55 | + 'change', | |
| 56 | + 'select.shipping_method, input[name^="shipping_method"]', | |
| 57 | + function () { | |
| 58 | + /** | |
| 59 | + * Uncheck all shipping radio buttons of desktop. Those will be auto updated by update_checkout action. | |
| 60 | + * While performing the update checkout, it searches for the selected shipping method in whole page. | |
| 61 | + */ | |
| 62 | + desktop_order_review_wrap | |
| 63 | + .find( | |
| 64 | + 'input[name^="shipping_method"][type="radio"]:checked' | |
| 65 | + ) | |
| 66 | + .each( function () { | |
| 67 | + $( this ).removeAttr( 'checked' ); | |
| 68 | + } ); | |
| 69 | + | |
| 70 | + $( document.body ).trigger( 'update_checkout', { | |
| 71 | + update_shipping_method: true, | |
| 72 | + } ); | |
| 73 | + } | |
| 74 | + ); | |
| 75 | + }; | |
| 76 | + | |
| 77 | + function setCookie( cName, cValue, expDays ) { | |
| 78 | + const date = new Date(); | |
| 79 | + date.setTime( date.getTime() + expDays * 24 * 60 * 60 * 1000 ); | |
| 80 | + const expires = 'expires=' + date.toUTCString(); | |
| 81 | + document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'; | |
| 82 | + } | |
| 83 | + | |
| 84 | + /* It will redirect if anyone clicked on link before ready */ | |
| 85 | + $( document ).on( 'click', 'a[href*="wcf-next-step"]', function ( e ) { | |
| 86 | + e.preventDefault(); | |
| 87 | + | |
| 88 | + if ( | |
| 89 | + 'undefined' !== typeof cartflows.is_pb_preview && | |
| 90 | + true === cartflows.is_pb_preview | |
| 91 | + ) { | |
| 92 | + e.stopPropagation(); | |
| 93 | + return; | |
| 94 | + } | |
| 95 | + | |
| 96 | + window.location.href = cartflows.next_step; | |
| 97 | + | |
| 98 | + return false; | |
| 99 | + } ); | |
| 100 | + | |
| 101 | + /* Once the link is ready this will work to stop conditional propogation*/ | |
| 102 | + $( document ).on( 'click', '.wcf-next-step-link', function ( e ) { | |
| 103 | + if ( | |
| 104 | + 'undefined' !== typeof cartflows.is_pb_preview && | |
| 105 | + '1' === cartflows.is_pb_preview | |
| 106 | + ) { | |
| 107 | + e.preventDefault(); | |
| 108 | + e.stopPropagation(); | |
| 109 | + return false; | |
| 110 | + } | |
| 111 | + } ); | |
| 112 | + | |
| 113 | + // Remove css when oceanwp theme is enabled. | |
| 114 | + const remove_oceanwp_custom_style = function () { | |
| 115 | + if ( | |
| 116 | + 'OceanWP' === cartflows.current_theme && | |
| 117 | + 'default' !== cartflows.page_template | |
| 118 | + ) { | |
| 119 | + const style = document.getElementById( 'oceanwp-style-css' ); | |
| 120 | + if ( null !== style ) { | |
| 121 | + style.remove(); | |
| 122 | + } | |
| 123 | + } | |
| 124 | + }; | |
| 125 | + | |
| 126 | + const trigger_facebook_events = function () { | |
| 127 | + if ( | |
| 128 | + 'enable' === cartflows.fb_setting.facebook_pixel_tracking && | |
| 129 | + cartflows.fb_setting.facebook_pixel_id !== '' | |
| 130 | + ) { | |
| 131 | + const add_payment_info_event = | |
| 132 | + cartflows.fb_setting.facebook_pixel_add_payment_info; | |
| 133 | + if ( | |
| 134 | + 'enable' === add_payment_info_event && | |
| 135 | + cartflows.is_checkout_page | |
| 136 | + ) { | |
| 137 | + jQuery( 'form.woocommerce-checkout' ).on( | |
| 138 | + 'submit', | |
| 139 | + function () { | |
| 140 | + fbq( | |
| 141 | + 'track', | |
| 142 | + 'AddPaymentInfo', | |
| 143 | + JSON.parse( cartflows.fb_add_payment_info_data ) | |
| 144 | + ); | |
| 145 | + } | |
| 146 | + ); | |
| 147 | + } else if ( | |
| 148 | + cartflows.is_optin && | |
| 149 | + 'enable' === cartflows.fb_setting.facebook_pixel_optin_lead | |
| 150 | + ) { | |
| 151 | + jQuery( 'form.woocommerce-checkout' ).on( | |
| 152 | + 'submit', | |
| 153 | + function () { | |
| 154 | + fbq( 'track', 'Lead', { plugin: 'CartFlows' } ); | |
| 155 | + } | |
| 156 | + ); | |
| 157 | + } | |
| 158 | + } | |
| 159 | + }; | |
| 160 | + | |
| 161 | + const trigger_google_events = function () { | |
| 162 | + if ( cartflows.ga_setting.enable_google_analytics === 'enable' ) { | |
| 163 | + if ( | |
| 164 | + cartflows.is_checkout_page && | |
| 165 | + 'enable' === cartflows.ga_setting.enable_add_payment_info | |
| 166 | + ) { | |
| 167 | + jQuery( 'form.woocommerce-checkout' ).on( | |
| 168 | + 'submit', | |
| 169 | + function () { | |
| 170 | + gtag( | |
| 171 | + 'event', | |
| 172 | + 'add_payment_info', | |
| 173 | + JSON.parse( cartflows.add_payment_info_data ) | |
| 174 | + ); | |
| 175 | + } | |
| 176 | + ); | |
| 177 | + } else if ( | |
| 178 | + cartflows.is_optin && | |
| 179 | + 'enable' === cartflows.ga_setting.enable_optin_lead | |
| 180 | + ) { | |
| 181 | + jQuery( 'form.woocommerce-checkout' ).on( | |
| 182 | + 'submit', | |
| 183 | + function () { | |
| 184 | + gtag( 'event', 'Lead', { plugin: 'CartFlows' } ); | |
| 185 | + } | |
| 186 | + ); | |
| 187 | + } | |
| 188 | + } | |
| 189 | + }; | |
| 190 | + | |
| 191 | + // Trigger TikTok events on form submit. | |
| 192 | + const trigger_tiktok_events = function () { | |
| 193 | + if ( | |
| 194 | + 'enable' === cartflows.tik_setting.tiktok_pixel_tracking && | |
| 195 | + cartflows.tik_setting.tiktok_pixel_id !== '' | |
| 196 | + ) { | |
| 197 | + /* global ttq */ | |
| 198 | + const add_payment_info_event = | |
| 199 | + cartflows.tik_setting.enable_tiktok_add_payment_info; | |
| 200 | + if ( | |
| 201 | + 'enable' === add_payment_info_event && | |
| 202 | + cartflows.is_checkout_page | |
| 203 | + ) { | |
| 204 | + jQuery( 'form.woocommerce-checkout' ).on( | |
| 205 | + 'submit', | |
| 206 | + function () { | |
| 207 | + ttq.track( | |
| 208 | + 'AddPaymentInfo', | |
| 209 | + JSON.parse( cartflows.tiktok_add_payment_info_data ) | |
| 210 | + ); | |
| 211 | + } | |
| 212 | + ); | |
| 213 | + } else if ( | |
| 214 | + cartflows.is_optin && | |
| 215 | + 'enable' === cartflows.tik_setting.enable_tiktok_optin_lead | |
| 216 | + ) { | |
| 217 | + jQuery( 'form.woocommerce-checkout' ).on( | |
| 218 | + 'submit', | |
| 219 | + function () { | |
| 220 | + ttq.track( 'Lead', { plugin: 'CartFlows' } ); | |
| 221 | + } | |
| 222 | + ); | |
| 223 | + } | |
| 224 | + } | |
| 225 | + }; | |
| 226 | + | |
| 227 | + // Trigger google ads events on form submit. | |
| 228 | + const trigger_google_ads_events = function () { | |
| 229 | + if ( cartflows.gads_setting.google_ads_tracking === 'enable' ) { | |
| 230 | + if ( | |
| 231 | + cartflows.is_checkout_page && | |
| 232 | + 'enable' === | |
| 233 | + cartflows.gads_setting.enable_google_ads_add_payment_info | |
| 234 | + ) { | |
| 235 | + jQuery( 'form.woocommerce-checkout' ).on( | |
| 236 | + 'submit', | |
| 237 | + function () { | |
| 238 | + gtag( | |
| 239 | + 'event', | |
| 240 | + 'add_payment_info', | |
| 241 | + JSON.parse( cartflows.add_payment_info_data ) | |
| 242 | + ); | |
| 243 | + } | |
| 244 | + ); | |
| 245 | + } else if ( | |
| 246 | + cartflows.is_optin && | |
| 247 | + 'enable' === cartflows.gads_setting.enable_google_ads_optin_lead | |
| 248 | + ) { | |
| 249 | + jQuery( 'form.woocommerce-checkout' ).on( | |
| 250 | + 'submit', | |
| 251 | + function () { | |
| 252 | + gtag( 'event', 'Lead', { plugin: 'CartFlows' } ); | |
| 253 | + } | |
| 254 | + ); | |
| 255 | + } | |
| 256 | + } | |
| 257 | + }; | |
| 258 | + | |
| 259 | + // Trigger Snapchat events on form submit. | |
| 260 | + const trigger_snapchat_events = function () { | |
| 261 | + if ( | |
| 262 | + 'enable' === cartflows.snap_settings.snapchat_pixel_tracking && | |
| 263 | + cartflows.snap_settings.snapchat_pixel_id !== '' | |
| 264 | + ) { | |
| 265 | + /* global snaptr */ | |
| 266 | + if ( | |
| 267 | + cartflows.is_optin && | |
| 268 | + 'enable' === cartflows.snap_settings.enable_snapchat_optin_lead | |
| 269 | + ) { | |
| 270 | + jQuery( 'form.woocommerce-checkout' ).on( | |
| 271 | + 'submit', | |
| 272 | + function () { | |
| 273 | + snaptr( 'track', 'SIGN_UP', { | |
| 274 | + sign_up_method: 'CartFlows Optin Lead', | |
| 275 | + } ); | |
| 276 | + } | |
| 277 | + ); | |
| 278 | + } | |
| 279 | + } | |
| 280 | + }; | |
| 281 | + | |
| 282 | + // Trigger pinterest events on form submit. | |
| 283 | + const trigger_pinterest_events = function () { | |
| 284 | + if ( | |
| 285 | + 'enable' === cartflows.pin_settings.pinterest_tag_tracking && | |
| 286 | + cartflows.pin_settings.pinterest_tag_id !== '' && | |
| 287 | + typeof pintrk !== 'undefined' | |
| 288 | + ) { | |
| 289 | + /* global pintrk */ | |
| 290 | + const add_payment_info_event = | |
| 291 | + cartflows.pin_settings.enable_pinterest_add_payment_info; | |
| 292 | + if ( | |
| 293 | + 'enable' === add_payment_info_event && | |
| 294 | + cartflows.is_checkout_page | |
| 295 | + ) { | |
| 296 | + jQuery( 'form.woocommerce-checkout' ).on( | |
| 297 | + 'submit', | |
| 298 | + function () { | |
| 299 | + pintrk( | |
| 300 | + 'track', | |
| 301 | + 'AddPaymentInfo', | |
| 302 | + JSON.parse( | |
| 303 | + cartflows.pinterest_add_payment_info_data | |
| 304 | + ) | |
| 305 | + ); | |
| 306 | + } | |
| 307 | + ); | |
| 308 | + } else if ( cartflows.is_optin ) { | |
| 309 | + if ( | |
| 310 | + 'enable' === | |
| 311 | + cartflows.pin_settings.enable_pinterest_optin_lead | |
| 312 | + ) { | |
| 313 | + jQuery( 'form.woocommerce-checkout' ).on( | |
| 314 | + 'submit', | |
| 315 | + function () { | |
| 316 | + pintrk( 'track', 'Lead', { | |
| 317 | + lead_type: 'CartFlows Optin', | |
| 318 | + } ); | |
| 319 | + } | |
| 320 | + ); | |
| 321 | + } | |
| 322 | + if ( | |
| 323 | + 'enable' === cartflows.pin_settings.enable_pinterest_signup | |
| 324 | + ) { | |
| 325 | + jQuery( 'form.woocommerce-checkout' ).on( | |
| 326 | + 'submit', | |
| 327 | + function () { | |
| 328 | + pintrk( | |
| 329 | + 'track', | |
| 330 | + 'Signup', | |
| 331 | + JSON.parse( | |
| 332 | + cartflows.pinterest_signup_info_data | |
| 333 | + ) | |
| 334 | + ); | |
| 335 | + } | |
| 336 | + ); | |
| 337 | + } | |
| 338 | + } | |
| 339 | + } | |
| 340 | + }; | |
| 341 | + | |
| 342 | + /** | |
| 343 | + * | |
| 344 | + * @param {string} next_step_url | |
| 345 | + * @return {string} next_step_url Modified string if query string is present. | |
| 346 | + */ | |
| 347 | + const may_be_append_query_string = function ( next_step_url ) { | |
| 348 | + // Get the URL parameters. | |
| 349 | + const urlParams = new URLSearchParams( window.location.search ); | |
| 350 | + | |
| 351 | + // Return the URL if no query string is present. | |
| 352 | + if ( urlParams.length <= 0 ) { | |
| 353 | + return next_step_url; | |
| 354 | + } | |
| 355 | + | |
| 356 | + // Get all URL parameter keys. | |
| 357 | + const keys = urlParams.keys(); | |
| 358 | + | |
| 359 | + // Store all parameters temporary. | |
| 360 | + const params = {}; | |
| 361 | + | |
| 362 | + // Loop through all parameter as keys to make key-value pair array/object. | |
| 363 | + for ( const key of keys ) { | |
| 364 | + params[ key ] = urlParams.get( key ); | |
| 365 | + } | |
| 366 | + | |
| 367 | + // Convert the object to a query string. | |
| 368 | + const queryString = new URLSearchParams( params ).toString(); | |
| 369 | + | |
| 370 | + // Return if the querystring is empty. | |
| 371 | + if ( '' === queryString ) { | |
| 372 | + return next_step_url; | |
| 373 | + } | |
| 374 | + | |
| 375 | + /** | |
| 376 | + * Append the query string to the URL | |
| 377 | + * If: No question mark is in the URL then: add the question mark before query string. | |
| 378 | + * Else: Question mark is found then: add '&' before query string.. | |
| 379 | + */ | |
| 380 | + if ( next_step_url.indexOf( '?' ) === -1 ) { | |
| 381 | + next_step_url = next_step_url + '?' + queryString; | |
| 382 | + } else { | |
| 383 | + next_step_url = next_step_url + '&' + queryString; | |
| 384 | + } | |
| 385 | + | |
| 386 | + return next_step_url; | |
| 387 | + }; | |
| 388 | + | |
| 389 | + /** | |
| 390 | + * Assign the class & link to specific button | |
| 391 | + */ | |
| 392 | + const setup_next_step_url = function () { | |
| 393 | + const next_links = $( 'a[href*="wcf-next-step"]' ); | |
| 394 | + | |
| 395 | + if ( | |
| 396 | + next_links.length > 0 && | |
| 397 | + 'undefined' !== typeof cartflows.next_step | |
| 398 | + ) { | |
| 399 | + next_links.addClass( 'wcf-next-step-link' ); | |
| 400 | + next_links.attr( | |
| 401 | + 'href', | |
| 402 | + may_be_append_query_string( cartflows.next_step ) | |
| 403 | + ); | |
| 404 | + } | |
| 405 | + }; | |
| 406 | + | |
| 407 | + // Event listener for accepting or declining Pinterest consent. | |
| 408 | + $( document ).on( 'click', '.wcf-pinterest-consent-button', function () { | |
| 409 | + const consentButton = $( this ); | |
| 410 | + const consentAction = consentButton.data( 'action' ); | |
| 411 | + | |
| 412 | + setCookie( | |
| 413 | + cartflows?.pinterest_consent_cookie, | |
| 414 | + 'accept' === consentAction ? 'true' : 'false', | |
| 415 | + 30 | |
| 416 | + ); | |
| 417 | + | |
| 418 | + // Hide the consent popup. | |
| 419 | + $( '#cartflows-pinterest-consent-wrapper' ).hide(); | |
| 420 | + | |
| 421 | + // Dispatch a custom event to notify that consent has changed. | |
| 422 | + if ( 'accept' === consentAction ) { | |
| 423 | + document.dispatchEvent( | |
| 424 | + new CustomEvent( 'cartflows_pinterest_consent_changed', { | |
| 425 | + detail: 'true', | |
| 426 | + } ) | |
| 427 | + ); | |
| 428 | + } | |
| 429 | + } ); | |
| 430 | + | |
| 431 | + $( function () { | |
| 432 | + setup_next_step_url(); | |
| 433 | + remove_oceanwp_custom_style(); | |
| 434 | + if ( '1' !== cartflows.is_pb_preview ) { | |
| 435 | + trigger_facebook_events(); | |
| 436 | + trigger_google_events(); | |
| 437 | + trigger_tiktok_events(); | |
| 438 | + trigger_google_ads_events(); | |
| 439 | + trigger_snapchat_events(); | |
| 440 | + trigger_pinterest_events(); | |
| 441 | + } | |
| 442 | + wcf_order_review_toggler(); | |
| 443 | + } ); | |
| 444 | +} )( jQuery ); | |
