How to Add Editable Field in Admin Order View Page in Magento 2
Step 1: Go to the below file path
app\code\Vendor\Extension\view\adminhtml\layout\sales_order_view.xml
Then add the below code
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="order_additional_info">
<block class="Vendor\Extension\Block\Adminhtml\Order\Checkoutcustomformedit" name="admin.chekoutcustomfield" template="Vendor_Extension::checkoutcustomformedit.phtml" />
</referenceBlock>
</body>
</page>
Step 2: Next, move to the following file path
app\code\Vendor\Extension\Block\Adminhtml\Order\Checkoutcustomformedit.php
Now add the below-mentioned code snippet
<?php
namespace Vendor\Extension\Block\Adminhtml\Order;
use \Magento\Backend\Block\Template;
use \Magento\Backend\Block\Template\Context;
use \Magento\Sales\Model\Order;
class Checkoutcustomformedit extends Template
{
protected $order;
public function __construct(
Context $context,
Order $order,
array $data = [])
{
$this->order = $order;
parent::__construct($context, $data);
}
public function getOrderId()
{
$orderId = $this->getRequest()->getParam('order_id');
return $orderId;
}
public function getCustomfieldvalue()
{
$orderId = $this->getOrderId();
$customfieldvalue = $this->order->load($orderId)->getData('customfield1');
return $customfieldvalue;
}
}
Step 3: Now navigate to the below file path
app\code\Vendor\Extension\view\adminhtml\templates\Checkoutcustomformedit.phtml
Now add the code as follows
<section class="admin__page-section">
<div class="admin__page-section-title">
<span class="title">
<?php /* @escapeNotVerified */ echo __('Buyer Order Information') ?>
</span>
<div id="checkoutfield-edit-link" class="actions block-edit-link">
<a href="#"
id="edit-checkoutfield-info">
<?= $block->escapeHtml(__('Edit')); ?>
</a>
</div>
</div>
<div class="admin__page-section-content">
<div class="order-information textfied" id="textfiedcustomfield">
<div class="box">
<div class="box-content">
<?php echo $block->getCustomfield1(); ?>
</div>
</div>
</div>
</div>
<div class="admin__page-section-item-content edit-checkoutfield-date" id="edit-checkoutfield-info-form"
style="display: none;">
<fieldset class="admin__fieldset">
<input type="hidden" id="orderid" value="<?php
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$request = $objectManager->get('Magento\Framework\App\Request\Http');
echo $param = $request->getParam('order_id');?>"/>
<input type="text" id="customfield1" class="customfield1" value="<?php echo $block->getCustomfield1(); ?>">
</fieldset>
<button id="customfield-submit">Submit</button>
</div>
</section>
<script type="text/javascript">
require([
'jquery',
'mage/validation',
'mage/translate',
'jquery/ui'
], function ($) {
document.getElementById('edit-checkoutfield-info').addEventListener('click', function (e, t) {
e.preventDefault();
$('#edit-checkoutfield-info-form').toggle();
});
$("#customfield-submit").click(function() {
var orderid = $('#orderid').val();
if($('#customfield1').length){
var customfield1 = $('#customfield1').val();
}
var url = '<?= /** @noEscape */ $block->getUrl("groupproduct/queue/update")?>';
jQuery.ajax({
url: url,
data: {orderid: orderid,customfield1value: customfield1},
type: "POST",
async: false,
}).done(function (response) {
$("#textfiedcustomfield").load(location.href + " #textfiedcustomfield");
});
});
});
</script>
Step 4: At last, move to the following file path
app\code\Vendor\Extension\Controller\Adminhtml\Queue\Update.php
And add the code mentioned below
<?php
namespace Vendor\Extension\Controller\Adminhtml\Queue;
use Magento\Framework\App\ResponseInterface;
use Magento\Framework\Exception\LocalizedException;
use Magento\Backend\App\Action;
use Magento\Sales\Api\OrderRepositoryInterface;
class Update extends Action
{
protected $quoteFactory
protected $orderinterface;
protected $request;
public function __construct(
Action\Context $context,
\Magento\Quote\Model\QuoteFactory $quoteFactory,
\Magento\Sales\Api\Data\OrderInterface $orderinterface,
\Magento\Framework\App\Request\Http $request)
{
parent::__construct($context);
$this->orderinterface = $orderinterface;
$this->request = $request;
$this->quoteFactory = $quoteFactory;
}
public function execute()
{
$customfield1value = $this->getRequest()->getPostValue('customfield1value');
$orderid = $this->getRequest()->getPostValue('orderid');
$order = $this->orderinterface->load($orderid);
$order->setData('customfield1', $customfield1value);
$order->save();
}
}
Comments
Post a Comment