In my woocommerce-based store, I have combined cart and checkout pages into one, it works well, but there is an issue when I try to remove a coupon. The coupon removes from the cart with AJAX processing, so when removal is complete - the page doesn't reload, and the coupon still displaying as applied (but actually it's removed).
So I need to disable AJAX for applying/removing coupon function.
I tried to add this code into my theme's functions.php:
function disable_checkout_script() {
wp_dequeue_script( 'wc-checkout' );
}
add_action( 'wp_enqueue_scripts', 'disable_checkout_script' );
It solves my problem, but this code disables ALL AJAX at the checkout page, and I would like to disable ajax only for applying/removing coupons and to save another ajax processing like verification for billing/shipping fields.
Please help, unfortunately, I'm not a JS expert.
Regards!
In your JS file you need to remove a couple of event handlers. There's an event fired when pressing the remove coupon button and also when the coupon form is submit.
The relevant lines are 381 - 383 of woocommerce/assets/js/frontend/checkout.js (WooCommerce loads a minified version of this file).
$( document.body ).on( 'click', 'a.showcoupon', this.show_coupon_form );
$( document.body ).on( 'click', '.woocommerce-remove-coupon', this.remove_coupon );
$( 'form.checkout_coupon' ).hide().submit( this.submit );
You need to remove 2 and 3.
Add the following code to your JS file:
$( document.body ).off( 'click', '.woocommerce-remove-coupon', wc_checkout_coupons.remove_coupon );
$( 'form.checkout_coupon' ).off( 'submit' );
For anyone else looking for a solution to disable AJAX and force a refresh of the checkout page and came across this post, here's what I found worked for me without having to edit any core function files within the WooCommerce plugin. Note, however it does not actually disable AJAX, but it successfully refreshes the full checkout page upon removal.
jQuery code: This forces a page refresh 400ms after clicking the remove button to ensure that the AJAX removal command goes through first.
jQuery(document).on('click', '.woocommerce-remove-coupon', function () {
setTimeout(
function () {
window.location.href = window.location.href;
}, 400);
});
Then hook the .js file to the checkout page (add to your theme's functions.php or create a plugin).
I did it this way:
add_action( 'woocommerce_after_checkout_form', 'remove_coupon');
function remove_coupon() {
wp_enqueue_script('remove-coupon', plugins_url('remove-coupon.js', __FILE__));
}
Related
I added ajax to single product page using that way and it (ajax)works, but I still have no reaction on
jQuery(document).ready(function($){
$('body').on( 'added_to_cart', function(){
alert("testing!");
});
});
I want to make popup visible after adding product to cart. The popup is standard - with options go cart link or stay there and close popup. What can be wrong? No reaction on that trigger at all
Try this code:
(function ( $ ) {
$( document ).ready( function () {
$( document.body ).on( 'added_to_cart', function () {
alert( "testing!" );
} );
} );
})( jQuery );
I'm using this as well and on my page it works.
If it don't works, be sure your JS script get's loaded by opening the console and check the sources. You can also add an alert to your ready function as well.
I have a webpage that runs a python script with the command shell_exec. I'd like for a loading spinner, the 'Please wait while this page loads' sort of message, to show while the python script is running, then after it is done for the rest of the echo'd HTML to show.
I found what seems like a good solution at https://stackoverflow.com/a/68503/4630491
but I am so new to ajax that I don't know how to use the solution. I tried doing
<div id="loadingDiv">Please wait while this page loads.</div>
<script>var $loading = $('#loadingDiv').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
</script>
but this did not work. Do I need to call ajax to execute the ajaxStart? How would I call it? Should I wrap the shell_exec in ajax code?
Thanks a bunch.
Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event.
Have a loading gif image like shown below
<div id="loading">
<img src="loading.gif" />
</div>
First hide this loading div(because loading image have to be shown when ajax request is about to sent).
<script>
var $loading = $('#loading').hide();
//Attach the event handler to any element
$(document)
.ajaxStart(function () {
//ajax request went so show the loading image
$loading.show();
})
.ajaxStop(function () {
//got response so hide the loading image
$loading.hide();
});
</script>
For more see at jQuery documentation
Do I need to call ajax to execute the ajaxStart? How would I call it?
Yes when you triggered a ajax request then only ajaxStart will get triggered automatically.
For ajax there are multiple ways with jquery, below I am giving with load function.
$( ".result" ).load( "some_file.py" );
some_file.py output will inserted into div with class name result.
To trigger the load event you can use button click or any other as need.
$( ".trigger" ).click(function() {
$( ".result" ).load( "some_file.py" );
});
I am new to JQM and I'm using Phongeap with JQM for a new project.
My javascript is in one single js file and I'm loading the views from multiple html files.
As the transitions of the siede panel are poor, when I change pages via <a href="page2.html"> I tried to to use event listeners for the Menuitems.
function setPanelListeners(){
$('#menu_search').click(function() {
switchPageTo('search.html');
});
$('#menu_schedule').click(function() {
switchPageTo('program.html');
});
$('#menu_news').click(function() {
switchPageTo('news.html');
});
}
I call this function on the pagebeforeshoe event of each page. To fix the transitions to the way I need it, I use this function
// Close Panel then change page
function switchPageTo(url){
$('#menupanel').panel('close');
setTimeout(function() {
$.mobile.changePage( url, { transition: 'fade'} );
},200);
}
So here is the Problem. It actually works fine on the first page. But on the second page the Menuitems won't work, I guess the event listers are not listening for the new panel, because in the html the panel is loaded twice! And the Event listeners only listen for the first panel (from the first page) which is not displayed on the second page.
Any help is appreciated!
Are you adding panel dynamically on the second page? In JQM 1.3 you have to add panel separately to each page, although this restriction will be removed in future versions.
Use event delegation for dynamic panels:
$(document).on('click' ,'#menu_search' function() {
switchPageTo('search.html')
});
I am using some simple jquery to show view cart button if something has been added to the cart.
if ( $('.cartSummaryItem').text() != 'Shopping cart is empty.' ) {
$('.account').fadeIn(1000)
};
If the cart is empty it show this the text "Shopping cart is empty.", if something is added .account will fadeIn. The problem is I need to refresh the page for this to work, is there a way to do this without refreshing the page with ajax or similar?
Thanks
Nik
If the change event doesn't work. Another method is using an Interval.
<script type='text/javascript'>
$(document).ready(function()
{
setInterval(function () {
if ( $('.cartSummaryItem').text() != 'Shopping cart is empty.' ) {
$('.account').fadeIn(1000)
};
}, 10000);
});
</script>
Ofcourse, the interval should be changed to your desired amount. I would only use this if the change doesn't work.. The change event is prefered.
Well, I guess you have two choices
Call the javascript code after the user has changed the contents of the cart
Poll the server for cart changes
If you can, you should probably go for the first choice. Are you in control of the code that changes the contents of the cart?
I have a web application that loads javascript on page load:
$(function() {
$('.modal-delete').click(function() {
alert();
});
});
I have a html page with a series of buttons which alert a blank message box when they're clicked:
<button class="modal-delete btn danger"></button>
which works fine.
However, a have some AJAX calls that generate more buttons just like the ones above but NOT on page load! They can be created at any time. These buttons do not do anything but they're meant to load the alerts. They're identical but because they never existed on page load, the Jquery code doesn't work on these buttons. How do I attach the same code to these buttons too?
Many thanks :).
I think you'll want jQuery's 'live()' function:
$('.modal-delete').live('click', function() {
alert();
});
This binds to the elements which match but also rebinds when new elements are added in the future:
"Attach an event handler for all elements which match the current selector, now and in the future"
Change the ready code to this...
$(function() {
$("document").on("click", ".modal-delete", function() {
alert("click");
});
});