Home

Awesome

JS Layout Parser

Lightweight standalone PHP library that was created to make work with $jsLayout in Magento 2 less spaghetti, and more object-oriented.

Installation

composer require pragmatic-modules/jslayout-parser

Usage On Checkout

Add new layout processor by implementing LayoutProcessorInterface, and inject it into layoutProcessors array.

File: etc/frontend/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\Onepage">
        <arguments>
            <argument name="layoutProcessors" xsi:type="array">
                <item name="example_processor" xsi:type="object">Pragmatic\Example\Block\Checkout\ExampleProcessor
                </item>
            </argument>
        </arguments>
    </type>
</config>

Inject Pragmatic\JsLayoutParser\Model\JsLayoutParser into processor and parse $jsLayout for selected root component.

You can find a list of available component methods below.

<?php
declare(strict_types=1);

namespace Pragmatic\Example\Block\Checkout;

use Magento\Checkout\Block\Checkout\LayoutProcessorInterface;
use Pragmatic\JsLayoutParser\Api\ComponentInterface;
use Pragmatic\JsLayoutParser\Model\JsLayoutParser;

class ExampleProcessor implements LayoutProcessorInterface
{
    /** @var JsLayoutParser */
    private $jsLayoutParser;

    public function __construct(JsLayoutParser $jsLayoutParser)
    {
        $this->jsLayoutParser = $jsLayoutParser;
    }

    public function process($jsLayout) : array
    {
        /** @var ComponentInterface $component */
        $component = $this->jsLayoutParser->parse($jsLayout, 'checkout');

        if ($shippingAddress = $component->getNestedChild('steps.shipping-step.shippingAddress')) {
            $shippingAddress->setComponent('Vendor_Module/js/view/shipping');
            $shippingAddress->setIsVisible(false);
        }
      
        $jsLayout['components']['checkout'] = $component->asArray();

        return $jsLayout;
    }
}

JsLayoutParser Methods

parse( array $jsLayout, string $rootComponent )

Parse $jsLayout into nested component objects tree.

$rootComponent is name of the component out of $jsLayout['components'] that will be used as a base path for any operations.

Returns root Component object.


Component Methods

asArray( )

Recursively converts component object and all of its nested children into a plain array that can be returned through $jsLayout.

Example:

$component = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if ($shippingAddress = $component->getNestedChild('steps.shipping-step.shippingAddress')) {
    $shippingAddress->setComponent('Vendor_Module/js/view/shipping');
    $shippingAddress->setIsVisible(false);
}

$jsLayout['components']['checkout'] = $component->asArray();

scroll up️


getComponentName( )

Get component name in layout.

Returns string.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');
$componentName = $checkout->getComponentName(); // returns 'checkout'

jsLayout equivalent:

In associative $jsLayout array components are stored as nested key-value pairs, where value are arrays with nested children. It is not possible to determine parent's key within child scope. The same array might be used in multiple places within jsLayout, so recursive searching is not an option.

In other words, you must know the name before retrieving component:

$componentName = 'checkout';
$checkout = $jsLayout['components'][$componentName];

and once you get into child scope, there is no way to dynamically tell what's the parent key:

$steps = $jsLayout['components']['checkout']['steps'];
// $steps tells you nothing about parent

The closest you can get to the parser behaviour is by doing:

$checkout = [
    'componentName' => 'checkout', 
    'data' => $jsLayout['components']['checkout']
];
$componentName = $checkout['componentName'] // 'checkout'

scroll up️


getParent( )

Get parent component.

Returns ComponentInterface if parent exists.

Returns NULL if parent does not exist.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

$parent = $checkout->getParent(); // returns null

if($steps = $checkout->getChild('steps')) {
    $parent = $steps->getParent(); // returns $checkout object
}

jsLayout equivalent:

$checkout = $jsLayout['components']['checkout'];
$parent = null;

if(isset($checkout['steps'])) {
    $steps = $checkout['steps'];
    $parent = $checkout;
}

scroll up️


remove( )

Remove component with all descendants from the component tree.

This method has no return value.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($steps = $checkout->getChild('steps')) {
    $steps->remove();
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['steps'])) {
    unset($jsLayout['components']['checkout']['steps']);
}

scroll up️


hasChild ( string $componentName )

Check if component has a child with a given name.

Returns bool.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($checkout->hasChild('steps')) {
    // do something
}

if($checkout->hasChild('non-existing-child')) {
    // this won't execute
}

jsLayout equivalent:

if(isset($jsLayout['component']['checkout']['children']['steps'])) {
    // do something
}

if(isset($jsLayout['component']['checkout']['children']['non-existing-child'])) {
    // this won't execute
}

scroll up️


getChild( string $componentName )

Get component child.

Returns ComponentInterface if child exists.

Returns NULL if child does not exist.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($child = $checkout->getChild('steps')) {
    // do something with child
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']['steps'])) {
    $child = $jsLayout['components']['checkout']['children']['steps'];
    // do something with child
}

scroll up️


addChild( ComponentInterface $component )

Add new component as a child of the current component object.

This method throws Exception if component with the same name is already a child of current component.

Returns self on success.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

/** @var \Pragmatic\JsLayoutParser\Model\ComponentFactory */
$child = $this->componentFactory->create([
    'componentName' => 'example',
    'data' => [
        'component' => 'Magento_Ui/js/form/element/abstract',
        'label' => 'Example component',
        'provider' => 'checkoutProvider'
    ]   
]);

if(!$checkout->hasChild('example')) {
    $checkout->addChild($child);
}

jsLayout equivalent:

if(!isset($jsLayout['components']['checkout']['children']['example'])) {
    $jsLayout['components']['checkout']['children']['example'] = [
        'component' => 'Magento_Ui/js/form/element/abstract',
        'label' => 'Example component',
        'provider' => 'checkoutProvider'
    ];
}

scroll up️


removeChild ( string $componentName )

Remove child from the component.

This method throws Exception if child does not exist within component.

This method has no return value.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($checkout->hasChild('steps')) {
    $checkout->removeChild('steps');
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']['steps'])) {
    unset($jsLayout['components']['checkout']['children']['steps']);
}

scroll up️


hasNestedChild ( string $path, string $childSeparator = '.' )

Check if component has a nested child with a given path.

By default, children are separated by a dot. This behaviour can be adjusted by passing custom separator as a second argument.

Returns bool.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($checkout->hasNestedChild('steps.shipping-step.shippingAddress')) {
    // do something
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress'])
) {
    // do something
}

scroll up️


getNestedChild ( string $componentName, string $childSeparator = '.' )

Get component nested child.

By default, children are separated by a dot. This behaviour can be adjusted by passing custom separator as a second argument.

Returns ComponentInterface if nested child exists.

Returns NULL if nested child does not exist.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($shippingAddress = $checkout->getNestedChild('steps.shipping-step.shippingAddress')) {
    // do something with $shippingAddress
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']
)) {
    $shippingAddress = $jsLayout['components']['checkout']['children']
        ['steps']['children']
        ['shipping-step']['children']
        ['shippingAddress'];
    // do something with $shippingAddress
}

scroll up️


moveNestedChild ( string $sourcePath, string $destinationPath, string $childSeparator = '.' )

Move nested child from source to destination.

By default, children are separated by a dot. This behaviour can be adjusted by passing custom separator as a third argument.

This method throws Exception if source or destination does not exist.

This method has no return value.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($checkout->hasNestedChild('steps.shipping-step.shippingAddress') && 
   $checkout->hasChild('steps')
) {
    $checkout->moveNestedChild('steps.shipping-step.shippingAddress', 'steps');
}

$checkout->hasNestedChild('steps.shipping-step.shippingAddress'); // false
$checkout->hasNestedChild('steps.shippingAddress'); // true

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']
) && isset($jsLayout['components']['checkout']['children']['steps'])
) {
    $steps = &$jsLayout['components']['checkout']['children']
    ['steps']['children'];
    $shippingAddress = $steps['shipping-step']['children']['shippingAddress'];
    unset($steps['shipping-step']['children']['shippingAddress']);
    $steps['shippingAddress'] = $shippingAddress;
}

isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']
); // false

isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shippingAddress']
); // true

scroll up️


removeNestedChild ( string $path, string string $childSeparator = '.' )

Remove nested child by path.

By default, children are separated by a dot. This behaviour can be adjusted by passing custom separator as a third argument.

This method throws Exception if source or destination does not exist.

This method has no return value.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($checkout->hasNestedChild('steps.shipping-step.shippingAddress')) {
    $checkout->removeNestedChild('steps.shipping-step.shippingAddress');
}
$checkout->hasNestedChild('steps.shipping-step.shippingAddress'); // false

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']
)) {
    unset($steps['shipping-step']['children']['shippingAddress']);
}

isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']
); // false

scroll up️


hasChildren ( )

Check if component has children.

Returns true if at least one child exists, returns false otherwise.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

$checkout->hasChildren() // returns true

jsLayout equivalent:

(isset($jsLayout['components']['checkout']['children']) && 
count($jsLayout['components']['checkout']['children']) > 0); // returns true

scroll up️


getChildren ( )

Get component children.

Returns array of components.

Returns empty array if component has no children.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

$checkout->getChildren(); // returns array with 'steps' component

jsLayout equivalent:

$jsLayout['components']['checkout']['children'] ?? [] // returns array with 'steps' component

scroll up️


isChildOf ( ComponentInterface $component )

Check if component is child of given component.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

$steps = $checkout->getChild('steps');
$steps->isChildOf($checkout); // returns true

jsLayout equivalent:

In associative $jsLayout array components are stored as nested key-value pairs, where value are arrays with nested children. It is not possible to determine parent within child scope.

scroll up️


getComponent ( )

Get UI Component of given component object.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($shippingAddress = $checkout->getNestedChild('steps.shipping-step.shippingAddress')) {
    $component = $shippingAddress->getComponent(); // returns 'Magento_Checkout/js/view/shipping'
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']
)) {
    $shippingAddress = $jsLayout['components']['checkout']['children']
        ['steps']['children']
        ['shipping-step']['children']
        ['shippingAddress'];
    $component = $shippingAddress['component'] // 'Magento_Checkout/js/view/shipping'
}

scroll up️


setComponent ( string $component )

Set UI Component of given component object.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($shippingAddress = $checkout->getNestedChild('steps.shipping-step.shippingAddress')) {
    $shippingAddress->setComponent('Vendor_Module/js/view/shipping')
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']
)) {
    $shippingAddress = &$jsLayout['components']['checkout']['children']
        ['steps']['children']
        ['shipping-step']['children']
        ['shippingAddress'];
    $shippingAddress['component'] = 'Vendor_Module/js/view/shipping';
}

scroll up️


getConfig ( )

Get component configuration.

Returns array.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($regionId = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.region_id')) {
    $config = $regionId->getConfig();
    /** $config is an array:
        [
            'customScope' => 'shippingAddress',
            'template' => 'ui/form/field',
            'elementTmpl' => 'ui/form/element/select',
            'customEntry' => 'shippingAddress.region',
        ]
    */
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['region_id']
)) {
    $regionId = &$jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['region_id'];

    $config = $regionId['config'];
}

scroll up️


setConfig ( array $config, bool $replace = false )

Set component configuration.

Configurations are merged together by default. Previous values remain intact except the ones that have the same keys as $config array.

$config values have higher priority and can be used to replace parts of existing configuration.

Entire component configuration can be overwritten by $config by using $replace = true.

Returns self.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($regionId = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.region_id')) {
    $config = $shippingAddress->setConfig([
        'template' => 'Vendor_Module/form/field'
    ]);
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['region_id']
)) {
    $regionId = &$jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['region_id'];

    $regionId['config']['template'] = 'Vendor_Module/form/field';
}

scroll up️


getDataScope ( )

Get component data scope.

Returns string or null.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($regionId = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.region_id')) {
    $dataScope = $regionId->getDataScope(); // returns 'shippingAddress.region_id'
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['region_id']
)) {
    $dataScope = $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['region_id']['dataScope'] ?? null; // 'shippingAddress.region_id'
}

scroll up️


setDataScope ( string $dataScope )

Set component data scope.

Returns self.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($regionId = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.region_id')) {
    $regionId->setDataScope('shippingAddress.some_region');
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['region_id']
)) {
    $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['region_id']['dataScope'] = 'shippingAddress.some_region';
}

scroll up️


getDisplayArea ( )

Get component display area.

Returns string or null.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($shippingFieldset = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset')) {
    $displayArea = $shippingFieldset->getDisplayArea(); // returns 'additional-fieldsets'
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']
)) {
    $displayArea = $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['displayArea'] ?? null; // 'additional-fieldsets'
}

scroll up️


setDisplayArea ( string $displayArea )

Set component display area.

Returns self.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($shippingFieldset = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset')) {
    $shippingFieldset->setDisplayArea('summary');
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']
)) {
    $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['displayArea'] = 'summary';
}

scroll up️


getLabel ( )

Get component label.

Returns string, Magento\Framework\Phrase, or null.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($postcode = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.postcode')) {
    $label = $postcode->getLabel(); // returns 'Zip/Postal Code'
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']
)) {
    $label = $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']['label'] ?? null;  // 'Zip/Postal Code'
}

scroll up️


setLabel ( $label )

Set component label.

$label should be either string, Magento\Framework\Phrase, or null.

Returns self.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($postcode = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.postcode')) {
    $label = $postcode->setLabel(__('ZIP'));
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']
)) {
    $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']['label'] = __('ZIP');
}

scroll up️


getProvider ( )

Get component provider.

Returns string or null.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($postcode = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.postcode')) {
    $provider = $postcode->getProvider(); // returns 'checkoutProvider'
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']
)) {
    $provider = $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']['provider'] ?? null; // 'checkoutProvider'
}

scroll up️


setProvider ( string $provider )

Set component provider.

Returns self.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($postcode = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.postcode')) {
    $postcode->setProvider('vendorProvider');
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']
)) {
    $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']['provider'] = 'vendorProvider';
}

scroll up️


getSortOrder ( )

Get component sort order.

Returns string, or null.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($postcode = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.postcode')) {
    $sortOrder = $postcode->getSortOrder(); // returns '110'
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']
)) {
    $sortOrder = $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']['sortOrder'] ?? null; // '110'
}

scroll up️


setSortOrder ( string $sortOrder )

Set component sort order.

Returns self.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($postcode = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.postcode')) {
    $postcode->setSortOrder('150');
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']
)) {
    $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']['sortOrder'] = '150';
}

scroll up️


getValidation ( )

Get component validation rules.

Returns array or null.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($postcode = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.postcode')) {
    $validation = $postcode->getValidation(); // returns ['required-entry' => true]
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']
)) {
    $validation = $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']['validation'] ?? null;  // ['required-entry' => true]
}

scroll up️


setValidation ( array $validation )

Set component validation rules.

Returns self.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($postcode = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.postcode')) {
    $postcode->setValidation([
        'required-entry' => true,
        'max_text_length' => 6
    ]);
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']
)) {
    $validation = $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']['validation'] = [
        'required-entry' => true,
        'max_text_length' => 6
    ];
}

scroll up️


getFilterBy ( )

Get component filter by configuration.

Returns array or null.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($regionId = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.region_id')) {
    $filterBy = $regionId->getFilterBy(); 
// returns 
//    [
//        'target' => '${ $.provider }:${ $.parentScope }.country_id',
//        'field' => 'country_id',
//    ]
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['region_id']
)) {
    $filterBy = $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['region_id']['filterBy'] ?? null;
}

scroll up️


setFilterBy ( ?array $filterBy )

Set component filter by configuration.

Returns self.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($regionId = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.region_id')) {
    $regionId->setFilterBy(null); 
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['region_id']
)) {
    $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['region_id']['filterBy'] = null;
}

scroll up️


isVisible ( )

Get component visibility.

Returns bool.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($postcode = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.postcode')) {
    $isVisible = $postcode->isVisible(); // returns true
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']
)) {
    $isVisible = $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']['visible'] ?? false; // true
}

scroll up️


setIsVisible ( bool $visible )

Set component visibility.

Returns self.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($postcode = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.postcode')) {
    $postcode->setIsVisible(false);
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']
)) {
    $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['postcode']['visible'] = false;
}

scroll up️


isRequired ( )

Get component required flag.

Returns bool.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($street = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.street')) {
    $isRequired = $street->isRequired(); // returns true
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['street']
)) {
    $isRequired = $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['street']['required'] ?? false; // true
}

scroll up️


setIsRequired ( bool $required )

Set component required flag.

Returns self.

Example:

$checkout = $this->jsLayoutParser->parse($jsLayout, 'checkout');

if($street = $checkout->getNestedChild('steps.shipping-step.shippingAddress.shipping-address-fieldset.street')) {
    $street->setIsRequired(false);
}

jsLayout equivalent:

if(isset($jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['street']
)) {
    $jsLayout['components']['checkout']['children']
    ['steps']['children']
    ['shipping-step']['children']
    ['shippingAddress']['children']
    ['shipping-address-fieldset']['children']
    ['street']['required'] = false;
}

scroll up️