Question

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

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

如果从购物车小部件中删除了商品，它们就会消失。我想拥有的是：

用户点击删除链接
将要去除的产品逐渐淡出
如果购物车小部件中还有更多项目，则这些项目将向上移动（使用过渡）。
如果购物车中没有其他物品，则“您的购物车为空”消息应慢慢消失。
总数量应消失并以新价格再次消失

我正在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用于删除产品的功能？

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

WooCommerce-购物车小工具-删除时淡出项目

0 个答案: