Problems with Javascript on Cartflows checkout page?

Hi @cartflows, I do not see any errors in the Developer tools section. I think the issue is that after the Javascript loads, the checkout area refreshes again and the Javascript does not reapply itself.

Do you notice such behaviour on your end too?

Note that I have tested this with jquery too and observed the same issue:
$('.wcf-bump-order-content').css('display','none');

Thanks.

• This reply was modified 3 years, 8 months ago by jesseguttenberg.

@sandesh055 thanks. I tried using your script and placing it into an Elementor HTML widget as such:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
jQuery( document ).ready(function($) {
    $('.wcf-bump-order-content').css('display','none');
});
</script>

Unfortunately, it still doesn’t work. I have tried the Javascript equivalent and it does not work too ie.

<script>
window.addEventListener('load', function () {
  document.getElementsByClassName("wcf-bump-order-content")[0].setAttribute('style', 'display:none !important')};
<script>

It works if you just copy and paste it into the Developer tools console section. However, it doesn’t work when included in the site itself because somehow the checkout section refreshes and the javascript / jquery isn’t reapplied.

I am just curious why are you using JS to hide content?

Cartflows doesn’t offer Enhanced E-Commerce tracking in Google Analytics. Thus, I use a plugin to implement Enhance E-Commerce tracking (WooCommerce Google Analytics Pro) and this plugin seems to work only on a Cartflows Checkout page which has been designated as a Global Checkout. If a user checks out on any other page that isn’t a Global Checkout, the information simply wouldn’t appear in Google Analytics.

This is consistent with what I have been seeing elsewhere. For example, typical WooCommerce shortcuts like adding products via URL eg. https://yourdomain.com/checkout/?add-to-cart=25 only work if the checkout page is defined as Global Checkout. This will not work on other checkout pages.

Because of the above problem, I am forced to include all features I need on the Global Checkout page. Thus, I created an order bump. And the Order Bump would be hidden depending on the circumstances.

Perhaps, you may have a better solution to the problem I am facing?

Thanks.

• This reply was modified 3 years, 8 months ago by jesseguttenberg.

@cartflows, thanks. I tried adding it to the header. Nope still doesn’t work. Can you try on your end and let me know?

This is the code I inserted into functions.php. I cannot use your CSS solution as I need it to be rule-based ie. if this, then hide order bump, if that then don’t hide.

function add_xx_head(){
?>
 
<script>
window.addEventListener('load', function () {
  document.getElementsByClassName("wcf-bump-order-content")[0].setAttribute('style', 'display:none !important');
}); 
console.log("y");
</script> 
 
<?php 
}
add_action( 'wp_head', 'add_xx_head', 10 );