- Notifications
You must be signed in to change notification settings - Fork 9.4k
Closed
Labels
Area: FrontendComponent: CheckoutFixed in 2.4.xThe issue has been fixed in 2.4-develop branchThe issue has been fixed in 2.4-develop branchIssue: Clear DescriptionGate 2 Passed. Manual verification of the issue description passedGate 2 Passed. Manual verification of the issue description passedIssue: Format is validGate 1 Passed. Automatic verification of issue format passedGate 1 Passed. Automatic verification of issue format passedReproduced on 2.3.xThe issue has been reproduced on latest 2.3 releaseThe issue has been reproduced on latest 2.3 releaseTriage: Dev.ExperienceIssue related to Developer Experience and needs help with Triage to Confirm or Reject itIssue related to Developer Experience and needs help with Triage to Confirm or Reject it
Description
Summary
On checkout shipping step, I reorganized the shipping address form and moved the postCode and countryId fields into a group.
I can't validate the shipping address without overriding the Magento_Checkout:js/view/shipping.js file and particulary the validateShippingInformation().
country = registry.get(this.parentName + '.shippingAddress.shipping-address-fieldset.country_id'),
In my case, I need to change this to :
country = registry.get(this.parentName + '.shippingAddress.shipping-address-fieldset.address_group.country_id'),
Preconditions
- Magento CE 2.3.1
Steps to reproduce
- Move the country_id field of shipping form into checkout.
- validate the shipping address.
Examples (*)
This is the layoutProcessorPlugin for reorganize the shipping and billing form:
use Magento\Checkout\Block\Checkout\LayoutProcessor; /** * Alter Layout Processor and change shipping form */ class LayoutProcessorPlugin { /** * Change jsLayout after process. * * @param LayoutProcessor $subject * @param array $jsLayout * * @return array * * @SuppressWarnings("unused") */ public function afterProcess(LayoutProcessor $subject, $jsLayout): array { $this->updateShippingForm($jsLayout); $this->updateBillingForm($jsLayout); $this->moveBillingForm($jsLayout); return $jsLayout; } /** * Update shipping form. * * @param array $jsLayout */ private function updateShippingForm(&$jsLayout): void { $fieldSet = &$jsLayout['components']['checkout']['children'] ['steps']['children']['shipping-step']['children']['shippingAddress'] ['children']['shipping-address-fieldset']['children']; $this->updateAddressForm($fieldSet, true); } /** * Update billing form. * * @param array $jsLayout */ private function updateBillingForm(&$jsLayout): void { $fieldSet = &$jsLayout['components']['checkout']['children'] ['steps']['children']['billing-step']['children']['payment']['children']['afterMethods']['children'] ['billing-address-form']['children']['form-fields']['children']; $this->updateAddressForm($fieldSet, false); } /** * Update address form. * * @param array $fieldSet * @param bool $isShipping * * @SuppressWarnings(PHPMD) */ private function updateAddressForm(&$fieldSet, bool $isShipping): void { $sort = [ 'prefix' => ['sortOrder' => 5], 'firstname_lastname' => ['sortOrder' => 10], 'company_group' => ['sortOrder' => 20], 'address_group' => ['sortOrder' => 200], 'last_group' => ['sortOrder' => 220], 'region_id' => ['sortOrder' => 210] ]; $fieldSet['email'] = $fieldSet['firstname']; $fieldSet['email']['type'] = 'email'; $fieldSet['email']['label'] = __('Email'); $fieldSet['email']['dataScope'] = 'shippingAddress.email'; $fieldSet['prefix']['component'] = 'Magento_Ui/js/form/element/checkbox-set'; $fieldSet['prefix']['multiple'] = false; $fieldSet['prefix']['config']['template'] = 'ui/form/element/checkbox-set'; $fieldSet['prefix']['config']['elementTpl'] = 'ui/form/components/single/radio'; $fieldSet['firstname']['sortOrder'] = 2; $fieldSet['lastname']['sortOrder'] = 1; $fieldSet['postcode']['validation']['domtom'] = true; unset($fieldSet['telephone']['config']['tooltip']); $groups = []; $groups['firstname_lastname'] = [ 'component' => 'Magento_Ui/js/form/components/group', 'label' => [], 'dataScope' => '', 'provider' => 'checkoutProvider', 'sortOrder' => 1, 'type' => 'group', 'config' => [ 'template' => 'ui/group/group', 'additionalClasses' => 'form__row form__row--two' ], '_children' => ['lastname', 'firstname'] ]; $groups['company_group'] = [ 'component' => 'Magento_Ui/js/form/components/group', 'label' => [], 'dataScope' => '', 'provider' => 'checkoutProvider', 'sortOrder' => 2, 'type' => 'group', 'config' => [ 'template' => 'ui/group/group', 'additionalClasses' => 'form__row form__row--two' ], '_children' => ['company'] ]; $groups['address_group'] = [ 'component' => 'Magento_Ui/js/form/components/group', 'label' => [], 'dataScope' => '', 'provider' => 'checkoutProvider', 'sortOrder' => 2, 'type' => 'group', 'config' => [ 'template' => 'ui/group/group', 'additionalClasses' => 'form__row form__row--three' ], '_children' => ['postcode', 'city', 'country_id'] ]; $groups['last_group'] = [ 'component' => 'Magento_Ui/js/form/components/group', 'label' => [], 'dataScope' => '', 'provider' => 'checkoutProvider', 'sortOrder' => 2, 'type' => 'group', 'config' => [ 'template' => 'ui/group/group', 'additionalClasses' => 'form__row form__row--three' ], '_children' => ['telephone', 'email'] ]; $fieldSet['postcode']['config']['additionalClasses'] = 'field--15'; $fieldSet['postcode']['sortOrder'] = 1; $fieldSet['city']['config']['additionalClasses'] = 'field--30'; $fieldSet['city']['sortOrder'] = 2; $fieldSet['country_id']['config']['additionalClasses'] = 'field--48'; $fieldSet['country_id']['sortOrder'] = 3; $fieldSet['email']['sortOrder'] = 2; $fieldSet['telephone']['sortOrder'] = 1; $fieldSet['street']['children'][0]['label'] = __('Address'); $fieldSet['street']['children'][1]['label'] = __('Additional address'); unset($fieldSet['street']['children'][2]); foreach ($groups as $name => $group) { $group['children'] = []; foreach ($group['_children'] as $childrenName) { $group['children'][$childrenName] = $fieldSet[$childrenName]; unset($fieldSet[$childrenName]); } $fieldSet[$name] = $group; } foreach ($sort as $item => $config) { $fieldSet[$item] = array_merge($fieldSet[$item], $config); } unset($fieldSet['region_id']); } /** * Move billing form. * * @param array $jsLayout */ private function moveBillingForm(&$jsLayout): void { $billingStep = &$jsLayout['components']['checkout']['children']['steps']['children'] ['billing-step']['children']['payment']['children']; $afterMethods = $billingStep['afterMethods']['children']; $billingStep['afterMethods']['children'] = []; unset($afterMethods['discount']); $billingStep['beforeMethods']['children'] = array_merge( $billingStep['beforeMethods']['children'], $afterMethods ); } }
Proposed solution
No idea, but if we could set an alias for the uiRegistry, We could decoupling the view and validation logic.
Metadata
Metadata
Assignees
Labels
Area: FrontendComponent: CheckoutFixed in 2.4.xThe issue has been fixed in 2.4-develop branchThe issue has been fixed in 2.4-develop branchIssue: Clear DescriptionGate 2 Passed. Manual verification of the issue description passedGate 2 Passed. Manual verification of the issue description passedIssue: Format is validGate 1 Passed. Automatic verification of issue format passedGate 1 Passed. Automatic verification of issue format passedReproduced on 2.3.xThe issue has been reproduced on latest 2.3 releaseThe issue has been reproduced on latest 2.3 releaseTriage: Dev.ExperienceIssue related to Developer Experience and needs help with Triage to Confirm or Reject itIssue related to Developer Experience and needs help with Triage to Confirm or Reject it