Perlu menambahkan bidang teks dalam metode pembayaran khusus

8

ACL adalah metode pembayaran khusus saya sekarang saya ingin menambahkan bidang khusus di bawah Opsi ACL di Halaman Checkout.

PFA

masukkan deskripsi gambar di sini

magento2 payment-methods Akash
sumber
Apakah atribut "bank_name" dibuat? Jika ya, atribut jenis apa yang Anda buat?
PY Yick
Tidak, saya belum membuat atribut
Akash
Jenis atribut mana yang ingin Anda miliki untuk "bank_name"? Pelanggan atau alamat pelanggan?
PY Yick
pengguna hanya mengisi info bank, nomor rekening untuk metode pembayaran itu dan admin dapat melihat informasi itu. Itu dia. Bisakah Anda menjelaskan alur cara membuat fungsi ini?
Akash
Setiap pesanan berbeda untuk "nama bank" dari pelanggan yang sama?
PY Yick

Jawaban:

2

Untuk menjawab pertanyaan Anda, ada 3 bagian:

  1. Buat Atribut Pesanan
  2. Masukkan atribut saat melakukan pemesanan
  3. Baca Atribut Pesanan dalam modul pembayaran

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.xmldengan 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.jsdengan 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.jsdengan 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.htmldengan 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.jsdengan 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.xmldengan 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.phpdengan 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.phpdengan 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_namedari 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.

PY Yick
sumber
Terima kasih, Anda telah menambahkan tab khusus dalam informasi pengiriman tetapi saya ingin menambahkan di bawah metode pembayaran khusus saya. Ketika saya mengklik pada metode pembayaran maka itu menunjukkan
Akash
@Akash apakah Anda menemukan solusi apa pun. untuk hal yang sama
Tirth Patel