I have searched and searched on the forum but no right code to do the following job. The code below auto updates changes in quantity on the shopping cart. Yet, it is not working on the Off canvas flyout cart. See
How do I change the code so that it also works on that cart?
add_action( 'wp_footer', 'ava_cart_refresh_update_qty', 9999 );
function ava_cart_refresh_update_qty() {
if (is_cart()) {
?>
<script type="text/javascript">
(function($) {
var triggerUpdate = function() {
$('.woocommerce-cart-form .quantity').on('click', '.qty, .plus, .minus', function(){
console.log('test');
$("button[name='update_cart']").trigger("click");
});
}
triggerUpdate();
$(document).ajaxComplete(function() {
triggerUpdate();
});
})(jQuery);
</script>
<?php
}
}
Related
In my online store, there are two standard shipping methods - Flat Rate and Free Delivery. I added a plugin for distance delivery.
Thus, when a customer fills in the City and Address fields when placing an order, new shipping methods must be added. But new deliveries are not visible until I select Flat Rate or Free Delivery.
As I understand it, I do not have automatic updating of shipping methods depending on the filling of the fields.
I found and edited this code:
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout() {
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery( document ).ready(function( $ ) {
$('#billing_address_1').click(function(){
jQuery('body').trigger('update_checkout', { update_shipping_method: true });
});
});
</script>
<?php
}
}
But until I click on the filled field a second time, the delivery method is not updated.
I want to connect with AJAX. How can I edit the code so that the result of using AJAX is visible immediately without clicking on the filled field again?
Currently you have to click on the billing_address_1 field in order to trigger the event listener and update your fields, because your code says so!
There are multiple ways to solve the issue. For example, instead of listening for a click event, you could add a different event listener.
To start off, you could listen for an on change event. This will happen when the value of the address field has been changed and the user clicked/tabbed out of the billing_address_1 field:
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout()
{
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery(document).ready($ => {
$('#billing_address_1').on('change', () => {
$('body').trigger('update_checkout', {
update_shipping_method: true
});
});
});
</script>
<?php
}
}
Another event listener you could use here is input event listener. This will happen every time the value of billing_address_1 field is being changed. This will fire off even with a press of the space key, backspace key etc.
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout()
{
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery(document).ready($ => {
$('#billing_address_1').on('input', () => {
$('body').trigger('update_checkout', {
update_shipping_method: true
});
});
});
</script>
<?php
}
}
Another event that could be helpful here is on blur event. This event will fire off when the user clicks/tabs out of the billing_address_1 field. The difference between this event and on change event is that when you listen for this event, update will happen even when the value of the billing_address_1 field has not been changed.
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout()
{
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery(document).ready($ => {
$('#billing_address_1').on('blur', () => {
$('body').trigger('update_checkout', {
update_shipping_method: true
});
});
});
</script>
<?php
}
}
Now depending on how you'd like to structure your code and the logic behind it, you could use these events at the same time:
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout()
{
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery(document).ready($ => {
$('#billing_address_1').on('change input blur', () => {
$('body').trigger('update_checkout', {
update_shipping_method: true
});
});
});
</script>
<?php
}
}
How can I edit the code so that the result of using AJAX is visible immediately without clicking on the filled field again?
I think the last solution is what you're looking for! Using all of those event listeners together will make sure that your shipping method is getting updated constantly.
The header is designed using "Elementor - Header, Footer & Blocks" plugin. The dropdown is not working. Tried activating, deactivating plugin, clearing cache.
Website Link:
https://www.party-monsters.com/
Try this below code. code goes in your active theme functions.php file.
function add_custom_js(){
?>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('.hfe-has-submenu .hfe-menu-item').on('click',function(e){
e.preventDefault();
if( $(this).closest('li').find('.sub-menu').css('opacity') === '0' ){
$(this).closest('li').find('.sub-menu').css({"visibility": "visible", "opacity": "1"});
}else{
$(this).closest('li').find('.sub-menu').css({"visibility": "hidden", "opacity": "0"});
}
});
});
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'add_custom_js', 10, 1 );
Tested and works.
I'm trying to get woocommerce cart content in ajax callback function but it returns empty.
I've also tried using global $woocommerce variable that also returns the same result. I'm trying to get the cart content and convert all product to autoship feature. I'm using wooautoship plugin for that. however, main query is, how to get the cart details in ajax callback.
My Code is as follow:
add_action('wp_footer', 'woo_cart_autoship_js', 99);
function woo_cart_autoship_js(){
?>
<script type="text/javascript">
(function($){
$(document).on('click', '#convert-to-autoship', function(e){
e.preventDefault();
$.post( "<?php echo admin_url('admin-ajax.php'); ?>", { action: "convert-to-autoship" })
.done(function( data ) {
alert( "Data Loaded: " + data );
});
});
})(jQuery);
</script>
<?php
}
add_action( 'wp_ajax_convert-to-autoship', 'convert_to_autoship', 99 );
add_action( 'wp_ajax_nopriv_convert-to-autoship', 'convert_to_autoship', 99 );
function convert_to_autoship(){
print_r(WC()->cart->get_cart());
wp_die();
}
This question already has answers here:
Run javascript code after ajax add to cart event in Woocommerce
(1 answer)
JS alert on ajax add to cart for specific product category count in Woocommerce
(1 answer)
Closed 4 years ago.
Every time a product is added to the basket by ajax and the mini cart is refreshed I need to be able to run some jQuery. I can't just simply create an even for add to cart because, I run some jQuery that checks if the mini cart has products inside it, but the add to cart even runs before the mini cart has added the products. This means that my if statement becomes false.
What can I do about this apart from creating a timeout in jQuery?
Here is the code I have modified from the current answers;
add_action( 'wp_footer', 'ajax_add_tocart_event' );
function ajax_add_tocart_event() {
?>
<script type="text/javascript">
jQuery( 'body' ).on( 'added_to_cart', function() {
if( $('#mini_wrap .cart_list').length ){
alert('hi');
}
} );
</script>
<?php
}
You can do using following code.
add_action( 'wp_footer', 'ajax_add_tocart_event' );
function ajax_add_tocart_event() {
?>
<script type="text/javascript">
jQuery( 'body' ).on( 'added_to_cart', function( e, fragments, cart_hash, this_button ) {
alert('product added to cart');
} );
</script>
<?php
} ?>
Put this code in functions.php file.
add_action( 'wp_footer', 'trigger_for_ajax_add_to_cart' );
function trigger_for_ajax_add_to_cart() {
?>
<script type="text/javascript">
(function($){
$('body').on( 'added_to_cart', function(){
//do some code
});
})(jQuery);
</script>
<?php
} ?>
I want to auto update the cart when quantity is changed. I got this working code in functions.php, but it's only working for the first click. How to adjust it so it's working for every click?
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery('div.woocommerce').on('click', '.quantity .button', function(){
jQuery("[name='update_cart']").trigger("click"); });
</script>
<?php
endif;
}
try it like this..
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery( 'div.woocommerce' ).on( 'change', '.qty', function () {
jQuery( "[name='update_cart']" ).trigger( "click" );
} );
</script>
<?php
endif;
}
I it's because the html is being replaced, div.woocommerce click event is no longer there... if you attached it to body, it might work...
The reason that is happening is because your dom is refreshed with the Ajax and events are flushed.
What you need to do is listen to the event 'updated_cart_totals' which will tell you that dom is updated and after that reactivate your listeners.
function quantity_upd() {
$(".woocommerce-cart-form").on("change", ".qty", function() {
$("[name='update_cart']").removeAttr('disabled');
$("[name='update_cart']").trigger("click");
});
}
$( document ).on( 'updated_cart_totals', function() {
quantity_upd();
}
Please adjust it for your theme and HTML, it can vary
The reason it only works on the first click is because everytime you update the form, it refreshes itself. So instead of doing:
jQuery('div.woocommerce').on('click', '.quantity .button', function() {
You need to switch div.woocommerce to document:
jQuery('document').on('click', '.quantity .button', function() {
You can use plugin like below.
https://wordpress.org/plugins/woo-update-cart-on-quantity-change/
Also this plugin is working for you.
https://wordpress.org/plugins/woocommerce-ajax-cart/
Please use plugin for your safe side because plugin works in every wordpress version and woocommerce version.
OR
You can try custom code with minor modifications like below.
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script type="text/javascript">
jQuery(document).on("click", "div.woocommerce .quantity .button", function(e) {
jQuery("[name='update_cart']").trigger("click");
});
OR
jQuery("body").on("click", "div.woocommerce .quantity .button", function(e) {
jQuery("[name='update_cart']").trigger("click");
});
</script>
<?php
endif;
}
As I don't know your HTML structure so I built a sample jQuery which is working on storefront theme.
Here is a sample code.
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery('div.woocommerce').on('keyup', '.quantity .qty', function(){
//console.log('clicked');
jQuery("[name='update_cart']").trigger("click"); });
</script>
<?php
endif;
}
Rather than try to trigger the click, how about removing the "disabled" attribute from the Update Cart button so the user can click it. The cart page already works this way where when the quantity is changed on an item, the Update Cart button becomes clickable.
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery('body').on('click', 'div.woocommerce .quantity .button', function(){
jQuery("[name='update_cart']").prop("disabled", false);
});
</script>
<?php
endif;
}
The update button is actually disabled when the page loads, so you need basically to enable it, right before triggering the click event.
Use this code:
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery('div.woocommerce').on('change', '.qty', function(){
jQuery("[name='update_cart']").removeAttr('disabled');
jQuery("[name='update_cart']").trigger("click");
});
</script>
<?php
endif;
}
Copy this code to functions:
function bbloomer_cart_refresh_update_qty() {
if (is_cart()) {
?>
<script>
jQuery('div.woocommerce').on('change', '.qty', function(){
jQuery("[name='update_cart']").prop("disabled", false);
jQuery("[name='update_cart']").trigger("click");
});
</script>
<?php
}
}
End this to style:
button[name='update_cart'] {
display: none !important;
}