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');
    }
});
0

i think there is mistake in the closing in your js there is } extrra so it is not working it should be }); } }); }); });

although this tested and working

   jQuery( function($){
    if (typeof woocommerce_params === 'undefined')
        return false;

    console.log('defined');

  $(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 (result) {
                $('body').trigger('update_checkout');
                console.log(result);
        }
    });
});
});
2
  • Please add some note about why your code will work and what was the issue in actual code. Jun 6 '20 at 17:16
  • sorry my bad my english is not too good i edited my answer
    – osama
    Jun 14 '20 at 0:32

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.