首页 > 解决方案 > Woocommerce 中的自定义删除购物车项目功能

问题描述

我设置了添加项目功能,如下所示:

                <div class="col s4">
                    <a class="addtocart_link" href="<?php echo esc_url( $product->add_to_cart_url() ); ?>" title="<?php echo esc_attr( $product->add_to_cart_text() ); ?>">
                        <span class="action_box fa fa-plus"></span>
                    </a>
                </div>

是否有类似或其他方式来创建删除项目功能?

标签: phpwordpresswoocommercecarthook-woocommerce

解决方案


是的,wc_get_cart_remove_url但您需要获取购物车项目密钥才能使用以下内容:

<?php
$cart_item_key = WC()->cart->generate_cart_id( $product->get_ID() );
$in_cart       = WC()->cart->find_product_in_cart( $cart_item_key );
if ( $in_cart ) {
    $cart_item_remove_url = wc_get_cart_remove_url( $cart_item_key );
    ?>
    <div class="col s4">
        <a class="remove_from_cart" href="<?php echo esc_url( $cart_item_remove_url ); ?>" title="remove_from_cart ">
            <span class=" action_box fa fa-minus "></span></a>
            </div>
    <?php

}

当然,上面的代码只适用于简单的产品,它会从购物车中删除所有物品。

如果您想一次减少购物车中的一项,您需要使用不同的方法,如下所示:

首先:让我们添加我们的删除链接和 add_to_cart 以及一些属性,如数量和产品 ID,以便使用我们的脚本处理数据。

add_action( 'woocommerce_after_add_to_cart_button', 'remove_product' );

function remove_product() {
    global $product;

    $cart_item_key        = WC()->cart->generate_cart_id( $product->get_ID() );
    $in_cart              = WC()->cart->find_product_in_cart( $cart_item_key );
    $cart_item_remove_url = wc_get_cart_remove_url( $cart_item_key );

?>

<div class="col s4">
<a class="addtocart_link"
id ="add_to_cart" 
title="add_to_cart" 
data-product-id="<?php echo $product->get_ID(); ?>"
data-cart-item-key="<?php echo $cart_item_key; ?>">
<span class="action_box fa fa-plus"></span></a>
            </div>
<?php
    if ( $in_cart ) {
        $quantities = WC()->cart->get_cart_item_quantities();
        foreach ( $quantities as $key => $quantity ) {
            if ( $product->get_ID() == $key ) {
                if ( $quantity > 1 ) {
                    ?>
                    <div class="col s4">
                    <a id="remove_one_item" class="remove_from_cart" href="#" 
                    data-product-id="<?php echo $product->get_ID(); ?>"
                    data-in-cart-qty="<?php echo  $quantity; ?>"
                    data-cart-item-key="<?php echo $cart_item_key; ?>"
                    title="remove_from_cart ">
                        <span class=" action_box fa fa-minus "></span></a>
                    </div>
                    <?php
                    return;
                }
            }
        }
        ?>
        <div class="col s4">
        <a class="remove_from_cart" href="<?php echo esc_url( $cart_item_remove_url ); ?>" title="remove_from_cart ">
        <span class=" action_box fa fa-minus "></span></a>

        <?php
    }

}

现在让我们需要将我们的脚本添加到 Wordpress 页脚,或者您可以将其添加到您的 Javascript 文件中

add_action( 'wp_footer', 'change_qty_script' );

function change_qty_script() {
    ?>
    <script>
    jQuery(document).ready(function ($) {
    $('#remove_one_item').click(function () {

        var current_qty = parseInt($(this).attr('data-in-cart-qty'));
        var id = $(this).attr('data-product-id');
        var cat_item_key = $(this).attr('data-cart-item-key');
        var data = {
            product_id: id,
            quantity: current_qty - 1,
            cat_item_key : cat_item_key
        };
        var url = wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'update_qty');
        $.post(url, data, function (response) {
            if (!response) {
                return;
            }
            if (response) {
                location.reload();
            }
        });
    });
    $('#add_to_cart').click(function () {

        var id = $(this).attr('data-product-id');
        var cat_item_key = $(this).attr('data-cart-item-key');
        var data = {
            product_id: id,
            quantity: 1,
        };
        var url = wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart');
        $.post(url, data, function (response) {
            if (!response) {
                return;
            }
            if (response) {
                location.reload();
            }
        });
    });

    });
    </script>
    <?php

}

最后我们需要处理用户点击删除链接时的数据

add_action( 'wc_ajax_update_qty', 'update_qty' );

function update_qty() {
    ob_start();
    $product_id   = absint( $_POST['product_id'] );
    $product      = wc_get_product( $product_id );
    $quantity     = $_POST['quantity'];
    $cat_item_key = $_POST['cat_item_key'];

    WC()->cart->set_quantity( $cat_item_key, $quantity, true );

    wp_send_json( 'done' );
}

将上面的代码放入您的代码中functions.php,您就可以开始了。

上面的所有代码都已经过蜜蜂测试,并且工作正常。


推荐阅读