Besoin d'ajouter un champ de texte dans le mode de paiement personnalisé

8

ACL est ma méthode de paiement personnalisée maintenant, je veux ajouter un champ personnalisé sous l'option ACL dans la page de paiement.

PFA

entrez la description de l'image ici

magento2  payment-methods 
— Akash
source
L'attribut "bank_name" est-il créé? Si oui, quel type d'attributs avez-vous créé?
— PY Yick
Non, je n'ai pas créé d'attribut
— Akash
Quel type d'attribut vous souhaitez avoir pour "bank_name"? Client ou adresse client?
— PY Yick
un utilisateur remplit simplement les informations bancaires, le numéro de compte pour ce mode de paiement et l'administrateur peut voir ces informations. C'est ça. Pouvez-vous expliquer comment créer cette fonctionnalité?
— Akash
Chaque commande est différente pour "bank_name" du même client?
— PY Yick

Réponses:

2

Pour répondre à votre question, il y a 3 parties:

  1. Créer un attribut de commande
  2. Insérer un attribut lors de la commande
  3. Lire l'attribut de commande dans le module de paiement

Créer un attribut de commande

Pour créer un attribut de commande, vous DEVEZ utiliser un script de configuration avec le code suivant:

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

J'ai utilisé un script de mise à niveau comme exemple, mais vous pouvez également utiliser un script pour exécuter la même fonction.

Insérer un attribut lors de la commande

Ce processus est un peu délicat, mais je pense qu'il est toujours OK pour vous.

  • Créez un nouveau fichier app/code/Vendor/Module/etc/extension_attributes.xmlavec le code suivant:

    <?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>

  • Créez un fichier app/code/Vendor/Module/view/frontend/requirejs-config.jsavec le code suivant:

    var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/action/set-shipping-information': {
                'Vendor_Module/js/order/set-shipping-information-mixin': true
            }
        }
    }
};

  • Créez un nouveau fichier app/code/Vendor/Module/view/frontend/web/js/order/set-shipping-information-mixin.jsavec le code suivant:

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

  • Créer un fichier 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>

  • Créez un fichier app/code/Vendor/Module/view/frontend/web/template/order_attr.htmlavec le code suivant:

    <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>

  • Créez un fichier app/code/Vendor/Module/view/frontend/web/js/view/order_attr.jsavec le code suivant:

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

  • Créez un fichier app/code/Vendor/Module/etc/di.xmlavec le code suivant:

    <?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>

  • Créez un nouveau fichier app/code/Vendor/Module/Plugin/AddOrderAttrToQuote.phpavec le code suivant:

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

  • Créer un nouveau fichier 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>

  • Créez un nouveau fichier app/code/Vendor/Module/Observer/HandleOrderAttrs.phpavec le code suivant:

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

Lire l'attribut de commande dans le module de paiement

Pour le cas 3, cela semble provenir d'un module tiers. Quoi qu'il en soit, si vous souhaitez obtenir la valeur de la bank_namecommande, vous pouvez utiliser le code suivant:

$order->getData('bank_name')

Conslusion

Il y a beaucoup de travail à faire pour un attribut de commande, mais une fois que vous obtenez le point clé, tout se passera bien.

— PY Yick
source
Merci, vous avez ajouté un onglet personnalisé dans les informations d'expédition, mais je souhaite ajouter ci-dessous mon mode de paiement personnalisé. Lorsque je clique sur le mode de paiement, cela s'affiche
— Akash
@Akash avez-vous trouvé une solution. pour la même chose
— Tirth Patel
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.