javascript - How can I run a jQuery function after an ajax event of Woocommerce
Get the solution ↓↓↓I am using this filter in functions.php to update count of available items in Woocommerce mini cart:
// Woocommerce Ajax Count
add_filter( 'woocommerce_add_to_cart_fragments', 'wc_refresh_mini_cart_count');
function wc_refresh_mini_cart_count($fragments){
ob_start();
?>
<div class="e434-15 x-bar-content-area sticky-count">
<?php echo WC()->cart->get_cart_contents_count(); ?>
</div>
<?php
$fragments['.sticky-count'] = ob_get_clean();
return $fragments;
}
and used this jQuery in header for converting counter numbers in other formats:
// Convert Numbers to Persian Format
jQuery(document).ready( function(){
var els = document.querySelectorAll('.woocommerce-Price-amount, .mini_cart_item span.quantity, .sticky-count');
els.forEach(function(item) {
item.textContent = persianJs(item.textContent).englishNumber().toString();
});
});
The problem is that above Query doesn't run after ajax added to cart or ajax removed from cart, so I tried this script instead:
// Convert Numbers to Persian Format
jQuery(document).ready( function(){
var els = document.querySelectorAll('.woocommerce-Price-amount, .mini_cart_item span.quantity, .sticky-count');
els.forEach(function(item) {
item.textContent = persianJs(item.textContent).englishNumber().toString();
});
});
// Convert Numbers After Ajax Add or Remove Products
$( document.body ).on( 'added_to_cart removed_from_cart', function(){
var els = document.querySelectorAll('.woocommerce-Price-amount, .mini_cart_item span.quantity, .sticky-count');
els.forEach(function(item) {
item.textContent = persianJs(item.textContent).englishNumber().toString();
});
});
But it does not work too, it seems I am calling jQuery on a wrong way or on a wrong location, could you please guide me about this issue?
Update: I also tried this code in functions.php but I doesn't work too:
add_action('wp_header','custom_jquery_add_to_cart_script');
function custom_jquery_add_to_cart_script(){
if ( is_shop() || is_product_category() || is_product_tag() ): // Only for archives pages
?>
<script type="text/javascript">
$( document.body ).on( 'added_to_cart removed_from_cart', function(){
var els = document.querySelectorAll('.woocommerce-Price-amount, .mini_cart_item span.quantity, .sticky-count');
els.forEach(function(item) {
item.textContent = persianJs(item.textContent).englishNumber().toString();
});
})(jQuery);
</script>
<?php
endif;
}
Answer
Solution:
This script worked for me :
// Convert Numbers After Ajax Add or Remove Products
jQuery(document).ready(function($){
$('body').on( 'added_to_cart removed_from_cart', function(){
var els = document.querySelectorAll('.woocommerce-Price-amount, .mini_cart_item span.quantity, .sticky-count');
els.forEach(function(item) {
item.textContent = persianJs(item.textContent).englishNumber().toString();
});
});
});
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: use the option --with-all-dependencies (-w) to allow upgrades, downgrades and removals for packages currently locked to specific versions.
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.