0

I have added remove button for products in the checkout page.

The code -

function add_delete( $product_title, $cart_item, $cart_item_key ) {

    if (  is_checkout() ) {
        /* Get Cart of the user */
        $cart     = WC()->cart->get_cart();
        foreach ( $cart as $cart_key => $cart_value ){
           if ( $cart_key == $cart_item_key ){
                $product_id = $cart_item['product_id'];
                $_product   = $cart_item['data'] ;

                /*Add delete icon */
                $return_value = sprintf(
                  '<a href="%s" class="remove" title="%s" data-product_id="%s" data-product_sku="%s" data-cart_item_key="%s">&times;</a>',
                  esc_url( WC()->cart->get_remove_url( $cart_key ) ),
                  __( 'Remove this item', 'woocommerce' ),
                  esc_attr( $product_id ),
                  esc_attr( $_product->get_sku() ),
                  esc_attr( $cart_item_key )
                );

                /* Add product name */
                $return_value .= '&nbsp; <span class = "product_name" >' . $product_title . '</span>' ;

                return $return_value;
            }
        }
    }else{

        $_product   = $cart_item['data'] ;
        $product_permalink = $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '';
        if ( ! $product_permalink ) {
            $return_value = $_product->get_title() . '&nbsp;';
        } else {
            $return_value = sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $_product->get_title());
        }
        return $return_value;
    }

}
add_filter ('woocommerce_cart_item_name', 'add_delete' , 10, 3 );

It is working just fine. But it refreshes the whole page to remove a product, unlike cart page.

Cart page uses ajax to remove the product. And I am trying to do the same thing here. But, the problem is that I don't know much about Ajax.

Here is what I tried.

The JavaScript

jQuery(document).ready(function($){

$(document).on('click', 'tr.cart_item a.remove', function (e)
{
    e.preventDefault();

    var product_id = $(this).attr("data-product_id"),
        cart_item_key = $(this).attr("data-cart_item_key"),
        product_container = $(this).parents('.shop_table');

    // Add loader
    product_container.block({
        message: null,
        overlayCSS: {
            cursor: 'none'
        }
    });

    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: wc_checkout_params.ajax_url,
        data: {
            action: "product_remove",
            product_id: product_id,
            cart_item_key: cart_item_key
        },
        success: function(response) {
            if ( ! response || response.error )
                return;

            var fragments = response.fragments;

            // Replace fragments
            if ( fragments ) {
                $.each( fragments, function( key, value ) {
                    $( key ).replaceWith( value );
                });
            }
        }
    });
});

});

And the PHP

function warp_ajax_product_remove()
{
    // Get order review fragment
    ob_start();
    foreach (WC()->cart->get_cart() as $cart_item_key => $cart_item)
    {
        if($cart_item['product_id'] == $_POST['product_id'] && $cart_item_key == $_POST['cart_item_key'] )
        {
            WC()->cart->remove_cart_item($cart_item_key);
        }
    }

    WC()->cart->calculate_totals();
    WC()->cart->maybe_set_cart_cookies();

    woocommerce_order_review();
    $woocommerce_order_review = ob_get_clean();
}

add_action( 'wp_ajax_product_remove', 'warp_ajax_product_remove' );
add_action( 'wp_ajax_nopriv_product_remove', 'warp_ajax_product_remove' );

It removes the product, but the checkout page is not updated.

Can you guys please help me? Thank you

0

Use jQuery('body').trigger('update_checkout'); on your javascript e.g on ajax success/response it will update checkout page with ajax.

$.ajax({
    type: 'POST',
    dataType: 'json',
    url: wc_checkout_params.ajax_url,
    data: {
        action: "product_remove",
        product_id: product_id,
        cart_item_key: cart_item_key
    },
    success: function(response) {
        if ( ! response || response.error )
            return;

        var fragments = response.fragments;

        // Replace fragments
        if ( fragments ) {
            $.each( fragments, function( key, value ) {
                $( key ).replaceWith( value );
            });
        }
        jQuery('body').trigger('update_checkout');
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.