需要在自定义付款方式中添加文本字段


8

ACL是我的自定义付款方式,现在我想在Checkout页面的ACL Option下添加自定义字段。

PFA

在此处输入图片说明


是否创建了“ bank_name”属性?如果是,您创建了哪种类型的属性?
PY Yick

不,我尚未创建属性
-Akash

您希望“ bank_name”具有哪种属性类型?客户还是客户地址?
PY Yick

用户只需填写银行信息,该付款方式的帐号,管理员即可看到该信息。而已。您能解释一下如何创建此功能的流程吗?
阿卡什

同一位客户的每个“ bank_name”订单都不同?
PY Yick

Answers:


2

要回答您的问题,分为三个部分:

  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

@Akash您找到任何解决方案了吗?同样的
Tirth Patel 19-3-27
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.