简体   繁体   中英

How can I run a jQuery function after an ajax event of Woocommerce

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;
}

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();
       });
    });
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM