javascript - WooCommerce - 购物车小部件 - 删除时淡出项目

Question

我第一次在一个项目中使用 WooCommerce。我刚刚开始学习 JS，之前从未使用过 AJAX……

现在我的标题中有一个购物车小部件，如果我删除或添加项目，它会更新总数等。我正在使用<?php woocommerce_mini_cart() ?>这个。

如果物品从购物车小部件中删除，它们就会消失。我想要的是这样的：

1. 用户点击删除链接
2. 将被移除的产品会慢慢淡出
3. 如果购物车小部件中有更多商品，则这些商品会向上移动（使用过渡）。
4. 如果购物车中没有更多商品，“您的购物车是空的”消息应该会慢慢淡出。
5. 总计数应淡出并以新价格再次淡入

我在我的 mini-cart.php 中使用 WooCommerce 的 woocommerce_cart_item_remove_link，但更改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);
}

发生了什么：小计金额淡入淡出，但缺少更新金额的功能。sidecart-item-id-* 的 div 淡出并被移除。好吧，它并没有真正被删除。如果我刷新网站。产品又回到了购物车中。cart_item_key错了吗？我在哪里可以找到 WooCommerce 用于删除产品的功能？

有人可以给我一个关于如何实现这一目标的提示。提前致谢。

标签： javascriptjqueryajaxwordpresswoocommerce