| | | |

How to update your current wishlist count at the header section via AJAX.

Using your Add to Wishlist button with the specific product, after clicking this will automatically add to your wishlist page. See the button mark up below.

<header>
<a href="#>WISH LIST COUNT : <span>0</span></a>
</header>

// Button only without ajax loading GIF
<a href="http://yoursite.com/product/product-2/?add_to_wishlist=218" rel="nofollow" data-product-id="218" data-product-type="simple" class="add_to_wishlist">Add to Wishlist</a>

// Default wishlist button mark up

<div class="yith-wcwl-add-to-wishlist add-to-wishlist-218">
  <div class="yith-wcwl-add-button show" style="display:block"> <a href="/~developm/anthony/product/product-2/?add_to_wishlist=218" rel="nofollow" data-product-id="218" data-product-type="simple" class="add_to_wishlist"> Add to Wishlist</a> <img src="http://yoursite.com//wp-admin/images/wpspin_light.gif" class="ajax-loading" alt="loading" width="16" height="16" style="visibility:hidden"> </div>
  <div class="yith-wcwl-wishlistaddedbrowse hide" style="display:none;"> <span class="feedback">Product added!</span> <a href="http://yoursite.com//shop/view/"> Browse Wishlist </a> </div>
  <div class="yith-wcwl-wishlistexistsbrowse hide" style="display:none"> <span class="feedback">The product is already in the wishlist!</span> <a href="http://yoursite.com//shop/view/"> Browse Wishlist </a> </div>
  <div style="clear:both"></div>
  <div class="yith-wcwl-wishlistaddresponse"></div>
</div>

// JS to be used

jQuery( document ).ready( function($){
    var update_wishlist_count = function() {
        $.ajax({
            beforeSend: function () {

            },
            complete  : function () {

            },
            data      : {
                action: 'update_wishlist_count'
            },
            success   : function (data) {
                $('header a span').html( data );
                //do something
            },

            url: yith_wcwl_l10n.ajax_url
        });
    };

    $('body').on( 'added_to_wishlist removed_from_wishlist', update_wishlist_count );
} );

// code at the end of functions.php file of your theme

function update_wishlist_count(){
    if( function_exists( 'YITH_WCWL' ) ){
        wp_send_json( YITH_WCWL()->count_products() );
    }
}
add_action( 'wp_ajax_update_wishlist_count', 'update_wishlist_count' );
add_action( 'wp_ajax_nopriv_update_wishlist_count', 'update_wishlist_count' );

add_action( 'wp_enqueue_scripts', 'enqueue_custom_wishlist_js' );

Credit to https://wordpress.org/support/topic/get-total-wishlist-via-ajax?replies=2#post-6886464

Similar Posts

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *