Updating / refreshing custom mini-cart with ajax in Woocommerce

Question

I am trying to build a simple interface in Woocommerce where a product gets added straight to the mini cart next to it with AJAX, rather than having the page refresh every time you add an item to the cart. Unfortunately I cannot get the AJAX to work and the page just keeps refreshing.

woocommerce.php - the default woocommerce page :

<?php

    //LOOP THROUGH ALL PRODUCTS
    $args = array( 'post_type' => 'product');
    $loop = new WP_Query( $args );

    echo "<ul class='mylisting'>";
    while ( $loop->have_posts() ) : $loop->the_post(); 
        global $product;

        $id = $product->get_id();
        $item_name = $product->get_name();

        if( $product->is_type( 'variable' ) ){
            $class = "variable-product";
        } else {
            $class = NULL;
        }

        //OUTPUT PRODUCTS
        ?>

        <li>
            <a class="menu-link <?php echo $class; ?>" data-product_id="<?php echo $id; ?>" href="/wpdev/shop/?add-to-cart=<?php echo $id; ?>"><?php echo $item_name." - ".$id; ?></a>
        </li>

        <?php if( $product->is_type( 'variable' ) ) : ?>

        <div id="product-popup-<?php echo $id; ?>" class="product-popup">
            <div class="popup-inner">
                <?php woocommerce_variable_add_to_cart(); ?>
            </div>
        </div>

        <?php endif; ?>

        <?php
    endwhile; 

    echo "</ul>";

    wp_reset_query(); 

?>

<!-- DISPLAY MINI CART -->
<div id="mini-cart-container">
    <?php woocommerce_mini_cart(); ?>
</div>

main.js - Main javascript file :

$('.menu-link').click(function(){
    jQuery.ajax({
        url : woocommerce_params.ajax_url,
        type : 'post',
        data : {
            'action': 'ajax_update_mini_cart'
        },
        success : function( response ) {
            $('#mini-cart-container').html(response);
        }
    });
});

functions.php

function ajax_update_mini_cart() {
  echo wc_get_template( 'cart/mini-cart.php' );
  die();
}
add_filter( 'wp_ajax_nopriv_ajax_update_mini_cart', 'ajax_update_mini_cart' );
add_filter( 'wp_ajax_ajax_update_mini_cart', 'ajax_update_mini_cart' );

The goal is to get the woocommerce_mini_cart() function to update with ajax. Is this possible?

I suspect the problem lies with the way I have coded the javascript ajax function, but I'm not sure. Any help would be greatly appreciated.

UPDATE: Moe's solution below has now been added, which has stopped the page reloading but the cart still doesn't update. Echoing some text inside the ajax_update_mini_cart() function does ajax that text inside the mini-cart-container div where the mini-cart should be, which proves (I think) that the javascript function and the php function is working. I think for some reason the problem comes when the echo wc_get_template( 'cart/mini-cart.php' ); is placed inside the function. Does anyone know why this is?

Answer 1

its following the href. try the following

$('.menu-link').click(function(e){
 e.preventDefault();
jQuery.ajax({
    url : woocommerce_params.ajax_url,
    type : 'post',
    data : {
        'action': 'ajax_update_mini_cart'
    },
    success : function( response ) {
        $('#mini-cart-container').html(response);
    }
});
});