WooCommerce - Виджет корзины - исчезнуть при удалении

Question

Я впервые использую WooCommerce в проекте.Я только начинаю изучать JS и никогда раньше не использовал AJAX…

Сейчас у меня в шапке виджет корзины, который обновляет общее количество и т. Д., Если я удаляю или добавляю элементы.Я использую <?php woocommerce_mini_cart() ?> для этого.

Если элементы удалены из виджета корзины, они просто исчезают.Я хотел бы иметь следующее:

1. Пользователь нажимает на ссылку удаления
2. Продукт, который будет удален, постепенно исчезает
3. Если есть еще элементыв виджете корзины эти элементы перемещаются (используя переходы) вверх.
4. Если в корзине больше нет товаров, сообщение «Ваша корзина пуста» должно медленно исчезать.
5. Общее количество должно исчезнуть и снова исчезнуть с новой ценой

Я использую ссылку woocommerce_cart_item_remove_link из WooCommerce в моем mini-cart.php, но изменил class="remove remove_from_cart_button", чтобы добавить свой собственный скрипт.

<?php
echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf(
    '<a href="%s" class="sidecart-item-remove" aria-label="%s" data-product_id="%s" data-cart_item_key="%s" data-product_sku="%s">Aus dem Warenkorb entfernen</a>',
    esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
    __( 'Remove this item', 'woocommerce' ),
    esc_attr( $product_id ),
    esc_attr( $cart_item_key ),
    esc_attr( $_product->get_sku() )
), $cart_item_key );
?>

Мои продукты в мини-корзинеобернуты в это:

<div id="sidecart-item-id-<?php echo esc_attr( $cart_item_key ); ?>" class="sidecart-item sidecart-item-<?php echo esc_attr( $product_id ); ?>" product-id="<?php echo esc_attr( $product_id ); ?>">
<div class="sidecart-item-wrapper sidecart-item-wrapper-<?php echo esc_attr( $cart_item_key ); ?>" data-cart_item_key="<?php echo esc_attr( $cart_item_key ); ?>">

То, что я сделал до сих пор:

/** 
 * Item removed from sidecart
 */

$(document).on( 'click', '.sidecart-item-remove', function(e) {

    $.fade_out_subtotal();
    e.preventDefault();

    var cart_item_key = $(this).attr( 'data-cart_item_key' );


        setTimeout(function(){
            // Need a (AJAX?) function here to remove product
            $('#sidecart-item-id-'+cart_item_key).fadeOut(1000);
            $.fade_in_subtotal();
        },500);

    console.log('Item removed from sidecart');

});


/**
 * Fade in/out subtotal in sidecart
 */

$.fade_out_subtotal = function(){

    $('.sidecart-subtotal-amount').fadeOut(1000);
}
$.fade_in_subtotal = function(){

    setTimeout(function(){
        $('.sidecart-subtotal-amount').fadeIn(1000);
    },1000);
}

Что происходит: сумма промежуточного итога постепенно исчезает, но отсутствует функция для обновленияколичество.Div для sidecart-item-id- * исчезает и удаляется.Ну, это не совсем удалено.Если я обновлю сайт.Товары вернулись в корзину.cart_item_key не так?Где я могу найти функцию, которую использует WooCommerce для удаления продуктов?

Может кто-нибудь подсказать, как этого добиться.Заранее спасибо.