When click on cancel order link a modal popup has to open in magento 2

Question

A modal popup is open with a text area, enter data into that text area and how to submit that form and cancel the order in Magento 2.

app\code\Test\CancelOrder\Controller\Order

namespace Test\CancelOrder\Controller\Order;

use Magento\Sales\Controller\OrderInterface;
use Magento\Framework\App\Action\Context;
use Magento\Sales\Controller\AbstractController\OrderLoaderInterface;
use Magento\Framework\Registry;
use \Magento\Framework\Exception\NotFoundException;

class Cancel extends \Magento\Framework\App\Action\Action implements OrderInterface
{
    /**
     * @var \Magento\Sales\Api\OrderManagementInterface
     */
    protected $order;

    /**
     * @var \Magento\Sales\Controller\AbstractController\OrderLoaderInterface
     */
    protected $orderLoader;

    /**
     * @var \Magento\Framework\Registry
     */
    protected $registry;

    /**
     * Cancel constructor.
     * @param \Magento\Sales\Api\OrderManagementInterface $orderManagementInterface
     * @param Context $context
     */
    public function __construct(
        \Magento\Sales\Api\OrderManagementInterface $orderManagementInterface,
        OrderLoaderInterface $orderLoader,
        Registry $registry,
        \Magento\Sales\Model\OrderFactory $order,
        Context $context,
       ) {
        $this->_order = $orderManagementInterface;
        $this->orderLoader = $orderLoader;
        $this->registry = $registry;
        $this->order = $order;
        parent::__construct($context);
    }

    public function execute()
    {
        $resultRedirect = $this->resultRedirectFactory->create();
        try {
            $orderId = $this->getRequest()->getParam('orderid');
            $orderObject = $this->order->create()->load($orderId);
            $comment = $this->getRequest()->getParam('comment');
            $orderObject->addStatusHistoryComment($comment)->setIsCustomerNotified(false)
                    ->setEntityName('order')
                    ->save();
            $this->_order->cancel($orderObject->getId());
        } catch (\Magento\Framework\Exception\LocalizedException $e) {
            if ($this->_objectManager->get('Magento\Checkout\Model\Session')->getUseNotice(true)) {
                $this->messageManager->addNotice($e->getMessage());
            } else {
                $this->messageManager->addError($e->getMessage());
            }
        }
        return $resultRedirect->setPath('*/*/history');
    }
}

Test\CancelOrder\view\frontend\templates\order\history.phtml

<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php $_orders = $block->getOrders(); ?>
<?php echo $block->getChildHtml('info');?>
<?php if ($_orders && count($_orders)): ?>
    <div class="table-wrapper orders-history">
        <table class="data table table-order-items history" id="my-orders-table">
            <caption class="table-caption"><?php /* @escapeNotVerified */ echo __('Orders') ?></caption>
            <thead>
                <tr>
                    <th scope="col" class="col id"><?php /* @escapeNotVerified */ echo __('Order #') ?></th>
                    <th scope="col" class="col date"><?php /* @escapeNotVerified */ echo __('Date') ?></th>
                    <?php /* @noEscape */ echo $block->getChildHtml('extra.column.header');?>
                    <th scope="col" class="col shipping"><?php /* @escapeNotVerified */ echo __('Ship To') ?></th>
                    <th scope="col" class="col total"><?php /* @escapeNotVerified */ echo __('Order Total') ?></th>
                    <th scope="col" class="col status"><?php /* @escapeNotVerified */ echo __('Status') ?></th>
                    <th scope="col" class="col actions">&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($_orders as $_order): ?>
                    <tr>
                        <td data-th="<?php echo $block->escapeHtml(__('Order #')) ?>" class="col id"><?php /* @escapeNotVerified */ echo $_order->getRealOrderId() ?></td>
                        <td data-th="<?php echo $block->escapeHtml(__('Date')) ?>" class="col date"><?php /* @escapeNotVerified */ echo $block->formatDate($_order->getCreatedAt()) ?></td>
                        <?php $extra = $block->getChildBlock('extra.container'); ?>
                        <?php if ($extra): ?>
                            <?php $extra->setOrder($_order); ?>
                            <?php /* @noEscape */ echo $extra->getChildHtml() ?>
                        <?php endif; ?>
                        <td data-th="<?php echo $block->escapeHtml(__('Ship To')) ?>" class="col shipping"><?php echo $_order->getShippingAddress() ? $block->escapeHtml($_order->getShippingAddress()->getName()) : '&nbsp;' ?></td>
                        <td data-th="<?php echo $block->escapeHtml(__('Order Total')) ?>" class="col total"><?php /* @escapeNotVerified */ echo $_order->formatPrice($_order->getGrandTotal()) ?></td>
                        <td data-th="<?php echo $block->escapeHtml(__('Status')) ?>" class="col status"><?php /* @escapeNotVerified */ echo $_order->getStatusLabel() ?></td>
                        <td data-th="<?php echo $block->escapeHtml(__('Actions')) ?>" class="col actions">
                            <a href="<?php /* @escapeNotVerified */ echo $block->getViewUrl($_order) ?>" class="action view">
                                <span><?php /* @escapeNotVerified */ echo __('View Order') ?></span>
                            </a>
                            <?php if ($_order->getStatusLabel()=='Pending') : ?>
                            <div>
                                <a href="#" class="action cancel orders" id="<?php echo $_order->getId().'_'.$_order->getRealOrderId(); ?>">
                                <span><?php /* @escapeNotVerified */ echo __('Cancel Order') ?></span>
                                </a>
                            </div>
                            <?php endif ?>
                            <?php if ($this->helper('Magento\Sales\Helper\Reorder')->canReorder($_order->getEntityId())) : ?>
                                <a href="#" data-post='<?php /* @escapeNotVerified */ echo
                                $this->helper(\Magento\Framework\Data\Helper\PostHelper::class)
                                    ->getPostData($block->getReorderUrl($_order))
                                ?>' class="action order">
                                    <span><?php /* @escapeNotVerified */ echo __('Reorder') ?></span>
                                </a>
                            <?php endif ?>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php if ($block->getPagerHtml()): ?>
        <div class="order-products-toolbar toolbar bottom"><?php echo $block->getPagerHtml(); ?></div>
    <?php endif ?>
<?php else: ?>
    <div class="message info empty"><span><?php /* @escapeNotVerified */ echo __('You have placed no orders.'); ?></span></div>
<?php endif ?>
<?php 
$currentUrl = \Magento\Framework\App\ObjectManager::getInstance()->get('Magento\Framework\UrlInterface');
$currentpage = $currentUrl->getCurrentUrl();
?>
<div id="popup-modal" style="display:none;">
<p class='orderinc' style="text-align:center;"></p>
   <form action="<?php echo $block->getUrl('sales/order/cancel');?>" name="comment_form" id="comment_form" method="post" data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"
      data-mage-init='{"validation":{}}'>
        <div class="field comment required">
           <!-- <label class="label" for="comment"><span style="font-weight:bold;"><?php //echo __('Comment') ?></span></label>-->
            <div class="control" style="margin-bottom: 40px;">
                <textarea name="comment" id="comment" placeholder="why do you want to cancel this order?" title="<?php /* @escapeNotVerified */ echo __('Comment') ?>" rows="3" cols="5"  class="input-text" data-validate="{required:true}"></textarea>
                <input type="hidden" name="orderid" id="orderid" value=<?php echo $_order->getId();?> /> <!-- passing order id to a controller-->
                <input type="hidden" name="currenturl" id="currenturl" value=<?php echo $currentpage;?> />

            </div>
        </div>
    </form>
</div>

<style type="text/css"> a.white-space-pre-line { white-space: pre-line; } .loader { border: 6px solid #f3f3f3; border-radius: 50%; border-top: 6px solid #3a3939; top: 60%; position: absolute; left: 50%; width: 50px; height: 50px; -webkit-animation: spin 1s linear infinite; /* Safari */ animation: spin 1s linear infinite; display: none; } /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #loader-wrapper{ position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.1); z-index: 89898; cursor: pointer; } </style> <!--styles for loader -->

    <style type="text/css">
    .modal-title{text-align:center;}
    </style>

    <div id="loader-wrapper"></div>
    <div class="loader"></div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                //innerScroll: true,
                title: 'Are you sure to cancel the selected order ?',
                buttons: [{
                    text: $.mage.__('submit'), //submit button in pop-up
                    class: '',
                    click: function(data) {

                        var form_data = jQuery("#comment_form").serialize();
                            $("#comment_form").validate(); 
                            if (!$("#comment_form").valid()) return false;//making text area as required field
                            $("#loader-wrapper").css("display", "block"); 
                            $(".loader").css("display", "block"); //displaying loader
                            jQuery.ajax({
                            url: "<?php  echo $block->getUrl('sales/order/cancel');?>",
                            type: 'POST',
                            data: form_data,
                            success: function(data) {
                            window.location.href = $("#currenturl").val(); //after posting data redirecting to currrent page
                            },
                            error: function(result) {
                                console.log('no response !');
                            }
                        });

                        this.closeModal();

                    }
                }]
            };

            var popup = modal(options, $('#popup-modal'));
            $(".orders").on('click', function() { //click on a cancel order link opening a pop-up
                var str = this.id;
                var orderVal = str.split("_");
                $("#orderid").val(orderVal[0]);
                $("#orderincrid").val(orderVal[1]);
                $("p.orderinc").text("ORDEER ID:#"+orderVal[1]);//showing orderid in pop-up
                $("#popup-modal").modal("openModal");
                return false;
            });
        }
    );
</script>

Can you please add the code to your question instead of adding it as answers? Thanks :) — sv3n, Commented May 18, 2018 at 9:58
Yep, but please add it to the question inseatd of post it as answer. — sv3n, Commented May 18, 2018 at 10:09
No problem :) There is an edit link below your question ... — sv3n, Commented May 18, 2018 at 11:16

Amrit Pal Singh · Accepted Answer · 2018-05-14 12:16:20Z

You can override the code where cancel button is thereby removing the cancel action URL and putting id like id="openModel" in the anchor tag.

Now add the script to open the modal on click event.

require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function($,modal) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'Title',
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#modal'));
            $("#openModel").on("click",function(event){

                $('#modal').modal('openModal');

            });
        }
    );

After this, you can add the cancel action url on submit button in the html below where you will add the form.

<div id="modal" style="display: none;"></div>

i have to enter the comment in text area why i am cancelling the order and then i have to cancel the order. — eswar, Commented May 14, 2018 at 12:26
you can add form in the div and after submitting the form you can add the cancel URL action in success action. — Amrit Pal Singh, Commented May 14, 2018 at 12:28

Rama Chandran M · Accepted Answer · 2018-05-14 12:59:09Z

0

<?php if ($_order->getStatusLabel()=='Pending') : ?>
<div>
<a href="<?php /* @escapeNotVerified */ echo $block->getCancelUrl($_order) ?>" class="action cancel" id="comments"> <span><?php /* @escapeNotVerified */ echo __('Cancel Order') ?></span></a></div>
<?php endif ?>

edited May 14, 2018 at 12:59

Rama Chandran M

3,23013 gold badges23 silver badges38 bronze badges

answered May 14, 2018 at 12:53

eswar

1034 silver badges16 bronze badges

Remove the href and use id="comments" to open your modal first using the script i gave above and put comments in place of openModel in line $("#comments").on("click",function(event){
– Amrit Pal Singh
Commented May 14, 2018 at 13:01
right now i am getting model pop up with text area
– eswar
Commented May 14, 2018 at 13:14
after entering the comment in text area data is not storing and order is not getting cancel.
– eswar
Commented May 14, 2018 at 13:17
you have to create a controller function to submit the form and add order comment after this on success cancel the order by redirection cancel URL.
– Amrit Pal Singh
Commented May 14, 2018 at 13:19
i am using same controller for form submit and cancel order
– eswar
Commented May 14, 2018 at 13:22

| Show 2 more comments

Kazim Noorani · Accepted Answer · 2018-05-14 13:15:07Z

0

You can use https://magento.stackexchange.com/a/222160/45214 to check how to create popup on link click.

You can further edit the js click to change the close modal function and submit the form.

answered May 14, 2018 at 13:15

Kazim Noorani

3,0313 gold badges24 silver badges43 bronze badges

Add a comment |

Stack Exchange Network

When click on cancel order link a modal popup has to open in magento 2

3 Answers 3

Your Answer

Not the answer you're looking for? Browse other questions tagged
magento-2.1
or ask your own question.

Linked

Hot Network Questions

When click on cancel order link a modal popup has to open in magento 2

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged magento-2.1 or ask your own question.

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
magento-2.1
or ask your own question.