WooCommerce Mini cart With Ajax

WooCommerce Mini cart


//MINI CART SECTION


  <div class="productdiv rightcart">
                           
                            <?php if ( ! WC()->cart->is_empty() ) : ?>

    <ul class="woocommerce-mini-cart cart_list product_list_widget <?php echo esc_attr( $args['list_class'] ); ?>">
        <?php
            do_action( 'woocommerce_before_mini_cart_contents' );
            foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
                $_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 );
                if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_widget_cart_item_visible', true, $cart_item, $cart_item_key ) ) {
                    $product_name      = apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key );
                    $product_name      =  explode("–",$product_name);
                    $product_name      =  $product_name[0];
                    $thumbnail         = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );
                    $product_price     = apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key );
                    $product_permalink = apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key );
                    ?>
                    <li id="<?php echo $cart_item_key; ?>" class="woocommerce-mini-cart-item <?php echo esc_attr( apply_filters( 'woocommerce_mini_cart_item_class', 'mini_cart_item', $cart_item, $cart_item_key ) ); ?>">
                        <?php
                        /*
                        echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf(
                            '<a href="%s" class="remove remove_from_cart_button" aria-label="%s" data-product_id="%s" data-cart_item_key="%s" data-product_sku="%s">&times;</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 );
                        */
                        ?>
                       
                        <a href="javascript:;" class="remove remove_from_cart_button" onclick="del_pro('<?php echo $cart_item_key; ?>');" >×</a>
                        <?php if ( empty( $product_permalink ) ) : ?>
                            <?php echo $thumbnail . $product_name . '&nbsp;'; ?>
                        <?php else : ?>
                            <a href="<?php echo esc_url( $product_permalink ); ?>">
                                <?php echo $thumbnail . $product_name . '&nbsp;'; ?>
                            </a>
                        <?php endif;
                   
               
                ?>
                       
                        <?php echo wc_get_formatted_cart_item_data( $cart_item ); ?>
                       
<div class="sp-quantity">
    <div class="sp-minus fff"> <a class="ddd" href="#">-</a>
    </div>
    <div class="sp-input">
        <input type='text' value="<?php echo $cart_item['quantity']; ?>" name="qty[]"  product_price="<?php echo $_product->get_price(); ?>"  key="<?php echo $cart_item_key; ?>" class="qtyval quntity-input">
    </div>
    <div class="sp-plus fff"> <a class="ddd" href="#">+</a>
    </div>
</div>

<span class="priceintable"><span class="woocommerce-Price-currencySymbol">₹</span> <?php echo number_format((float)$cart_item['quantity']*$_product->get_price(), 2, '.', '');  ?></span>
<?php //echo apply_filters( 'woocommerce_widget_cart_item_quantity', '<span class="quantity">' . sprintf( '%s &times; %s', $cart_item['quantity'], $product_price ) . '</span>', $cart_item, $cart_item_key ); ?>

                    </li>
                    <?php
                }
            }
            do_action( 'woocommerce_mini_cart_contents' );
        ?>
    </ul>
    </div>
   





Add below code in footer.php
<script type="text/javascript">


jQuery(".qtyval").bind('change keyup mouseup paste', function () {

    var qty = jQuery(this).val();   
       var key = jQuery(this).attr( "key" );
      
        var product_price = jQuery(this).attr( "product_price" );
       
       jQuery('.quantity'+ key).html(qty);
      
    if(qty == 0){
   
        jQuery('#'+ key).hide();
       
    }
    var tot = product_price*qty;
    jQuery('#'+ key + ' .priceintable').html('<span class="woocommerce-Price-currencySymbol">$</span> '+ parseFloat(tot).toFixed(2));
  
   
  
     if (ajaxRequest) { // if any previous ajaxRequest is running, abort
      ajaxRequest.abort();
    }
   
   
  var   ajaxRequest =  jQuery.ajax({
           type: "POST",
          url: '<?php echo  get_site_url(); ?>/wp-content/themes/THEMENAME/action.php',
           data: {pageajax:true,qty:qty,key:key},
           success: function(data)
           {
              
            var result = data.split('::');
         jQuery('span.shopping_bag_items_number').html(result[0]);
//    alert(result[1]);
        console.log(result[1]);
          jQuery('.rightcart .total span.woocommerce-Price-amount.amount').html(result[1]);
           }
         });

});

 jQuery(".ddd").on("click", function () {

    var $button = jQuery(this);
    var oldValue = $button.closest('.sp-quantity').find("input.quntity-input").val();

    if ($button.text() == "+") {
        var newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 0) {
            var newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 0;
        }
    }

    $button.closest('.sp-quantity').find("input.quntity-input").val(newVal);
    $button.closest('.sp-quantity').find("input.quntity-input").change();

});

function del_pro(x){

    jQuery("#"+ x +" input.quntity-input").val(0);
    jQuery("#"+ x +" input.quntity-input").change();
}

</script>



Add  new file in the theme action.php

<?php
include_once("../../../wp-load.php");
global $wpdb;
extract($_POST);
if($qty == 0)
WC()->cart->remove_cart_item($key);
else
WC()->cart->set_quantity($key, $qty);


echo  WC()->cart->get_cart_contents_count()."::".WC()->cart->get_cart_subtotal();
?>