max pronko - best practices for checkout customisation in magento 2

© 2017 Pronko Consulting 2

Agenda

• Checkout Overview • How to extend Checkout


Checkout Overview


Checkout Overview

• Single Page Application (SPA) • Checkout API • Based on UI Components • No inline JavaScript • Independent Application


Single Page Application (SPA)

True

Client Server

Initial Request

HTML

AJAX

JSONREST API

UI Component


Libraries used in Checkout

Ui Components


var isLoggedIn = ko.observable(false);isLoggedIn.subscribe( function(newValue) { console.log(newValue ? 'In' : 'Out') } );

<div data-bind=“ visible: isLoggedIn,text: getTitle() ”></div>

Observable Declarative Binding

Checkout Page

StepsAuthentication

Shipping Address

Messages Estimation

Shipping MethodsPayment Methods

Login

<item name="elementTmpl" xsi:type="string">ui/form/element/input</item> </item> </item> </item> <item name="components" xsi:type="array"> <item name="checkout" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/onepage</item> </item> <item name="children" xsi:type="array"> <item name="errors" xsi:type="array"> <item name="sortOrder" xsi:type="string">0</item> <item name="component" xsi:type="string">Magento_Ui/js/view/messages</item> <item name="displayArea" xsi:type="string">messages</item> </item> <item name="authentication" xsi:type="array"> <item name="sortOrder" xsi:type="string">1</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication</item> <item name="displayArea" xsi:type="string">authentication</item> <item name="children" xsi:type="array">  <item name="errors" xsi:type="array"> <item name="sortOrder" xsi:type="string">0</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication-messages</item> <item name="displayArea" xsi:type="string">messages</item> </item> </item> </item> <item name="progressBar" xsi:type="array"> <item name="sortOrder" xsi:type="string">0</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/progress-bar</item> <item name="displayArea" xsi:type="string">progressBar</item> <item name="config" xsi:type="array"> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkout.steps.shipping-step.shippingAddress</item> <item name="1" xsi:type="string">checkout.steps.billing-step.payment</item> </item> </item> </item> <item name="estimation" xsi:type="array"> <item name="sortOrder" xsi:type="string">10</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/estimation</item> <item name="displayArea" xsi:type="string">estimation</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/estimation</item> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkout.sidebar</item> </item> </item> </item> <item name="steps" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">steps</item> <item name="children" xsi:type="array"> <item name="shipping-step" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="sortOrder" xsi:type="string">1</item> <item name="children" xsi:type="array"> <item name="step-config" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="children" xsi:type="array"> <item name="shipping-rates-validation" xsi:type="array"> <item name="children" xsi:type="array">  </item> </item> </item> </item> <item name="shippingAddress" xsi:type="array"> <item name="config" xsi:type="array"> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkout.steps.shipping-step.step-config</item> <item name="1" xsi:type="string">checkoutProvider</item> </item> <item name="popUpForm" xsi:type="array"> <item name="element" xsi:type="string">#opc-new-shipping-address</item> <item name="options" xsi:type="array"> <item name="type" xsi:type="string">popup</item> <item name="responsive" xsi:type="boolean">true</item> <item name="innerScroll" xsi:type="boolean">true</item> <item name="title" xsi:type="string" translate="true">Shipping Address</item> <item name="trigger" xsi:type="string">opc-new-shipping-address</item> <item name="buttons" xsi:type="array"> <item name="save" xsi:type="array"> <item name="text" xsi:type="string" translate="true">Save Address</item> <item name="class" xsi:type="string">action primary action-save-address</item> </item> <item name="cancel" xsi:type="array"> <item name="text" xsi:type="string" translate="true">Cancel</item> <item name="class" xsi:type="string">action secondary action-hide-popup</item> </item> </item> </item> </item> </item> <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping</item> <item name="provider" xsi:type="string">checkoutProvider</item> <item name="sortOrder" xsi:type="string">1</item> <item name="children" xsi:type="array"> <item name="customer-email" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item> <item name="displayArea" xsi:type="string">customer-email</item> <item name="tooltip" xsi:type="array"> <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item> </item> <item name="children" xsi:type="array"> <item name="before-login-form" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-login-form</item> <item name="children" xsi:type="array">  </item> </item> <item name="additional-login-form-fields" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">additional-login-form-fields</item> <item name="children" xsi:type="array">  </item> </item> </item> </item> <item name="before-form" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-form</item> <item name="children" xsi:type="array">  </item> </item> <item name="before-fields" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-fields</item> <item name="children" xsi:type="array">  </item> </item> <item name="address-list" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-address/list</item> <item name="displayArea" xsi:type="string">address-list</item> </item> <item name="address-list-additional-addresses" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">address-list-additional-addresses</item> <item name="children" xsi:type="array">  </item> </item> <item name="before-shipping-method-form" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-shipping-method-form</item> <item name="children" xsi:type="array">  </item> </item> <item name="shipping-address-fieldset" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="config" xsi:type="array"> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkoutProvider</item> </item> </item> <item name="displayArea" xsi:type="string">additional-fieldsets</item> <item name="children" xsi:type="array">  <item name="region" xsi:type="array">  <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>  <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> <item name="postcode" xsi:type="array">  <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> <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> </item> </item> </item> </item> </item> </item> <item name="billing-step" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="sortOrder" xsi:type="string">2</item> <item name="children" xsi:type="array"> <item name="payment" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/payment</item> <item name="config" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Payment</item> </item> <item name="children" xsi:type="array"> <item name="renders" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="children" xsi:type="array">  </item> </item> <item name="additional-payment-validators" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="children" xsi:type="array">  <item name="email-validator" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/payment/email-validator</item> </item> </item> </item> <item name="customer-email" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item> <item name="displayArea" xsi:type="string">customer-email</item> <item name="tooltip" xsi:type="array"> <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item> </item> <item name="children" xsi:type="array"> <item name="before-login-form" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-login-form</item> <item name="children" xsi:type="array">  </item> </item> <item name="additional-login-form-fields" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">additional-login-form-fields</item> <item name="children" xsi:type="array">  </item> </item> </item> </item> <item name="beforeMethods" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">beforeMethods</item> <item name="children" xsi:type="array">  </item> <item name="validation" xsi:type="array"> <item name="validate-select" xsi:type="string">true</item> </item>  <item name="filterBy" xsi:type="array"> <item name="target" xsi:type="string">${ $.provider }:${ $.parentScope }.country_id</item> <item name="field" xsi:type="string">country_id</item> </item> </item> <item name="payments-list" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/payment/list</item> <item name="displayArea" xsi:type="string">payment-methods-list</item> <item name="config" xsi:type="array"> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkout.steps.billing-step.payment.renders</item> <item name="1" xsi:type="string">checkout.steps.billing-step.payment.additional-payment-validators</item> </item> </item> <item name="children" xsi:type="array"> <item name="before-place-order" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-place-order</item> <item name="dataScope" xsi:type="string">before-place-order</item> <item name="provider" xsi:type="string">checkoutProvider</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/payment/before-place-order</item> </item> </item> </item> </item>  <item name="afterMethods" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">afterMethods</item> <item name="children" xsi:type="array">  </item> </item> </item> </item> </item> </item> </item> </item> <item name="sidebar" xsi:type="array"> <item name="sortOrder" xsi:type="string">50</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/sidebar</item> <item name="displayArea" xsi:type="string">sidebar</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/sidebar</item> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkout.steps</item> </item> </item> <item name="children" xsi:type="array"> <item name="summary" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary</item> <item name="displayArea" xsi:type="string">summary</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/summary</item> </item> <item name="children" xsi:type="array"> <item name="totals" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/totals</item> <item name="displayArea" xsi:type="string">totals</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/summary/totals</item> </item> <item name="children" xsi:type="array">   <item name="subtotal" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/subtotal</item> <item name="config" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Cart Subtotal</item> </item> </item> <item name="shipping" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/shipping</item> <item name="config" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Shipping</item> <item name="notCalculatedMessage" xsi:type="string" translate="true">Not yet calculated</item> </item> </item> <item name="grand-total" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/grand-total</item> <item name="config" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Order Total</item> </item> </item> </item> </item> <item name="itemsBefore" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="children" xsi:type="array">  </item> </item> <item name="cart_items" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart-items</item> <item name="children" xsi:type="array"> <item name="details" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item> <item name="children" xsi:type="array"> <item name="thumbnail" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item> <item name="displayArea" xsi:type="string">before_details</item> </item> <item name="subtotal" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item> <item name="displayArea" xsi:type="string">after_details</item> </item> </item> </item> </item> </item> <item name="itemsAfter" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="children" xsi:type="array">  </item> </item> </item> </item> <item name="shipping-information" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information</item> <item name="config" xsi:type="array"> <item name="deps" xsi:type="string">checkout.steps.shipping-step.shippingAddress</item> </item> <item name="displayArea" xsi:type="string">shipping-information</item> <item name="children" xsi:type="array"> <item name="ship-to" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information/list</item> <item name="displayArea" xsi:type="string">ship-to</item> </item> </item>

<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="Magento\Checkout\Block\Onepage" name="checkout.root" template="onepage.phtml" cacheable="false"> <arguments> <argument name="jsLayout" xsi:type="array"> <item name="types" xsi:type="array"> <item name="form.input" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item> <item name="config" xsi:type="array"> <item name="provider" xsi:type="string">checkoutProvider</item> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkoutProvider</item> </item> <item name="template" xsi:type="string">ui/form/field</item> <item name="elementTmpl" xsi:type="string">ui/form/element/input</item> </item> </item> </item> <item name="components" xsi:type="array"> <item name="checkout" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/onepage</item> </item> <item name="children" xsi:type="array"> <item name="errors" xsi:type="array"> <item name="sortOrder" xsi:type="string">0</item> <item name="component" xsi:type="string">Magento_Ui/js/view/messages</item> <item name="displayArea" xsi:type="string">messages</item> </item> <item name="authentication" xsi:type="array"> <item name="sortOrder" xsi:type="string">1</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication</item> <item name="displayArea" xsi:type="string">authentication</item> <item name="children" xsi:type="array">  <item name="errors" xsi:type="array"> <item name="sortOrder" xsi:type="string">0</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication-messages</item> <item name="displayArea" xsi:type="string">messages</item> </item> </item> </item> <item name="progressBar" xsi:type="array"> <item name="sortOrder" xsi:type="string">0</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/progress-bar</item> <item name="displayArea" xsi:type="string">progressBar</item> <item name="config" xsi:type="array"> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkout.steps.shipping-step.shippingAddress</item> <item name="1" xsi:type="string">checkout.steps.billing-step.payment</item> </item> </item> </item> <item name="estimation" xsi:type="array"> <item name="sortOrder" xsi:type="string">10</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/estimation</item> <item name="displayArea" xsi:type="string">estimation</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/estimation</item> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkout.sidebar</item> </item> </item> </item> <item name="steps" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">steps</item> <item name="children" xsi:type="array"> <item name="shipping-step" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="sortOrder" xsi:type="string">1</item> <item name="children" xsi:type="array"> <item name="step-config" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="children" xsi:type="array"> <item name="shipping-rates-validation" xsi:type="array"> <item name="children" xsi:type="array">  </item> </item> </item> </item> <item name="shippingAddress" xsi:type="array"> <item name="config" xsi:type="array"> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkout.steps.shipping-step.step-config</item> <item name="1" xsi:type="string">checkoutProvider</item> </item> <item name="popUpForm" xsi:type="array"> <item name="element" xsi:type="string">#opc-new-shipping-address</item> <item name="options" xsi:type="array"> <item name="type" xsi:type="string">popup</item> <item name="responsive" xsi:type="boolean">true</item> <item name="innerScroll" xsi:type="boolean">true</item> <item name="title" xsi:type="string" translate="true">Shipping Address</item> <item name="trigger" xsi:type="string">opc-new-shipping-address</item> <item name="buttons" xsi:type="array"> <item name="save" xsi:type="array"> <item name="text" xsi:type="string" translate="true">Save Address</item> <item name="class" xsi:type="string">action primary action-save-address</item> </item> <item name="cancel" xsi:type="array"> <item name="text" xsi:type="string" translate="true">Cancel</item> <item name="class" xsi:type="string">action secondary action-hide-popup</item> </item> </item> </item> </item> </item> <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping</item> <item name="provider" xsi:type="string">checkoutProvider</item> <item name="sortOrder" xsi:type="string">1</item> <item name="children" xsi:type="array"> <item name="customer-email" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item> <item name="displayArea" xsi:type="string">customer-email</item> <item name="tooltip" xsi:type="array"> <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item> </item> <item name="children" xsi:type="array"> <item name="before-login-form" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-login-form</item> <item name="children" xsi:type="array">  </item> </item> <item name="additional-login-form-fields" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">additional-login-form-fields</item> <item name="children" xsi:type="array">  </item> </item> </item> </item> <item name="before-form" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-form</item> <item name="children" xsi:type="array">  </item> </item> <item name="before-fields" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-fields</item> <item name="children" xsi:type="array">  </item> </item> <item name="address-list" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-address/list</item> <item name="displayArea" xsi:type="string">address-list</item> </item> <item name="address-list-additional-addresses" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">address-list-additional-addresses</item> <item name="children" xsi:type="array">  </item> </item> <item name="before-shipping-method-form" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-shipping-method-form</item> <item name="children" xsi:type="array">  </item> </item> <item name="shipping-address-fieldset" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="config" xsi:type="array"> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkoutProvider</item> </item> </item> <item name="displayArea" xsi:type="string">additional-fieldsets</item> <item name="children" xsi:type="array">  <item name="region" xsi:type="array">  <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>  <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> <item name="postcode" xsi:type="array">  <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> <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> </item> </item> </item> </item> </item> </item> <item name="billing-step" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="sortOrder" xsi:type="string">2</item> <item name="children" xsi:type="array"> <item name="payment" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/payment</item> <item name="config" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Payment</item> </item> <item name="children" xsi:type="array"> <item name="renders" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="children" xsi:type="array">  </item> </item> <item name="additional-payment-validators" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="children" xsi:type="array">  <item name="email-validator" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/payment/email-validator</item> </item> </item> </item> <item name="customer-email" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item> <item name="displayArea" xsi:type="string">customer-email</item> <item name="tooltip" xsi:type="array"> <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item> </item> <item name="children" xsi:type="array"> <item name="before-login-form" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-login-form</item> <item name="children" xsi:type="array">  </item> </item> <item name="additional-login-form-fields" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">additional-login-form-fields</item> <item name="children" xsi:type="array">  </item> </item> </item> </item> <item name="beforeMethods" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">beforeMethods</item> <item name="children" xsi:type="array">  </item> <item name="validation" xsi:type="array"> <item name="validate-select" xsi:type="string">true</item> </item>  <item name="filterBy" xsi:type="array"> <item name="target" xsi:type="string">${ $.provider }:${ $.parentScope }.country_id</item> <item name="field" xsi:type="string">country_id</item> </item> </item> <item name="payments-list" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/payment/list</item> <item name="displayArea" xsi:type="string">payment-methods-list</item> <item name="config" xsi:type="array"> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkout.steps.billing-step.payment.renders</item> <item name="1" xsi:type="string">checkout.steps.billing-step.payment.additional-payment-validators</item> </item> </item> <item name="children" xsi:type="array"> <item name="before-place-order" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-place-order</item> <item name="dataScope" xsi:type="string">before-place-order</item> <item name="provider" xsi:type="string">checkoutProvider</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/payment/before-place-order</item> </item> </item> </item> </item>  <item name="afterMethods" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">afterMethods</item> <item name="children" xsi:type="array">  </item> </item> </item> </item> </item> </item> </item> </item> <item name="sidebar" xsi:type="array"> <item name="sortOrder" xsi:type="string">50</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/sidebar</item> <item name="displayArea" xsi:type="string">sidebar</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/sidebar</item> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkout.steps</item> </item> </item> <item name="children" xsi:type="array"> <item name="summary" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary</item> <item name="displayArea" xsi:type="string">summary</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/summary</item> </item>

Checkout


checkout_index_index.xml

<page layout="checkout"> <body> <referenceContainer name="content"> <block class="Magento\Checkout\Block\Onepage" name="checkout.root" template="onepage.phtml" cacheable="false"> <arguments> <argument name="jsLayout" xsi:type=“array”> <!—- Layout Config —-> </argument> </arguments> </block> </referenceContainer> </body> </page>

Entry point - onepage.phtml

<!-- /ko —> <script type=“text/x-magento-init"> { "#checkout": { "Magento_Ui/js/core/app": <?php echo $block->getJsLayout();?> } }</script>

<script> window.checkoutConfig = <?php echo \Zend_Json::encode($block->getCheckoutConfig()); ?>; window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn; window.customerData = window.checkoutConfig.customerData; </script>

Magento\Checkout\view\frontent\templates\onepage.phtml

onepage.html

UI Components

Checkout Config

Layout - onepage.HTML

  <div class="opc-wrapper"> <ol class="opc" id="checkoutSteps">    </ol> </div>

Magento\Checkout\view\frontent\web\template\onepage.html

Checkout


getRegion = displayArea

<item name="steps" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">steps</item> <item name="children" xsi:type=“array”>…</item> </item>

var config = { map: { '*': { uiComponent: 'Magento_Ui/js/lib/core/collection', } }};

requirejs-config.js



How to extend Checkout in Magento 2


What do we have here?

• Plugin • Extension Attributes • Config Provider

• Layouts • Components • JavaScript Mixins • Layout Processor

BackendFrontend


Adding new Component


Adding new Component

Checkout Agreement Component

before-place-orderdisplayArea


Adding new Component - static declaration

<item name="agreements"> <item name="component">Magento_CheckoutAgreements/js/view/checkout-agreements</item> <item name="sortOrder">100</item> <item name="displayArea">before-place-order</item> </item>


return Component.extend({ defaults: { template: 'Magento_CheckoutAgreements/checkout/checkout-agreements' } });

checkout-agreements.js


Dynamic component declaration


Dynamic component declaration - Layout Processor

<type name="Magento\Checkout\Block\Onepage"> <arguments> <argument name="layoutProcessors" xsi:type="array"> <item name="addressFormAttributes">Magento\Checkout\Block\Checkout\LayoutProcessor</item> </argument> </arguments> </type>

Magento\Checkout\etc\frontend\di.xml

namespace Magento\Checkout\Block\Checkout;interface LayoutProcessorInterface{ public function process($jsLayout); }


Component Configuration


Component Configuration - Config Provider

<type name="Magento\Checkout\Model\CompositeConfigProvider"> <arguments> <argument name="configProviders"> <item name="braintree_config_provider">Magento\Braintree\Model\Ui\ConfigProvider</item> </argument> </arguments> </type>

di.xml

max pronko - best practices for checkout customisation in magento 2

Presentations & Public Speaking