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?

  • 1
    Its already present. Check the demo here: magento2-demo.nexcess.net – Sejal Shah May 23 '17 at 13:51
  • No, its not already there. You did not get my point – Mandar Parbate May 24 '17 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 – Mandar Parbate May 24 '17 at 4:21
  • Not for mini-cart – Mandar Parbate May 24 '17 at 4:22
  • ok..I thought it's for minicart in the header – Sejal Shah May 24 '17 at 4:39
3

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

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

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>

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.