cancel
Showing results for 
Search instead for 
Did you mean: 

Create Modal popup form on admin order view page button click

Create Modal popup form on admin order view page button click

Hi,

 

I have packaging button in admin order view page .on click i want to create popup to enter Tag Id on order item.Please help to create popup form on click.

 

Thank You

Tippanna Pawar

1 REPLY 1
Highlighted

Re: Create Modal popup form on admin order view page button click

If you want to call a pop on your custom button click then you have to create a modal box

 

  • For create a modal box, you need to create a child block of Magento\Sales\Block\Adminhtml\Order\View .
  • On that child build a modal box with form
  • After that add this child Block HTML out with Magento\Sales\Block\Adminhtml\Order\View out using toHtml()plugin. after Plugi afterToHtml().

 

Create a Block class and a phtml to render the popup and form

Block Class: app\code\MyCompany\MyModule\Block\Adminhtml\Order\ModalBox and code Will be like:

<?php


namespace MyCompany\MyModule\Block\Adminhtml\Order;

/**
 * Class ModalBox
 *
 * @package StackExchange\MagentoTest\Block\Adminhtml\Order
 */
class ModalBox extends \Magento\Backend\Block\Template
{

    /**
     * Constructor
     *
     * @param \Magento\Backend\Block\Template\Context  $context
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

    /**
     * @return string
     */
    public function getInfo()
    {
        //Your block cod
        return __('Hello Developer! This how to get the ');
    }
    public function getFormUrl()
    {
        $orderId = false;
        if($this->hasData('order')){
            $orderId = $this->getOrder()->getId();
        }
        return $this->getUrl('magentotest/order/order',[
            'order_id' => $orderId
        ]);
    }
}

Phtml code is below and the location is:

Location: app/code/MyCompany/MyModule/view/adminhtml/templates/order/modalbox.phtml

Code

<?php
/**
 * @var $block \ MyCompany \ MyModule \Block\Adminhtml\Order\ModalBox
 */

?>
<div id="popup-modal" style="display: none">

    <form action="<?= $block->escapeUrl($block->getFormUrl())?>" method="post"
          id="order-view-add-warranty-form">
        <input name="firstname" type="text">
        <input name="lastname" type="text">
        <input name="phone" type="text">
        <input name="bookingTime" type="date">

        <input type="button" value="Submit" id="order-view-add-warranty">
    </form>
</div>

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

            var popup = modal(options, $('#popup-modal'));
            $("#sendordersms").click(function() {
                $("#popup-modal").modal('openModal');
            });

            $('#order-view-add-warranty').click(function () {
                $('#order-view-add-warranty-form').append($('<input>', {
                    'name': 'form_key',
                    'value': window.FORM_KEY,
                    'type': 'hidden'
                }));
                $('#order-view-add-warranty-form').submit();

            });

        }

    );
</script>

Create a plugin class MyCompany\ MyModule \Plugin\CreateWarrantyOrder

Add new after plugin on toHtml() on this class and append MyCompany\ MyModule \Block\Adminhtml\Order\ModalBox block output using this after plugin afterToHtml. And code:

<?php


namespace MyCompany \ MyModule \Plugin\Magento\Sales\Block\Adminhtml\Order;

/**
 * Class View
 *
 * @package MyCompany \ MyModule \Plugin\Magento\Sales\Block\Adminhtml\Order
 */
class View
{

    public function beforeSetLayout(
        \Magento\Sales\Block\Adminhtml\Order\View $subject,
        $layout
    ) {
        $subject->addButton(
            'sendordersms',
            [
                'label' => __('Create Warranty Order'),
                'onclick' => "",
                'class' => 'action-default action-warranty-order',
            ]
        );
        return [$layout];
    }

    public function afterToHtml(
        \Magento\Sales\Block\Adminhtml\Order\View $subject,
        $result
    ) {
        if($subject->getNameInLayout() == 'sales_order_edit'){
            $customBlockHtml = $subject->getLayout()->createBlock(
                \StackExchange\MagentoTest\Block\Adminhtml\Order\ModalBox::class,
                $subject->getNameInLayout().'_modal_box'
            )->setOrder($subject->getOrder())
                ->setTemplate('StackExchange_MagentoTest::order/modalbox.phtml')
                ->toHtml();
            return $result.$customBlockHtml;
        }
        return $result;
    }
}

Create at Controller class

<?php

namespace MyCompany\MyModule\Controller\Adminhtml\Order;

use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Framework\App\Action\HttpPostActionInterface;
use Magento\Framework\App\ResponseInterface;
use Magento\Framework\View\Result\Page;
use Magento\Framework\View\Result\PageFactory;
use Magento\Sales\Controller\Adminhtml\Order as AdminOrder;

class Order extends AdminOrder implements HttpPostActionInterface
{
    /**
     * Changes ACL Resource Id
     */
    const ADMIN_RESOURCE = 'Magento_Sales::hold';
    /**
     * @inheritDoc
     */
    public function execute()
    {
        $resultRedirect = $this->resultRedirectFactory->create();

        $order = $this->_initOrder();
        if ($order) {
            $post = $this->getRequest()->getPostValue();

            echo "<pre>";
            print_r($post);
            exit;
            $resultRedirect->setPath('sales/order/view', ['order_id' => $order->getId()]);
            return $resultRedirect;
        }
        $resultRedirect->setPath('sales/*/');
        return $resultRedirect;
    }
}

Above code are working on local. You have to changes class name and URL as per your requirement.

Should you have any additional questions please feel free to contact us.