/   /   /  Magento 2 More details about checkout page

Note:

For more extensions and themes visit our store

Magento 2 More details about checkout page


The checkout process in Magento 2 it's more practice and more abstracted with new generation ideas of user experience , in this course ibnab try to give you some keys for customize the checkout page .

Saw the system use component for create and manage the page checkout, it's start from the layout checkout_index_index.xml in path vendor/magento/module-checkout/view/frontend/layout  , the first line is :

  1.  
  2. <block class="Magento\Checkout\Block\Onepage" name="checkout.root" template="onepage.phtml" cacheable="false">
  3.  
  4.  

the block in path vendor/magento/module-checkout/Block/Onepage.php and template is in path vendor/magento/module-checkout/view/frontend/templates/onepage.phtml
 
ok if you open onepage.phtml as result you have some lines but the result in browser is complex structure and many element form .

Here we use the technique of js component with knouckoutjs , inside this file you have the big parent div is <div id="checkout" data-bind="scope:'checkout'" class="checkout-container"> we have here 2 important attribute id="checkout" and data-bind="scope:'checkout'" :

id="checkout" : we applied the init of component on it :

  1.  
  2.     <script type="text/x-magento-init">
  3.         {
  4.             "#checkout": {
  5.                 "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
  6.             }
  7.         }
  8.     </script>
  9.  
  10.  

data-bind="scope:'checkout'" :  it's used to determinate what's the current scope for example is used inside template .html related to this component , for determinate for where getting the function used by knoukoutjs .

Ok our component initialized in div with id   checkout and scope checkout' , we passed as params  :
<?php /* @escapeNotVerified */ echo $block->getJsLayout();?> , this php function is inside our block  Magento\Checkout\Block\Onepage :

  1.  
  2. public function getJsLayout()
  3.     {
  4.         foreach ($this->layoutProcessors as $processor) {
  5.             $this->jsLayout = $processor->process($this->jsLayout);
  6.         }
  7.         return \Zend_Json::encode($this->jsLayout);
  8.     }
  9.  
  10.  

ohhhhhhh , what's that ? , we have here as class propriety $this->layoutProcessors  passed by DI (dependency injection) with constructor  :
  1.  
  2. public function __construct(
  3.         \Magento\Framework\View\Element\Template\Context $context,
  4.         \Magento\Framework\Data\Form\FormKey $formKey,
  5.         \Magento\Checkout\Model\CompositeConfigProvider $configProvider,
  6.         array $layoutProcessors = [],
  7.         array $data = []
  8.     ) {
  9.         parent::__construct($context, $data);
  10.         $this->formKey = $formKey;
  11.         $this->_isScopePrivate = true;
  12.         $this->jsLayout = isset($data['jsLayout']) && is_array($data['jsLayout']) ? $data['jsLayout'] : [];
  13.         $this->configProvider = $configProvider;
  14.         $this->layoutProcessors = $layoutProcessors;
  15.     }
  16.  
  17.  

it's an instance of Magento\Checkout\Block\Checkout\LayoutProcessor and is passed by di.xml inside vendor/magento/module-checkout/etc/frontend , with :

  1.  
  2.     <type name="Magento\Checkout\Block\Onepage">
  3.         <arguments>
  4.             <argument name="layoutProcessors" xsi:type="array">
  5.                 <item name="addressFormAttributes" xsi:type="object">Magento\Checkout\Block\Checkout\LayoutProcessor</item>
  6.                 <item name="totalsSortOrder" xsi:type="object">Magento\Checkout\Block\Checkout\TotalsProcessor</item>
  7.             </argument>
  8.         </arguments>
  9.     </type>
  10.  
  11.  

quick view on  Magento\Checkout\Block\Checkout\LayoutProcessor :
we have the function process , getting attribute from attribute of customer , (address and register address), and after that mapped to form and push label :

  1.  
  2.         /** @var \Magento\Eav\Api\Data\AttributeInterface[] $attributes */
  3.         $attributes = $this->attributeMetadataDataProvider->loadAttributesCollection(
  4.             'customer_address',
  5.             'customer_register_address'
  6.         );</p>
  7.  
  8. <p>        $elements = [];
  9.         foreach ($attributes as $attribute) {
  10.             if ($attribute->getIsUserDefined()) {
  11.                 continue;
  12.             }
  13.             $elements[$attribute->getAttributeCode()] = $this->attributeMapper->map($attribute);
  14.             if (isset($elements[$attribute->getAttributeCode()]['label'])) {
  15.                 $label = $elements[$attribute->getAttributeCode()]['label'];
  16.                 $elements[$attribute->getAttributeCode()]['label'] = __($label);
  17.             }
  18.         }
  19.  
  20.  

it's use 2 class :
        \Magento\Customer\Model\AttributeMetadataDataProvider and \Magento\Ui\Component\Form\AttributeMapper

after that this function  process , read configuration of component with  public function process($jsLayout) , $jsLayout is our  checkout_index_index.xml for mapping elements with our shipping step and billing step,

Note : as result we have form element and labels return by model (Address(entity tyep customer_address) => Magento\Customer\Model\Address\Form  => from  customer_address and customer_register_address) and AttributeMapper , mapped and merged with our configuration of shipping step (field and field set) inside checkout_index_index.xml (you can explore table eav_form_type_entity and eav_form_type and eav_entity_type)

Ok inside  Magento\Checkout\Block\Onepage , the function getJsLayout() return the global configuration   in json format :

  1.  
  2.     public function getJsLayout()
  3.     {
  4.         foreach ($this->layoutProcessors as $processor) {
  5.             $this->jsLayout = $processor->process($this->jsLayout);
  6.         }
  7.         return \Zend_Json::encode($this->jsLayout);
  8.     }
  9.  
  10.  

to our text/x-magento-init component in onepage.phtml :

  1.  
  2.     <script type="text/x-magento-init">
  3.         {
  4.             "#checkout": {
  5.                 "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
  6.             }
  7.         }
  8.     </script>
  9.  
  10.  


Resources from official doc :
Add a new checkout step
Customize the view of a checkout step
Add a custom payment method to checkout
Add custom validations before order placement
Add custom shipping carrier validations
Add custom input mask for ZIP code
Add a custom template for a form field on Checkout page
Add a new input form to checkout
Add a custom shipping address renderer

Comments

IBNAB is a company made of a group of professionals whose work is providing secure open source solutions. Our company strives for reaching magnificent results with each experience and provides professional open source solutions that cover every part of the business process.

Newsletter