I am trying to convert a static form in checkout_index_index.xml to a dynamic one using jsLayout.
Here is my original xml:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="custom-checkout-form" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">custom-checkout-form</item>
<item name="children" xsi:type="array">
<item name="custom-checkout-form-container" xsi:type="array">
<item name="sortOrder" xsi:type="string">0</item>
<!-- get the js file in web>js>view/checkout -->
<item name="component" xsi:type="string">VENDOR_MODULE/js/view/checkout/custom-checkout-form</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="config" xsi:type="array">
<!-- get the js file in web>template>checkout -->
<item name="template" xsi:type="string">VENDOR_MODULE/checkout/custom-checkout-form</item>
</item>
<item name="children" xsi:type="array">
<item name="custom-checkout-form-fieldset" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
<item name="children" xsi:type="array">
<item name="checkout_buyer_name" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="config" xsi:type="array">
<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.checkout_buyer_name</item>
<item name="label" xsi:type="string">Buyer name</item>
<item name="sortOrder" xsi:type="string">1</item>
</item>
<item name="checkout_buyer_email" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="config" xsi:type="array">
<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/email</item>
<item name="tooltip" xsi:type="array">
<item name="description" xsi:type="string" translate="true">We will send an order confirmation to this email address</item>
</item>
</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">customCheckoutForm.checkout_buyer_email</item>
<item name="label" xsi:type="string">Buyer email</item>
<item name="sortOrder" xsi:type="string">2</item>
<item name="validation" xsi:type="array">
<item name="validate-email" xsi:type="boolean">true</item>
</item>
</item>
<item name="checkout_purchase_order_no" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="config" xsi:type="array">
<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="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">customCheckoutForm.checkout_purchase_order_no</item>
<item name="label" xsi:type="string">Purchase order no.</item>
<item name="sortOrder" xsi:type="string">3</item>
</item>
<item name="checkout_goods_mark" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="config" xsi:type="array">
<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.checkout_goods_mark</item>
<item name="label" xsi:type="string">Goods mark</item>
<item name="sortOrder" xsi:type="string">4</item>
</item>
<item name="checkout_building_address" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/select</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/select</item>
</item>
<item name="options" xsi:type="array">
<item name="0" xsi:type="array">
<item name="label" xsi:type="string">Please select value</item>
<item name="value" xsi:type="string"></item>
</item>
<item name="1" xsi:type="array">
<item name="label" xsi:type="string">Option 1</item>
<item name="value" xsi:type="string">value_1</item>
</item>
<item name="2" xsi:type="array">
<item name="label" xsi:type="string">Option 2</item>
<item name="value" xsi:type="string">value_2</item>
</item>
</item>
<item name="value" xsi:type="string">Please Select Value</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">customCheckoutForm.checkout_building_address</item>
<item name="label" xsi:type="string">Select Building Address</item>
<item name="sortOrder" xsi:type="string">2</item>
</item>
<item name="checkout_comment" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="config" xsi:type="array">
<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/textarea</item>
<item name="cols" xsi:type="string">15</item>
<item name="rows" xsi:type="string">2</item>
</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">customCheckoutForm.checkout_comment</item>
<item name="label" xsi:type="string">Comment</item>
<item name="sortOrder" xsi:type="string">5</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
There is a select box I need to dynamically create. So I am trying to convert this static form to jsLayout. This worked as a test:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="config" xsi:type="array">
<item name="shippingTemplate" xsi:type="string">VENDOR_MODULE/shipping</item>
</item>
<item name="children" xsi:type="array">
<item name="custom-shipping-method-fields" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">custom-shipping-method-fields</item>
<item name="children" xsi:type="array">
</item>
</item><!-- /custom-shipping-method -->
</item><!-- /children -->
</item><!-- /shippingAddress -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Along with LayoutProcessorPlugin.php
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['custom-shipping-method-fields']['children']['checkout_buyer_name'] = [
'component' => "Magento_Ui/js/form/element/abstract",
'config' => [
'customScope' => 'customCheckoutForm',
'template' => 'ui/form/field',
'elementTmpl' => "ui/form/element/input",
'id' => "checkout_buyer_name"
],
'dataScope' => 'customCheckoutForm.[checkout_buyer_name]',
'label' => "Buyer Name New",
'provider' => 'checkoutProvider',
'visible' => true,
'validation' => $validation,
'sortOrder' => 2,
'id' => 'custom_checkout_form[checkout_buyer_name]'
];
And the test displays (it works) at checkout using this:
<!-- Custom form -->
<li id="opc-custom-checkout-form"
data-bind="fadeVisible: visible()">
<div class="custom-checkout-form">
<div class="step-title"
translate="'Other information'"
data-role="title" />
<!-- ko foreach: getRegion('custom-shipping-method-fields') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
My problem happens when I try to convert the whole XML to jsLayout:
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['custom-checkout-form']['children']['custom-checkout-form-container']['children']['custom-shipping-method-fields']['children']['checkout_buyer_name'] = [
'component' => "Magento_Ui/js/form/element/abstract",
'config' => [
'customScope' => 'customCheckoutForm',
'template' => 'ui/form/field',
'elementTmpl' => "ui/form/element/input",
'id' => "checkout_buyer_name"
],
'dataScope' => 'customCheckoutForm.[checkout_buyer_name]',
'label' => "Buyer Name New",
'provider' => 'checkoutProvider',
'visible' => true,
'validation' => $validation,
'sortOrder' => 2,
'id' => 'custom_checkout_form[checkout_buyer_name]'
];
My new XML:
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="custom-checkout-form" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">custom-checkout-form</item>
<item name="children" xsi:type="array">
<item name="custom-checkout-form-container" xsi:type="array">
<item name="sortOrder" xsi:type="string">0</item>
<!-- get the js file in web>js>view/checkout -->
<item name="component" xsi:type="string">VENDOR_MODULE/js/view/checkout/custom-checkout-form</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="config" xsi:type="array">
<item name="shippingTemplate" xsi:type="string">VENDOR_MODULE/shipping</item>
</item>
<item name="children" xsi:type="array">
<item name="custom-shipping-method-fields" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">custom-shipping-method-fields</item>
<item name="children" xsi:type="array">
</item>
</item><!-- /custom-shipping-method -->
</item><!-- /children -->
</item><!-- custom-checkout-form-container -->
</item><!-- /children -->
</item><!-- /custom-checkout-form -->
</item><!-- /children -->
</item><!-- /shippingAddress -->
I am following the format in jsLayout:
['shippingAddress']['children']['custom-checkout-form']['children']['custom-checkout-form-container']['children']['custom-shipping-method-fields']['children']['checkout_buyer_name']
For some reason the fields won't display. What I have above in jsLayout matched the XML format but the fields don't show. The field won't appear at all like it does in my test. The XML and LayoutProcessor is the only thing that changed. What am I missing?
Thanks!
