skip to Main Content

I have added a removal link to the checkout for each product. This part works fine. Problem is; upon removal, the page is "scrolled to top".

I would like to change this by adding AJAX to the removal process. I’ve tried, but without success. In other words; when clicking on the removal link, the refresh should happen in the background and the customer stays on the same section.

This is the code I am working with:

add_filter( 'woocommerce_checkout_cart_item_quantity', 'link_to_remove_item_from_checkout', 20, 3 );
function link_to_remove_item_from_checkout( $quantity_html, $cart_item, $cart_item_key ) {

    $remove_item = apply_filters( 'woocommerce_cart_item_remove_link', sprintf (
    '<a style="text-decoration:underline" href="%s" rel="nofollow" title="Remove from Order" class="remove-product-from-checkout">Remove</a>',
    esc_url(wc_get_cart_remove_url($cart_item_key)),
    __('Remove from Order', 'woocommerce'),
    esc_attr($cart_item['product_id']),
    esc_attr($cart_item['data']->get_sku())
    ), $cart_item_key);

    return '<br><strong class="product-quantity">' . sprintf('<b>Qty:</b> %s', $cart_item['quantity']) . '</strong> '.$remove_item.'<br clear="all">';
}


add_action('wp_ajax_woo_get_ajax_data', 'remove_product_from_checkout');
add_action('wp_ajax_nopriv_woo_get_ajax_data', 'remove_product_from_checkout');
function remove_product_from_checkout() {

    if ( isset( $_POST['$remove_item']) ) {

        $remove_product = sanitize_key( $_POST['$remove_item']);

        WC()->session->set('product_id', $remove_product);

    echo json_encode($remove_item);
}
    die();
}

This is the script which I am not sure how to modify to make this work with a link.

add_action('wp_footer', 'script_for_removing_product_on_checkout', 10, 0);
function script_for_removing_product_on_checkout(){
if (!is_checkout()) return;
?>
<script type="text/javascript">
jQuery( function($){
$('form.checkout').on('change', 'remove_product', function(e){
e.preventDefault();
var p = $(this).val();
$.ajax({
type: 'POST',
url: wc_checkout_params.ajax_url,
data:{
'action': 'woo_get_ajax_data',
'packing': p,
},
success: function (result){
$('body').trigger('update_checkout');
},
error: function(error){
}
});
});
});
</script>
<?php
}

2

Answers


  1. Your code contains some mistakes.

    To remove a product (item) from checkout using AJAX, you can use:

    // Concatenate remove link after item qty
    function filter_woocommerce_checkout_cart_item_quantity( $item_qty, $cart_item, $cart_item_key ) {
        $remove_link = apply_filters('woocommerce_cart_item_remove_link',
        sprintf(
            '<a href="#" class="remove" aria-label="%s" data-product_id="%s" data-product_sku="%s" data-cart_item_key="%s">&times;</a>',
            __( 'Remove this item', 'woocommerce' ),
            esc_attr( $cart_item['product_id'] ),
            esc_attr( $cart_item['data']->get_sku() ),
            esc_attr( $cart_item_key )
        ),
        $cart_item_key );
    
        // Return
        return $item_qty . $remove_link;
    }
    add_filter( 'woocommerce_checkout_cart_item_quantity', 'filter_woocommerce_checkout_cart_item_quantity', 10, 3 );
    
    // jQuery - Ajax script
    function action_wp_footer() {
        // Only checkout page
        if ( ! is_checkout() )
            return;
        ?>
        <script type="text/javascript">
        jQuery( function($) {
            $( 'form.checkout' ).on( 'click', '.cart_item a.remove', function( e ) {
                e.preventDefault();
                
                var cart_item_key = $( this ).attr( "data-cart_item_key" );
                
                $.ajax({
                    type: 'POST',
                    url: wc_checkout_params.ajax_url,
                    data: {
                        'action': 'woo_product_remove',
                        'cart_item_key': cart_item_key,
                    },
                    success: function ( result ) {
                        $( 'body' ).trigger( 'update_checkout' );
                        //console.log( 'response: ' + result );
                    },
                    error: function( error ) {
                        //console.log( error );
                    }
                });
            });
        });
        </script>
        <?php
    
    }
    add_action( 'wp_footer', 'action_wp_footer', 10, 0 );
    
    // Php Ajax
    function woo_product_remove() { 
        if ( isset( $_POST['cart_item_key'] ) ) {
            $cart_item_key = sanitize_key( $_POST['cart_item_key'] );
            
            // Remove cart item
            WC()->cart->remove_cart_item( $cart_item_key );
        }
        
        // Alway at the end (to avoid server error 500)
        die();
    }
    add_action( 'wp_ajax_woo_product_remove', 'woo_product_remove' );
    add_action( 'wp_ajax_nopriv_woo_product_remove', 'woo_product_remove' );
    
    Login or Signup to reply.
  2. Try this?

        function lp_woocommerce_checkout_remove_item( $product_name, $cart_item, $cart_item_key ) {
        if ( is_checkout() || is_cart() ) {
            $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
            $product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key );
    
            $remove_link = apply_filters( 'woocommerce_cart_item_remove_link', sprintf(
                '<a href="%s" class="remove" aria-label="%s" data-product_id="%s" data-product_sku="%s">×</a>',
                esc_url( WC()->cart->wc_get_cart_remove_url( $cart_item_key ) ),
                __( 'Remove this item', 'woocommerce' ),
                esc_attr( $product_id ),
                esc_attr( $_product->get_sku() )
            ), $cart_item_key );
    
            return '<span>' . $remove_link . '</span> <span>' . $product_name . '</span>';
        }
    
        return $product_name;
    }
    add_filter( 'woocommerce_cart_item_name', 'lp_woocommerce_checkout_remove_item', 10, 3 );
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search