Hello Magento Friends,
In this Magento 2 tutorial, I will explain How to Add Editable Field in the Admin Order View Page in Magento 2.
The checkout page is the final stage for order placement. Magento 2 merchants customize the checkout page to provide a better user experience. The store owners can determine checkout options for a quick checkout procedure. Admin can add custom checkout fields for a smooth order fulfillment process.
When you have added custom fields at the checkout page and now the admin needs to edit the custom checkout fields value from the backend order view page. You can accomplish it using the below steps.
Steps 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();
}
}
Conclusion:
This way you can Add an editable field in the admin order view page in Magento 2. If you face any difficulty, share it with me through the comment section. Stay updated with us for more Magento solutions.
Happy Coding!