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
}
}
Hi,
i have a site that displays various projects as posts, each project has its own pdf file, uploaded via a file custom field for that post.
For the moment there's just a dynamic button as you can see in this example:
https://www.stefanomengoli.it/sm21/progetti/vivere-nelle-nuvole-progetto-di-bioarchitettura-per-un-loft-casa-sullalbero/
What i need is the user to be able to download or be redirected to the correct file after CF7 submission based on the project he/she is on.
I tried this code and it works with a specific url, but what i need is to put an acf url that dynamically shows the correct file as I said based on the project the visitor is on.
add_action( 'wp_footer', 'example_download' );
function example_download() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '946' == event.detail.contactFormId ) {
window.open('https://www.example.com/wp-content/uploads/2021/05/my-document.php',
'_self');
}
}, false );
</script>
<?php
}
You just need to echo the custom field in the window.open
This should work. Just replace your_field with your ACF field name
add_action( 'wp_footer', 'example_download' );
function example_download() {
global $post;
?>
<script type="text/javascript">
document.addEventListener('wpcf7mailsent', function (event) {
if ('946' == event.detail.contactFormId) {
window.open('<?php the_field('your_field', $post->ID);?>',
'_self');
}
}, false);
</script>
<?php
}
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;
}
I have this script:
$(document).ready(function(){
$("text1").click(function(){
$(this).hide();
});
});
Code html:
<div class="div1">
<p class="text1">text to appear when the user puts the mouse over</p>
</div>
I want to apply this script to my website in Wordpress.
I put this code in functions.php
add_action( 'wp_enqueue_scripts', 'script_echipa' );
function script_echipa()
{ wp_enqueue_script( 'script', get_template_directory_uri() . '/js/echipa.js', array('jquery'), null, true );
}
It is a very simple script that works smoothly on local Wordpress but we did not implement it.
Is something wrong?
Can you help me to solve this problem?
Thanks in advance!
You forgot to add a . before the selector for class text1 --> "text1"
$(document).ready(function(){
$(".text1").click(function(){
$(this).hide();
});
});
WordPress uses noconflict so you have to wrap your scripts in jQuery(function($) {}); in order to be able to use the dollar sign. Like so:
jQuery(function($) {
$(".text1").click(function() {
$(this).hide();
});
});