ACL adalah metode pembayaran khusus saya sekarang saya ingin menambahkan bidang khusus di bawah Opsi ACL di Halaman Checkout.
PFA
ACL adalah metode pembayaran khusus saya sekarang saya ingin menambahkan bidang khusus di bawah Opsi ACL di Halaman Checkout.
PFA
Jawaban:
Untuk menjawab pertanyaan Anda, ada 3 bagian:
Buat Atribut Pesanan
Untuk membuat atribut pesanan, Anda HARUS menggunakan skrip pengaturan dengan kode berikut:
<?php
namespace Vendor\Module\Setup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\UpgradeDataInterface;
use Magento\Quote\Setup\QuoteSetupFactory;
use Magento\Sales\Setup\SalesSetupFactory;
class UpgradeData implements UpgradeDataInterface
{
/**
* @var QuoteSetupFactory
*/
protected $quoteSetupFactory;
/**
* @var SalesSetupFactory
*/
protected $salesSetupFactory;
/**
* @var EavSetupFactory
*/
protected $eavSetupFactory;
/**
* Constructor
*/
public function __construct(
QuoteSetupFactory $quoteSetupFactory,
SalesSetupFactory $salesSetupFactory,
EavSetupFactory $eavSetupFactory
) {
$this->quoteSetupFactory = $quoteSetupFactory;
$this->salesSetupFactory = $salesSetupFactory;
$this->eavSetupFactory = $eavSetupFactory;
}
/**
* {@inheritdoc}
*/
public function upgrade(
ModuleDataSetupInterface $setup,
ModuleContextInterface $context
) {
$setup->startSetup();
if (version_compare($context->getVersion(), '1.0.1', '<')) {
/** @var \Magento\Quote\Setup\QuoteSetup $quoteInstaller */
$quoteInstaller = $this->quoteSetupFactory->create(['resourceName' => 'quote_setup', 'setup' => $setup]);
/** @var \Magento\Sales\Setup\SalesSetup $salesInstaller */
$salesInstaller = $this->salesSetupFactory->create(['resourceName' => 'sales_setup', 'setup' => $setup]);
//Add attributes to quote
$entityAttributesCodes = [
'bank_name' => \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
];
foreach ($entityAttributesCodes as $code => $type) {
$quoteInstaller->addAttribute('quote', $code, ['type' => $type, 'length' => 255, 'visible' => true, 'nullable' => true,]);
$salesInstaller->addAttribute('order', $code, ['type' => $type, 'length' => 255, 'visible' => true, 'nullable' => true,]);
}
$setup->endSetup();
}
}
Saya menggunakan skrip upgrade sebagai contoh, tetapi Anda dapat menggunakan inskrip untuk melakukan fungsi yang sama juga.
Masukkan atribut saat melakukan pemesanan
Proses ini sedikit rumit tetapi saya pikir itu masih baik untuk Anda.
Buat file baru app/code/Vendor/Module/etc/extension_attributes.xml
dengan kode berikut:
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
<extension_attributes for="Magento\Quote\Api\Data\AddressInterface">
<attribute code="bank_name" type="string"/>
</extension_attributes>
</config>
Buat file app/code/Vendor/Module/view/frontend/requirejs-config.js
dengan kode berikut:
var config = {
config: {
mixins: {
'Magento_Checkout/js/action/set-shipping-information': {
'Vendor_Module/js/order/set-shipping-information-mixin': true
}
}
}
};
Buat file baru app/code/Vendor/Module/view/frontend/web/js/order/set-shipping-information-mixin.js
dengan kode berikut:
define([
'jquery',
'mage/utils/wrapper',
'Magento_Checkout/js/model/quote'
], function ($, wrapper, quote) {
'use strict';
return function (setShippingInformationAction) {
return wrapper.wrap(setShippingInformationAction, function (originalAction) {
var shippingAddress = quote.shippingAddress();
if (shippingAddress['extension_attributes'] === undefined) {
shippingAddress['extension_attributes'] = {};
}
// you can extract value of extension attribute from any place (in this example I use customAttributes approach)
shippingAddress['extension_attributes']['bank_name'] = jQuery('input[name="bank_name"]').val();
// pass execution to original action ('Magento_Checkout/js/action/set-shipping-information')
return originalAction();
});
};
});
Buat file app/code/Vendor/Module/view/frontend/layout/checkout_index_index.xml
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="before-form" xsi:type="array">
<item name="children" xsi:type="array">
<!-- Your form declaration here -->
<item name="custom-checkout-form-container" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/view/order_attr</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_Module/order_attr</item>
</item>
<item name="children" xsi:type="array">
<item name="custom-checkout-form-fieldset" xsi:type="array">
<!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
<item name="component" xsi:type="string">uiComponent</item>
<!-- the following display area is used in template (see below) -->
<item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
<item name="children" xsi:type="array">
<item name="bank_name" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="config" xsi:type="array">
<!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
<item name="customScope" xsi:type="string">customCheckoutForm</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">customCheckoutForm.bank_name</item>
<item name="label" xsi:type="string">Clearance Full Name</item>
<item name="sortOrder" xsi:type="string">1</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="string">true</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Buat file app/code/Vendor/Module/view/frontend/web/template/order_attr.html
dengan kode berikut:
<div>
<form id="custom-checkout-form" class="form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
<fieldset class="fieldset">
<legend data-bind="i18n: 'Clearance Info'"></legend>
<div><!-- ko i18n: 'This is clearance description' --><!-- /ko --></div>
<!-- ko foreach: getRegion('custom-checkout-form-fields') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</fieldset>
</form>
</div>
Buat file app/code/Vendor/Module/view/frontend/web/js/view/order_attr.js
dengan kode berikut:
define([
'Magento_Ui/js/form/form'
], function(Component) {
'use strict';
return Component.extend({
initialize: function () {
this._super();
// component initialization logic
return this;
},
/**
* Form submit handler
*
* This method can have any name.
*/
onSubmit: function() {
// trigger form validation
this.source.set('params.invalid', false);
this.source.trigger('customCheckoutForm.data.validate');
// verify that form data is valid
if (!this.source.get('params.invalid')) {
// data is retrieved from data provider by value of the customScope property
var formData = this.source.get('customCheckoutForm');
// do something with form data
console.dir(formData);
}
}
});
});
Buat file app/code/Vendor/Module/etc/di.xml
dengan kode berikut:
<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Model\ShippingInformationManagement">
<plugin name="save-in-quote" type="Vendor\Module\Plugin\AddOrderAttrToQuote" sortOrder="10"/>
</type>
</config>
Buat file baru app/code/Vendor/Module/Plugin/AddOrderAttrToQuote.php
dengan kode berikut:
<?php
namespace Vendor\Module\Plugin;
class AddOrderAttrToQuote
{
protected $quoteRepository;
public function __construct(
\Magento\Quote\Model\QuoteRepository $quoteRepository
) {
$this->quoteRepository = $quoteRepository;
}
/**
* @param \Magento\Checkout\Model\ShippingInformationManagement $subject
* @param $cartId
* @param \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
*/
public function beforeSaveAddressInformation(
\Magento\Checkout\Model\ShippingInformationManagement $subject,
$cartId,
\Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
) {
$extAttributes = $addressInformation->getShippingAddress()->getExtensionAttributes();
$bank_name = $extAttributes->getBankName();
$quote = $this->quoteRepository->getActive($cartId);
$quote->setBankName($bank_name);
$extAttributes->setBankName("");
}
}
Buat file baru app/code/Cleargo/NewAttributes/etc/events.xml
<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
<event name="sales_model_service_quote_submit_before">
<observer name="handle_order_attrs" instance="Vendor\Module\Observer\HandleOrderAttrs" />
</event>
</config>
Buat file baru app/code/Vendor/Module/Observer/HandleOrderAttrs.php
dengan kode berikut:
<?php
namespace Vendor\Module\Observer;
use \Magento\Framework\Event\ObserverInterface;
use \Magento\Framework\Event\Observer;
class HandleOrderAttrs implements ObserverInterface
{
public function execute(Observer $observer)
{
$order = $observer->getOrder();
$quote = $observer->getQuote();
//Load the values
$bank_name = $quote->getData("bank_name");
$order->setData('bank_name', $bank_name)
->save();
}
}
Baca Atribut Pesanan dalam modul pembayaran
Untuk kasus 3, sepertinya itu dari modul pihak ke-3. Bagaimanapun, jika Anda ingin mendapatkan nilai bank_name
dari pesanan, Anda dapat menggunakan kode berikut:
$order->getData('bank_name')
Kesimpulan
Cukup banyak pekerjaan yang harus dilakukan untuk atribut pesanan, tetapi begitu Anda mendapatkan titik kunci, semuanya akan berjalan lancar.