Необходимо добавить текстовое поле в пользовательском способе оплаты


8

ACL - это мой собственный способ оплаты, теперь я хочу добавить настраиваемое поле под опцией ACL на странице оформления заказа.

PFA

введите описание изображения здесь


Атрибут "имя_банка" создан? Если да, то какой тип атрибутов вы создали?
PY Yick

Нет, я не создал атрибут
Акаш

Какой тип атрибута вы хотите иметь для "bank_name"? Клиент или адрес клиента?
PY Yick

пользователь просто заполняет банковскую информацию, номер счета для этого метода оплаты, и администратор может видеть эту информацию. Вот и все. Можете ли вы объяснить поток, как создать эту функциональность?
Акаш

Каждый заказ отличается для "bank_name" от одного и того же клиента?
PY Yick

Ответы:


2

Чтобы ответить на ваш вопрос, есть 3 части:

  1. Создать атрибут заказа
  2. Вставить атрибут при оформлении заказа
  3. Прочтите Атрибут заказа в платежном модуле

Создать атрибут заказа

Для создания атрибута заказа вы ДОЛЖНЫ использовать скрипт установки со следующим кодом:

<?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();
    }
}

Я использовал скрипт обновления в качестве примера, но вы также можете использовать inscript для выполнения той же функции.

Вставить атрибут при оформлении заказа

Этот процесс немного сложен, но я думаю, что это все еще хорошо для вас.

  • Создайте новый файл app/code/Vendor/Module/etc/extension_attributes.xmlсо следующим кодом:

    <?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>
  • Создайте файл app/code/Vendor/Module/view/frontend/requirejs-config.jsсо следующим кодом:

    var config = {
        config: {
            mixins: {
                'Magento_Checkout/js/action/set-shipping-information': {
                    'Vendor_Module/js/order/set-shipping-information-mixin': true
                }
            }
        }
    };
  • Создайте новый файл app/code/Vendor/Module/view/frontend/web/js/order/set-shipping-information-mixin.jsсо следующим кодом:

    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();
            });
        };
    });
  • Создать файл 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>
  • Создайте файл app/code/Vendor/Module/view/frontend/web/template/order_attr.htmlсо следующим кодом:

    <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>
  • Создайте файл app/code/Vendor/Module/view/frontend/web/js/view/order_attr.jsсо следующим кодом:

    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);
                }
            }
        });
    });
  • Создайте файл app/code/Vendor/Module/etc/di.xmlсо следующим кодом:

    <?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>
  • Создайте новый файл app/code/Vendor/Module/Plugin/AddOrderAttrToQuote.phpсо следующим кодом:

    <?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("");
        }
    }
  • Создать новый файл 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>
  • Создайте новый файл app/code/Vendor/Module/Observer/HandleOrderAttrs.phpсо следующим кодом:

    <?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();
        }
    }

Прочтите Атрибут заказа в платежном модуле

Для случая 3, кажется, это от стороннего модуля. В любом случае, если вы хотите получить значение bank_nameиз порядка, вы можете использовать следующий код:

$order->getData('bank_name')

вывод представляется

Для атрибута заказа достаточно много работы, но как только вы поймете ключевой момент, все пройдет гладко.


Спасибо, Вы добавили пользовательскую вкладку в информацию о доставке, но я хочу добавить ниже мой собственный способ оплаты. Когда я нажимаю на способ оплаты, это показывает
Akash

@ Акаш, вы нашли какое-нибудь решение? за то же самое
Тирт Патель
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.