Обновление / обновление пользовательской мини-корзины с помощью ajax в Woocommerce

Question

Я пытаюсь создать простой интерфейс в Woocommerce, в котором продукт добавляется прямо в мини-корзину рядом с ним с помощью AJAX, а не обновляет страницу каждый раз, когда вы добавляете товар в корзину.К сожалению, я не могу заставить работать AJAX, и страница просто обновляется.

woocommerce.php - страница woocommerce по умолчанию :

<?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 - Основной файл JavaScript :

$('.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' );

Цельчтобы получить функцию woocommerce_mini_cart() для обновления с помощью AJAX.Возможно ли это?

Я подозреваю, что проблема заключается в том, как я кодировал функцию javascript ajax, но я не уверен.Любая помощь будет принята с благодарностью.

ОБНОВЛЕНИЕ: Добавлено добавленное ниже решение Мо, которое остановило перезагрузку страницы, но корзина по-прежнему не обновляется.Вывод некоторого текста внутри функции ajax_update_mini_cart() делает ajax этот текст внутри mini-cart-container div, где должна быть мини-тележка, что доказывает (я думаю), что функция javascript и функция php работают.Я думаю, что по какой-то причине проблема возникает, когда echo wc_get_template( 'cart/mini-cart.php' ); находится внутри функции.Кто-нибудь знает, почему это так?

Answer 1

его следует за href.попробуйте следующее

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