How is a new address form popup implemented on the frontend checkout screen in the shipping section?

dmitry_fedyuk · March 30, 2016, 5:49pm

The «+ New Address» button:

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/view/frontend/web/template/shipping.html#L27-L36


<!-- Address form pop up -->
<!-- ko if: (!isFormInline) -->
<button type="button"
        data-bind="click: showFormPopUp, visible: !isNewAddressAdded()"
        class="action action-show-popup">
    <span data-bind="i18n: 'New Address'"></span></button>
<div id="opc-new-shipping-address" data-bind="visible: isFormPopUpVisible()">
    <!-- ko template: 'Magento_Checkout/shipping-address/form' --><!-- /ko -->
</div>
<!-- /ko -->

Click handler:

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/view/frontend/web/js/view/shipping.js#L174-L179


/**
 * Show address form popup
 */
showFormPopUp: function () {
    this.isFormPopUpVisible(true);
},

It switches visibility of the address form through the data-bind:

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/view/frontend/web/template/shipping.html#L33-L35


<div id="opc-new-shipping-address" data-bind="visible: isFormPopUpVisible()">
    <!-- ko template: 'Magento_Checkout/shipping-address/form' --><!-- /ko -->
</div>

Address form popup

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/view/frontend/web/template/shipping-address/form.html#L7-L24


<form class="form form-shipping-address" id="co-shipping-form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
<!-- ko foreach: getRegion('before-fields') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<div id="shipping-new-address-form" class="fieldset address">
    <!-- ko foreach: getRegion('additional-fieldsets') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
    <!-- ko if: (isCustomerLoggedIn) -->
    <div class="field choice" data-bind="visible: !isFormInline">
        <input type="checkbox" class="checkbox" id="shipping-save-in-address-book" data-bind="checked: saveInAddressBook" />
        <label class="label" for="shipping-save-in-address-book">
            <span data-bind="i18n: 'Save in address book'"></span>
        </label>
    </div>
    <!-- /ko -->
</div>
</form>

The address fields are rendered into the additional-fieldsets display area:

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml#L185-L186


<item name="displayArea" xsi:type="string">additional-fieldsets</item>
<item name="children" xsi:type="array">

The first part of the fields configuration (it has a priority over the second part)

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml#L187-L207


<!-- The following items override configuration of corresponding address attributes -->
<item name="region" xsi:type="array">
    <!-- Make region attribute invisible on frontend. Corresponding input element is created by region_id field -->
    <item name="visible" xsi:type="boolean">false</item>
</item>
<item name="region_id" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/region</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">ui/form/field</item>
        <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
        <item name="customEntry" xsi:type="string">shippingAddress.region</item>
    </item>
    <item name="validation" xsi:type="array">
        <item name="required-entry" xsi:type="boolean">true</item>
    </item>
    <!-- Value of region_id field is filtered by the value of county_id attribute -->
    <item name="filterBy" xsi:type="array">
        <item name="target" xsi:type="string"><![CDATA[${ $.provider }:${ $.parentScope }.country_id]]></item>
        <item name="field" xsi:type="string">country_id</item>
    </item>
</item>

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml#L208-L227


<item name="postcode" xsi:type="array">
    <!-- post-code field has custom UI component -->
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/post-code</item>
    <item name="validation" xsi:type="array">
        <item name="required-entry" xsi:type="string">true</item>
    </item>
</item>
<item name="company" xsi:type="array">
    <item name="validation" xsi:type="array">
        <item name="min_text_length" xsi:type="number">0</item>
    </item>
</item>
<item name="fax" xsi:type="array">
    <item name="validation" xsi:type="array">
        <item name="min_text_length" xsi:type="number">0</item>
    </item>
</item>
<item name="country_id" xsi:type="array">
    <item name="sortOrder" xsi:type="string">115</item>
</item>

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml#L228-L234


<item name="telephone" xsi:type="array">
    <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>

The second part of the fields configuration

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/Block/Checkout/LayoutProcessor.php#L48-L52


/** @var \Magento\Eav\Api\Data\AttributeInterface[] $attributes */
$attributes = $this->attributeMetadataDataProvider->loadAttributesCollection(
    'customer_address',
    'customer_register_address'
);

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/Block/Checkout/LayoutProcessor.php#L54-L64


$elements = [];
foreach ($attributes as $attribute) {
    if ($attribute->getIsUserDefined()) {
        continue;
    }
    $elements[$attribute->getAttributeCode()] = $this->attributeMapper->map($attribute);
    if (isset($elements[$attribute->getAttributeCode()]['label'])) {
        $label = $elements[$attribute->getAttributeCode()]['label'];
        $elements[$attribute->getAttributeCode()]['label'] = __($label);
    }
}

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/Block/Checkout/LayoutProcessor.php#L66-L86


// The following code is a workaround for custom address attributes
if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
    ['payment']['children']
)) {
    if (!isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
        ['payment']['children']['payments-list']['children'])) {
        $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
        ['payment']['children']['payments-list']['children'] = [];
    }


    $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
    ['payment']['children']['payments-list']['children'] =
        array_merge_recursive(
            $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['payments-list']['children'],
            $this->processPaymentConfiguration(
                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['renders']['children'],
                $elements
            )
        );

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/Block/Checkout/LayoutProcessor.php#L87-L102


}


if (isset($jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
    ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']
)) {
    $fields = $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'] = $this->merger->merge(
        $elements,
        'checkoutProvider',
        'shippingAddress',
        $fields
    );
}
return $jsLayout;

\Magento\Customer\Model\AttributeMetadataDataProvider

The provider loads the customer address attributes (the attributes of the customer_address entity type) from the Magento 2 database.

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/Block/Checkout/LayoutProcessor.php#L10-L13


/**
 * @var \Magento\Customer\Model\AttributeMetadataDataProvider
 */
private $attributeMetadataDataProvider;

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/Block/Checkout/LayoutProcessor.php#L26-L26


* @param \Magento\Customer\Model\AttributeMetadataDataProvider $attributeMetadataDataProvider

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/Block/Checkout/LayoutProcessor.php#L31-L31


\Magento\Customer\Model\AttributeMetadataDataProvider $attributeMetadataDataProvider,

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/Block/Checkout/LayoutProcessor.php#L35-L35


$this->attributeMetadataDataProvider = $attributeMetadataDataProvider;

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Customer/Model/AttributeMetadataDataProvider.php#L82-L98


/**
 * Load collection with filters applied
 *
 * @param string $entityType
 * @param string $formCode
 * @return \Magento\Customer\Model\ResourceModel\Form\Attribute\Collection
 */
public function loadAttributesCollection($entityType, $formCode)
{
    $attributesFormCollection = $this->attrFormCollectionFactory->create();
    $attributesFormCollection->setStore($this->storeManager->getStore())
        ->setEntityType($entityType)
        ->addFormCodeFilter($formCode)
        ->setSortOrder();


    return $attributesFormCollection;
}

dmitry_fedyuk · March 30, 2016, 5:53pm