1

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?

8
  • 1
    Its already present. Check the demo here: magento2-demo.nexcess.net
    – Sejal Shah
    May 23, 2017 at 13:51
  • No, its not already there. You did not get my point May 24, 2017 at 4:19
  • open checkout/cart page and click on delete item icon, you does not get a alert box or confirmation before deleting it May 24, 2017 at 4:21
  • Not for mini-cart May 24, 2017 at 4:22
  • ok..I thought it's for minicart in the header
    – Sejal Shah
    May 24, 2017 at 4:39

3 Answers 3

4

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>
2
1

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>
0

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>

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.