0

I am actually working on customization of the checkout form. I need to add a custom input field such as Fiscal Code inside the form.

Via Plugin I added the field, but after Placing Order the reference to this field disappear, how i can save and display it in Sales Order?

This is the code i used

Module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Lutech_CheckoutAdditionalField" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="fiscal_code_plugin" type="Lutech\CheckoutAdditionalField\Plugin\FiscalCodePlugin" sortOrder="1" />
    </type>
    <type name="Magento\Checkout\Model\ShippingInformationManagement">
        <plugin name="fiscal_code_save_plugin" type="Lutech\CheckoutAdditionalField\Plugin\SaveAddressInformation" sortOrder="10"/>
    </type>
</config>

extensions_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="fiscal_code" type="string" />
    </extension_attributes>
</config>

app/code/Lutech/CheckoutAdditionalField/Plugin/FiscalCodePlugin.php

namespace Lutech\CheckoutAdditionalField\Plugin;


use Magento\Checkout\Block\Checkout\LayoutProcessor;

class FiscalCodePlugin {

    public function afterProcess(LayoutProcessor $subject, $result) {
        $customAttributeCode = 'fiscal_code';
        $customField = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
                'id' => 'fiscal_code',
            ],
            'dataScope' => 'shippingAddress.custom_attributes.fiscal_code',
            'label' => 'Fiscal Code',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => ['required-entry' => true],
            'sortOrder' => 150,
            'id' => 'fiscal_code',

        ];

        $result['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'][$customAttributeCode] = $customField;

        return $result;
    }

}

app/code/Lutech/CheckoutAdditionalFiield/Plugin/SaveAddressInformation.php

<?php    
namespace Lutech\CheckoutAdditionalField\Plugin;


class SaveAddressInformation {
    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
    ) {
        $shippingAddress = $addressInformation->getShippingAddress();
        $shippingAddressExtensionAttributes = $shippingAddress->getExtensionAttributes();
        if ($shippingAddressExtensionAttributes) {
            $customField = $shippingAddressExtensionAttributes->getFiscalCode();
            $shippingAddress->setFiscalCode($customField);
        }

    }
}

app/code/Lutech/CheckoutAdditionalField/Setup/InstallData.php

<?php
namespace Lutech\CheckoutAdditionalField\Setup;


use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;

class InstallData implements InstallDataInterface {
    /**
     * Installs data for a module
     *
     * @param ModuleDataSetupInterface $setup
     * @param ModuleContextInterface $context
     * @return void
     */
    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context) {
        $installer = $setup;
        $setup->startSetup();

        $connection = $setup->getConnection();

        $connection->addColumn(
            $installer->getTable('quote_address'),
            'fiscal_code',
            [
                'type' => \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
                'nullable' => true,
                'default' => NULL,
                'length' => 255,
                'comment' => 'Fiscal Code for address'
            ]
        );
        $connection->addColumn(
            $installer->getTable('sales_order_address'),
            'fiscal_code',
            [
                'type' => \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
                'nullable' => true,
                'default' => NULL,
                'length' => 255,
                'comment' => 'Fiscal Code for address'
            ]
        );
        $installer->endSetup();
    }


}

app/code/Lutech/CheckoutAdditionalField/view/frontend/requirejs-config.js

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

app/code/Lutech/CheckoutAdditionalField/view/frontend/web/js/action/set-shipping-information.js

/*jshint browser:true jquery:true*/
/*global alert*/
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'] = {};
            }

            shippingAddress['extension_attributes']['fiscal_code'] = shippingAddress.customAttributes['fiscal_code'];
            // pass execution to original action ('Magento_Checkout/js/action/set-shipping-information')
            return originalAction();
        });
    };
});

I have noticed one thing with PHPStorm.

In SaveAddressInformation.php $shippingAddressExtensionAttributes->getFiscalCode() will be autocompleted, instead of $shippingAddress->setFiscalCode($customField)

Additional Information on my Magento 2 installation

Version used: 2.2.4

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.