Magento – Magento 2 Custom remove item from cart button

cart-itemsmagento2PHPquoteitemshopping-cart

I am trying to create a custom button to remove items from the shopping cart.

I've tried the following code <a href="<?php echo $this->getUrl('checkout/cart/delete', array('id' => $this->getProduct()->getId()))?>"> in vendor\magento\module-checkout\view\frontend\templates\cart\item\default.phtml but it doesn't seem to be working.

I must be putting something in the wrong place or not using correct code but I found this on another post.

Just need a point in the right direction

Best Answer

You can simply use in app/design/frontend/Vendor/Themename/Magento_Checkout/templates/cart/item/default.phtml below code.

<a href="#"
           title="<?= $block->escapeHtml(__('Remove item')) ?>"
           class="action action-delete"
           data-post='<?= /* @escapeNotVerified */ $this->helper('Magento\Checkout\Helper\Cart')->getDeletePostJson($_item) ?>'>
            <span>
                <?= /* @escapeNotVerified */ __('Remove item') ?>
            </span>
        </a>

Related Solutions

Magento 2 – Adding Quantity Increment Button in Cart and Mini Cart

app/code/Amsi/UserManagement/view/frontend/templates/cart/item/default.phtml

I have added For both increment and decrementing quantity.

You can add the button near Quantiy using below code.

<div class="control qty">
   <input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
       name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
       data-cart-item-id="<?= /* @escapeNotVerified */ $_item->getSku() ?>"
       value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
       type="number"
       size="4"
       title="<?= $block->escapeHtml(__('Qty')) ?>"
       class="input-text qty"
       data-validate="{required:true,'validate-greater-than-zero':true}"
       data-role="cart-item-qty"/>                                                     

      /*Code to add increment and decrement button*/

   <div class="qty_control">
            <button type="button"  id="<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class="increaseQty"></button>
            <button type="button"   id="<?= /* @escapeNotVerified */ $_item->getId() ?>-dec"  class="decreaseQty"></button>
      </div>
</div>

<script type="text/javascript">
require(["jquery"],function($){
    $('#<?php echo $_item->getId();?>-upt, #<?php echo $_item->getId();?>-dec').on("click",function(){ 
        var $this = $(this);
        var ctrl = ($(this).attr('id').replace('-upt','')).replace('-dec','');          
        var currentQty = $("#cart-"+ctrl+"-qty").val();
        if($this.hasClass('increaseQty')){
            var newAdd = parseInt(currentQty)+parseInt(1);
             $("#cart-"+ctrl+"-qty").val(newAdd);
        }else{
             if(currentQty>1){
                var newAdd = parseInt(currentQty)-parseInt(1);
                $("#cart-"+ctrl+"-qty").val(newAdd); 
             }
        }
    });
});
</script>

Magento 2 – Update Cart Page with AJAX Using Increment/Decrement Buttons

First, change the button from static id to dynamic id, so it will work if cart have more than one product.

File: default.xml

<button type="button" id="increaseQty-<?= $block->escapeHtmlAttr($_item->getId()) ?>-btn">+</button>

<button type="button" id="decreaseQty-<?= $block->escapeHtmlAttr($_item->getId()) ?>-btn">-</button>

And this is the script:

<script type="text/javascript">
require(["jquery",
    "Magento_Checkout/js/model/quote",
    "Magento_Checkout/js/model/cart/totals-processor/default"
    ],
    function($, quote, totalsDefaultProvider){
        var formKey = jQuery("[name='form_key']").val();
        $("#increaseQty-<?= $block->escapeHtmlAttr($_item->getId()) ?>-btn").on("click",function(){
            var currentQty = $("#cart-<?= $block->escapeHtmlAttr($_item->getId()) ?>-qty").val();
            var newAdd = parseInt(currentQty)+parseInt(1);
            $("#cart-<?= $block->escapeHtmlAttr($_item->getId()) ?>-qty").val(newAdd);
            var updateQty = $("#cart-<?= $block->escapeHtmlAttr($_item->getId()) ?>-qty").val();
            var url = "<?php echo $block->getBaseUrl().'checkout/cart/updatePost' ?>";
            $.ajax({
                url: url,
                method: "POST",
                data: { form_key:formKey,"cart[<?= $block->escapeHtmlAttr($_item->getId()) ?>][qty]": updateQty},
                dataType: 'json',
                showLoader:true,
                cache: false,
                success: function(data){
                }
            });
        });
        $("#decreaseQty-<?= $block->escapeHtmlAttr($_item->getId()) ?>-btn").on("click",function(){
            var currentQty = $("#cart-<?= $block->escapeHtmlAttr($_item->getId()) ?>-qty").val();
            if(currentQty>1){
                var newAdd = parseInt(currentQty)-parseInt(1);
                $("#cart-<?= $block->escapeHtmlAttr($_item->getId()) ?>-qty").val(newAdd);
                var updateQty = $("#cart-<?= $block->escapeHtmlAttr($_item->getId()) ?>-qty").val();
            }else{
                alert("Can not choose less than one");exit();
            }
            var url = "<?php echo $block->getBaseUrl().'checkout/cart/updatePost' ?>";
            $.ajax({
                url: url,
                method: "POST",
                data: { form_key:formKey,"cart[<?= $block->escapeHtmlAttr($_item->getId()) ?>][qty]": updateQty},
                dataType: 'json',
                showLoader:true,
                cache: false,
                success: function(data){
                }
            });
        });
    });
</script>

Best Answer

Related Solutions

Magento 2 – Adding Quantity Increment Button in Cart and Mini Cart

Magento 2 – Update Cart Page with AJAX Using Increment/Decrement Buttons

Related Topic