get confirmation before removing item from cart in magento 2?

Question

I want to remove the items from cart from checkout\cart page, but before that i wanna to get a confirm from user. it is possible to get confirmation from user after that i can remove the item from cart if he/she click OK, else he/she click cancel it should not delete the item from cart.

I have tried some examples but still when i click on cancel the item gets removed from cart.

here is the code we need to change:-

<a href="#"
   title="<?php echo $block->escapeHtml(__('Remove item')); ?>"
   class="action action-delete"
   data-post='<?php /* @escapeNotVerified */ echo $block->getDeletePostJson(); ?>'>
    <span>
        <?php /* @escapeNotVerified */ echo __('Remove item')?>
    </span>
</a>

If anyone get the solution?

Answer 1

You have to override form.phtml file

app/design/frontend/vendorname/themename/Magento_Checkout/templates/cart/form.phtml

Add below code at last

<script>
require(['jquery', 'jquery/ui'], function($){ 
        jQuery('.action-delete').click(function(e)
    {
        if(confirm('Do you want to remove this product?'))
        {
            return true;
        }
        else
        {
            return false; 
        }

    });
 });
</script>

Answer 2

jQuery widget (lib/web/mage/dataPost.js) that processes product removing already has this functionality.

postData: function (params) {
    ...

    if (params.data.confirmation) {
        uiConfirm({
            content: params.data.confirmationMessage,
            actions: {
                confirm: function () {
                    $form.appendTo('body').hide().submit();
                }
            }
        });
    } else {
        $form.appendTo('body').hide().submit();
    }
}

And all you need is to change the data (params.data.confirmation) that is used to initialize this widget.

<a href="#"
   ...
   data-post='<?= /* @escapeNotVerified */ $block->getDeletePostJson() ?>'>
</a>

For this, you need to create a plugin for vendor/magento/module-checkout/Helper/Cart.php.

app/code/<VendorName>/<ModuleName>/Plugin/Checkout/Helper/Cart.php

namespace <VendorName>\<ModuleName>\Plugin\Checkout\Helper;

class Cart
{
    public function afterGetDeletePostJson($subject, $result)
    {
        $result = json_decode($result, true);
        $result['data']['confirmation'] = true;
        $result['data']['confirmationMessage'] = 'Would you like to remove this product?';
        return json_encode($result);
    }
}

app/code/<VendorName>/<ModuleName>/etc/di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Helper\Cart">
        <plugin name="after_get_delete_post_json" type="<VendorName>\<ModuleName>\Plugin\Checkout\Helper\Cart" />
    </type>
</config>

Answer 3

To display confirm box using popup modal, Edit YOUR_THEME/Magento_Checkout/templates/cart/item/default.phtml

1. Remove data-post from <a> tag for delete product from cart
2. Add onclick='deleteFromCart(setItem($_item)->getDeletePostJson($_item) ?>)' in the same tag.
3. Add below code at the bottom of the same file.

<script>
var deleteFromCart;
require([ 'jquery',
    'Magento_Customer/js/model/authentication-popup',
    'Magento_Ui/js/modal/alert',
    'Magento_Ui/js/modal/confirm',
    'jquery/ui',
    'mage/decorate',
    'mage/collapsible',
    'mage/cookies'], function($, authenticationPopup, alert, confirm){ 

    deleteFromCart=function(datapass)
    {

        var data1=datapass;

        $.extend(data1.data, {
                'form_key': $.mage.cookies.get('form_key')
            });

        confirm({
            content: 'Are you sure you would like to remove this item from the shopping cart?',
            actions: {
                /** @inheritdoc */
                    confirm: function () {


                        $.post({
                        url: data1.action,
                        data:data1.data,
                        showLoader: true,
                        success: function (res) {
                           location.reload();
                        },
                        error: function (xhr, status, error) {
                            var err = eval("(" + xhr.responseText + ")");
                            console.log(err.Message);
                        }
                    });  
                },

                /** @inheritdoc */
                always: function (e) {
                    e.stopImmediatePropagation();
                    return false;
                }
            }
        });
    }

 });
</script>