Problems with Javascript on Cartflows checkout page?
-
Hey Cartflows team,
Why is it that when I apply Javascript code to the Checkout Page, my script does not appear to work?
For example, when I try to hide the order bump via the following code, it does not seem to work (ie. order bump still shows up) :
document.getElementsByClassName("wcf-bump-order-content")[0].setAttribute("style", "display:none !important");
Thanks.
-
Hello @jesseguttenberg
Thank you for getting touch with us.
If you are adding the custom script in the CartFlows checkout page then it should work but it may not if it is generating an any JS error. So, can you please check that after adding the custom script is there any JS error in the browser’s console area?
If yes, then that might be the issue.
I hope this helps you.
Feel free to get in touch in case you need more assistance.
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 4 years, 1 month ago by jesseguttenberg.
You need to apply JS on document ready.
Try this js.
jQuery( document ).ready(function($) { $('.wcf-bump-order-content').css('display','none'); });
I am just curious why are you using JS to hide content?
@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 4 years, 1 month ago by jesseguttenberg.
Hello @jesseguttenberg
Well, let me tell you that as you are adding the script in the Elementor HTML widget, this script gets loaded in the body content of the Page and it will not get initialized until all the body content is rendered.
To make it work, you have to add that script in the head section of the page so that the document.ready event will be captured and it will hide the bump order content.
Also, you can achieve it in a different way, and that is you can specify CSS classes and add it to the body tag as per your condition and just use the CSS to hide/show the bump order section/content. This should work, because, even if the bump order section is refreshed the CSS will remain as it is and will do the needful.
I hope this clarifies you.
Feel free to get in touch in case you need more assistance.
@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 );
Hello @jesseguttenberg
Thank you for getting in touch with us!
As you said that the checkout section refreshes and the bump order is stilled displayed.
So, in that case, I was saying that you have to use the CSS, that means use the CSS to hide or show the bump order depending on your JS conditions.
Below is the code which I have modified which is working at our end and you can try it at your end as well. You just need to incorporate it into your conditions.
function add_xx_head(){ $script_code = " <style> body.hide_order_bump .wcf-bump-order-wrap{ display:none; } body.show_order_bump .wcf-bump-order-wrap{ display:block; } </style> <script> jQuery( document ).ready(function($) { let your_condition = true; if( your_condition ){ $('body').addClass('hide_order_bump'); }else{ $('body').addClass('show_order_bump'); } }); </script> "; echo $script_code; } add_action( 'wp_head', 'add_xx_head' );
I hope this helps you.
Feel free to get in touch in case you need more assistance.
- The topic ‘Problems with Javascript on Cartflows checkout page?’ is closed to new replies.