Magento 2 – Mini Cart Delete Confirmation Popup

magento2.1.0mini-cart

How to add the popup(when you click on delete item) to a custom button, Screenshot Below

    <?php
$orderStatus = $_order->getStatusLabel();

if ($orderStatus == 'Pending' || $orderStatus == 'Processing')
    {
?>
   <a href="<?php /* @escapeNotVerified */
    echo $block->getBaseUrl() . 'ordercancel/index/ordercancel?orderId=' .       $_order->getId(); ?>" class="action view">
    <span><?php /* @escapeNotVerified */
    echo __('Cancel Order') ?></span>
                                </a>
                            <?php
    } ?>

Want to add this popup when customer click order cancel

Best Answer

You can try with below code,

require(['jquery','Magento_Ui/js/modal/confirm'], function ($, confirm) {
    $('.view').on("click",function(event){
        event.stopPropagation();
        getId = $(this).attr('data-order');
        confirm({
            content: 'Are you sure you would like to remove this item from the shopping cart?',
            actions: {
                confirm: function () {
                    _removeItem(getId);
                },
                always: function (event) {
                    event.stopImmediatePropagation();
                }
            }
        });
    });

    function _removeItem(orderId) {
            var itemId = orderId;
            //ajax call here..
    },
 }

data-order with order id is added in anchor tag.

<a href="<?php /* @escapeNotVerified */
echo $block->getBaseUrl() . 'ordercancel/index/ordercancel?orderId=' .       $_order->getId(); ?>" class="action view" data-order="<?php echo $_order->getId(); ?>">
<span><?php /* @escapeNotVerified */
echo __('Cancel Order') ?></span>
                            </a>

Related Solutions

Magento 2 – Mini Cart Item Delete Alert

I you are still looking for an answer, the modal confirmation is created in vendor/magento/module-checkout/view/frontend/web/js/sidebar.js and it's a parameter named confirm:

        /**
         * @param {jQuery.Event} event
         */
        events['click ' + this.options.button.remove] =  function (event) {
            event.stopPropagation();
            confirm({
                content: self.options.confirmMessage,
                actions: {
                    /** @inheritdoc */
                    confirm: function () {
                        self._removeItem($(event.currentTarget));
                    },

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

Magento 2.1.7 Mini Cart RemoveItem Not Working – Troubleshooting Guide

Create Vendor/Module/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
  <preference for="Magento\Checkout\Controller\Sidebar\RemoveItem" type="Vendor\Module\Controller\Sidebar\RemoveItem" />
</config>

Create Vendor/Module/Controller/Sidebar/RemoveItem.php

<?php
namespace Vendor\Module\Controller\Sidebar;

class RemoveItem extends \Magento\Checkout\Controller\Sidebar\RemoveItem
{

    public function execute()
    {
        $itemId = (int)$this->getRequest()->getParam('item_id');
        try {
            $this->sidebar->checkQuoteItem($itemId);
            $this->sidebar->removeQuoteItem($itemId);
            return $this->jsonResponse();
        } catch (\Magento\Framework\Exception\LocalizedException $e) {
            return $this->jsonResponse($e->getMessage());
        } catch (\Exception $e) {
            $this->logger->critical($e);
            return $this->jsonResponse($e->getMessage());
        }
    }
}

Best Answer

Related Solutions

Magento 2 – Mini Cart Item Delete Alert

Magento 2.1.7 Mini Cart RemoveItem Not Working – Troubleshooting Guide

Related Topic