1

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 May 18 '18 at 9:58
  • Yep, but please add it to the question inseatd of post it as answer. – sv3n May 18 '18 at 10:09
  • sry.how can i achieve it.i didnt know how to do it. – eswar May 18 '18 at 11:11
  • No problem :) There is an edit link below your question ... – sv3n May 18 '18 at 11:16
2

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 May 14 '18 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 May 14 '18 at 12:28
  • Ok, I will help you. – Amrit Pal Singh May 14 '18 at 12:54
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 ?>
  • 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 May 14 '18 at 13:01
  • right now i am getting model pop up with text area – eswar May 14 '18 at 13:14
  • after entering the comment in text area data is not storing and order is not getting cancel. – eswar May 14 '18 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 May 14 '18 at 13:19
  • i am using same controller for form submit and cancel order – eswar May 14 '18 at 13:22
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.

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.