Magento – Magento 2: theme xml for custom phone validation in checkout

checkoutmagento2validation

I've created my own validation rule phonePL in

app/design/frontend/Me/myskin/Magento_Ui/web/js/lib/validation/rules.js

I can activate it in

Magento/Checkout/view/frontend/layout/checkout_index_index.xml

By adding my validation rule in telephone item like so:

<item name="telephone" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="validation" xsi:type="array">
            <item name="phonePL" xsi:type="string">true</item>
        </item>
        <item name="tooltip" xsi:type="array">
            <item name="description" xsi:type="string" translate="true">For delivery questions.</item>
        </item>
    </item>
</item>

But how should I overwrite just this one telephone item in my theme? I dont want to do it directly in magento directory. I've got an xml file:

app/design/frontend/Me/myskin/Magento_Checkout/layout/checkout_index_index.xml

but I don't know what exactly should its structure look like?

Best Answer

This helped me: http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_edit_form.html

The whole xml that worked for me:

<?xml version="1.0"?>
<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">
                                                    <!-- The name of the form the field belongs to -->
                                                    <item name="shipping-address-fieldset" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <!-- the field you are customizing -->
                                                            <item name="telephone" xsi:type="array">
                                                                <item name="validation" xsi:type="array">
                                                                    <item name="phonePL" xsi:type="string">true</item>
                                                                </item>
                                                                <item name="config" xsi:type="array">
                                                                    <item name="tooltip" xsi:type="array">
                                                                        <item name="description" xsi:type="string" translate="true">For delivery questions.</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>
</page>

Related Solutions

Magento 2 – How to Rewrite TierPrice Block

Suppose package:Learning and module: Custom

Module.xml looks like

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Learning_Custom" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

And then create a layout xml following path -> app/code/Learning/Custom/view/frontend/layout/catalog_product_prices.xml

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/layout_generic.xsd">
    <referenceBlock name="render.product.prices">
        <arguments>
            <argument name="default" xsi:type="array">
                <item name="prices" xsi:type="array">
                    <item name="tier_price" xsi:type="array">
                        <item name="render_template" xsi:type="string">Learning_Custom::product/price/tier_prices.phtml
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</layout>

Create template inside your module or copy base template file inside your module path should be -> app/code/Learning/Custom/view/frontend/templates/product/price/tier_prices.phtml

Magento – Checkout page phone number validation

Vendor/Module/registration.php & put below code.

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_Module',
    __DIR__
);

add the module.xml file in Vendor/Module/etc/module.xml & put below code.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
   <module name="Vendor_Module" setup_version="1.0.0"></module>
</config>

Create di.xml file in Vendor/Module/etc/di.xml & put below code.

<?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="validate_telephone_checkout_layoutprocessor" type="Vendor\Module\Plugin\LayoutProcessor" sortOrder="100"/>
    </type> 
</config>

Now, create LayoutProcessor.php in Vendor\Module\Plugin\LayoutProcessor & put below code

<?php
namespace Vendor\Module\Plugin;

class LayoutProcessor
{

    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    ) {
        if (isset($jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']
        )) {

            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']
            ['telephone']['validation'] = ['required-entry' => true, "validate-number"=>true, "min_text_length" =>10, "max_text_length" =>  10 ];
        }

         /* config: checkout/options/display_billing_address_on = payment_method */
        if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['payments-list']['children']
        )) {
            foreach ($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                     ['payment']['children']['payments-list']['children'] as $key => $payment) {
                    /* telephone */
                    $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                    ['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
                    ['telephone']['validation'] = ['required-entry' => true,"validate-number"=>true, "min_text_length" =>10, "max_text_length" =>  10 ];
            }
        }

        return $jsLayout;
    }
}

This will validate phone number on checkout

Best Answer

Related Solutions

Magento 2 – How to Rewrite TierPrice Block

Magento – Checkout page phone number validation

Related Topic