Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Checkout in Magento 2 by Max Pronko

1,426 views

Published on

In this presentation I go through checkout architecture in Magento 2 and present useful techniques on how to extend checkout using Layout, Components, Config Provider, Layout Processor, JavaScript Mixins and Plugins.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Checkout in Magento 2 by Max Pronko

  1. 1. © 2016 Magento, Inc. Checkout in Magento 2
  2. 2. © 2016 Magento, Inc. 2 CTO @ The Irish Store, Gifts Direct Pronko Consulting Max Pronko
  3. 3. © 2016 Magento, Inc. 3 Agenda • Checkout Overview • How to extend Checkout
  4. 4. © 2016 Magento, Inc. 4 Checkout Overview
  5. 5. © 2016 Magento, Inc. 5 Checkout Overview • Single Page Application (SPA) • Checkout API • Based on UI Components • No inline JavaScript • Independent Application
  6. 6. © 2016 Magento, Inc. 6 Single Page Application (SPA) True Client Server Initial Request HTML AJAX JSON REST API UI Component
  7. 7. © 2016 Magento, Inc. 7 Libraries used in Checkout Ui Components
  8. 8. © 2016 Magento, Inc. 8 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
  9. 9. © 2016 Magento, Inc. 9 Checkout Page Steps Authentication Shipping Address Messages Estimation Shipping Methods Payment Methods Login <item name="elementTmpl" xsi:type="string">ui/for m/el ement/i nput</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"> <!--Additional authentication fields--> <item name="errors" xsi:type="array"> <item name="sortOrder" xsi:type="string">0</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/authenticati on- 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/pr ogress-bar</it em> <item name="displayArea" xsi:type="string">progressBar</it em> <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/esti mation</item> <item name="displayArea" xsi:type="string">esti mati on</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/esti mation</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</it em> <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"> <!--Step configuration components--> </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/j s/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/for m/element/email</it em> <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-for m</item> <item name="children" xsi:type="array"> <!-- before login form fields --> </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-l ogin-for m-fiel ds</item> <item name="children" xsi:type="array"> <!-- additional login form fields --> </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-for m</it em> <item name="children" xsi:type="array"> <!-- before form fields --> </item> </item> <item name="before-fields" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-fi elds</it em> <item name="children" xsi:type="array"> <!-- before fields --> </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</it em> </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</it em> <item name="children" xsi:type="array"> <!-- address-list-additional-addresses --> </item> </item> <item name="before-shipping-met hod-form" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-shipping- method-for m</item> <item name="children" xsi:type="array"> <!-- address-list-additional-addresses --> </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</it em> <item name="children" xsi:type="array"> <!-- 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/for m/element/region</it em> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">ui/for m/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">countr y_i d</item> </item> </item> <item name="postcode" xsi:type="array"> <!-- post-code field has custom UI component --> <item name="component" xsi:type="string">Magento_Ui/js/for m/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/j s/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"> <!-- merge payment method renders here --> </item> </item> <item name="additional-payment-validators" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="children" xsi:type="array"> <!-- merge payment validators here --> <item name="email-validator" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/payment/email- vali dator</item> </item> </item> </item> <item name="customer-email" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/for m/element/email</it em> <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-for m</item> <item name="children" xsi:type="array"> <!-- before login form fields --> </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-l ogin-for m-fiel ds</item> <item name="children" xsi:type="array"> <!-- additional login form fields --> </item> </item> </item> </item> <item name="beforeMethods" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">beforeM ethods</item> <item name="children" xsi:type="array"> <!-- merge additional data before payment methods here --> </item> <item name="validation" xsi:type="array"> <item name="validate-select" xsi:type="string">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">${ $.provider }:${ $.parentScope }.country_id</item> <item name="field" xsi:type="string">country_id</it em> </item> </item> <item name="payments-list" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/payment/l ist</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.r enders</item> <item name="1" xsi:type="string">checkout.steps.billing-step.payment.additional-payment- validator s</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">checkoutProvi der</it em> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/payment/before-place-order </item> </item> </item> </item> </item> <!-- merge your payment methods here --> <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"> <!-- merge additional data after payment methods here --> </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/si debar</item> <item name="displayArea" xsi:type="string">sidebar< /item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/sidebar</it em> <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/summar y</item> <item name="displayArea" xsi:type="string">summar y< /item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/summar y</it em> </item> <item name="children" xsi:type="array"> <item name="totals" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/j s/view/summar y/total s</item> <item name="displayArea" xsi:type="string">totals</item> 01/XMLSchema- instance" layout="checkout" xsi:noNamespaceSchemaLocati on="urn:magento:f ramework:View/Layout/etc/page_configuration.xsd" > nt"> tBlockOnepage" name="checkout.root" template="onepage.phtml" cacheable="false"> xsi:type="array"> pe="array"> " xsi:type="array"> ent" xsi:type="string">Magento_Ui/js/for m/element/abstr act</item> xsi:type="array"> der" xsi:type="string">checkoutProvi der</it em> xsi:type="array"> xsi:type="string">checkoutProvider</item> ate" xsi:type="string">ui/form/field</item> ntTmpl" xsi:type="string">ui/for m/el ement/i nput</item> " xsi:type="array"> xsi:type="array"> ent" xsi:type="string">uiComponent</item> xsi:type="array"> ate" xsi:type="string">Magento_Checkout/onepage</item> " xsi:type="array"> " xsi:type="array"> Order" xsi:type="string">0</item> mponent" xsi:type="string">Magento_Ui/js/view/messages</item> playArea" xsi:type="string"> messages</item> ntication" xsi:type="array"> Order" xsi:type="string">1</item> mponent" xsi:type="string">Magento_Checkout/js/view/authentication</item> playArea" xsi:type="string">authentication</item> dren" xsi:type="array"> uthentication fields--> rrors" xsi:type="array"> "sortOrder" xsi:type="string">0</item> "component" xsi:type="string">Magento_Checkout/js/view/authenticati on- messages</item> "displayArea" xsi:type="string">messages</item> essBar" xsi:type="array"> Order" xsi:type="string">0</item> mponent" xsi:type="string">Magento_Checkout/js/view/pr ogress-bar</it em> playArea" xsi:type="string">progressBar</it em> fig" xsi:type="array"> eps" xsi:type="array"> "0" xsi:type="string">checkout.steps.shipping-step.shippingAddress</item> "1" xsi:type="string">checkout.steps.billing-step.payment< /item> ation" xsi:type="array"> Order" xsi:type="string">10</item> mponent" xsi:type="string">Magento_Checkout/js/view/esti mation</item> playArea" xsi:type="string">esti mati on</item> fig" xsi:type="array"> emplate" xsi:type="string">Magento_Checkout/esti mation</item> eps" xsi:type="array"> "0" xsi:type="string">checkout.sidebar</item> " xsi:type="array"> mponent" xsi:type="string">uiComponent</item> playArea" xsi:type="string">steps</it em> dren" xsi:type="array"> hipping-step" xsi:type="array"> "component" xsi:type="string">uiComponent</item> "sortOrder" xsi:type="string">1</item> "children" xsi:type="array"> e="step-config" xsi:type="array"> ame="component" xsi:type="string">uiComponent</item> ame="children" xsi:type="array"> name="shipping-rates-validation" xsi:type="array"> m name="children" xsi:type="array"> !--Step configuration components--> em> > e="shippingAddress" xsi:type="array"> ame="config" xsi:type="array"> name="deps" xsi:type="array"> m name="0" xsi:type="string">checkout.steps.shipping-step.step- config</item> m name="1" xsi:type="string">checkoutProvider</item> > name="popUpForm" xsi:type="array"> m name="element" xsi:type="string">#opc-new-shipping-address</item> m 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> em> > ame="component" xsi:type="string">Magento_Checkout/j s/view/shipping</item> ame="provider" xsi:type="string">checkoutProvider</item> ame="sortOrder" xsi:type="string">1</item> ame="children" xsi:type="array"> name="customer-email" xsi:type="array"> m name="component" xsi:type="string">Magento_Checkout/js/view/for m/element/email</it em> m name="displayArea" xsi:type="string">customer-email </item> m name="tooltip" xsi:type="array"> item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item> em> m 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-for m</item> <item name="children" xsi:type="array"> <!-- before login form fields --> </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-l ogin-for m-fiel ds</item> <item name="children" xsi:type="array"> <!-- additional login form fields --> </item> /item> em> > name="before-form" xsi:type="array"> m name="component" xsi:type="string">uiComponent</item> m name="displayArea" xsi:type="string">before-for m</it em> m name="children" xsi:type="array"> !-- before form fields --> em> > name="before-fields" xsi:type="array"> m name="component" xsi:type="string">uiComponent</item> m name="displayArea" xsi:type="string">before-fi elds</it em> m name="children" xsi:type="array"> !-- before fields --> em> > name="address-list" xsi:type="array"> m name="component" xsi:type="string">Magento_Checkout/js/view/shipping-address/list</item> m name="displayArea" xsi:type="string">address- list</it em> > name="address-list-additional-addresses" xsi:type="array"> m name="component" xsi:type="string">uiComponent</item> m name="displayArea" xsi:type="string">address- list-additional- addresses</it em> m name="children" xsi:type="array"> !-- address-list-additional-addresses --> em> > name="before-shipping-met hod-form" xsi:type="array"> m name="component" xsi:type="string">uiComponent</item> m name="displayArea" xsi:type="string">before-shipping- method-for m</item> m name="children" xsi:type="array"> !-- address-list-additional-addresses --> em> > name="shipping-address-fieldset" xsi:type="array"> m name="component" xsi:type="string">uiComponent</item> m name="config" xsi:type="array"> item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkoutProvider</item> /item> em> m name="displayArea" xsi:type="string">additional-fieldsets</it em> m name="children" xsi:type="array"> !-- 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/for m/element/region</it em> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">ui/for m/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">countr y_i d</item> </item> /item> item name="postcode" xsi:type="array"> <!-- post-code field has custom UI component --> <item name="component" xsi:type="string">Magento_Ui/js/for m/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> em> > illing-step" xsi:type="array"> "component" xsi:type="string">uiComponent</item> "sortOrder" xsi:type="string">2</item> "children" xsi:type="array"> e="payment" xsi:type="array"> ame="component" xsi:type="string">Magento_Checkout/j s/view/payment</item> ame="config" xsi:type="array"> name="title" xsi:type="string" translate="true">Payment</item> ame="children" xsi:type="array"> name="renders" xsi:type="array"> m name="component" xsi:type="string">uiComponent</item> m name="children" xsi:type="array"> !-- merge payment method renders here --> em> > name="additional-payment-validators" xsi:type="array"> m name="component" xsi:type="string">uiComponent</item> m name="children" xsi:type="array"> !-- merge payment validators here --> item name="email-validator" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/payment/email- vali dator</item> /item> em> > name="customer-email" xsi:type="array"> m name="component" xsi:type="string">Magento_Checkout/js/view/for m/element/email</it em> m name="displayArea" xsi:type="string">customer-email </item> m name="tooltip" xsi:type="array"> item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item> em> m 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-for m</item> <item name="children" xsi:type="array"> <!-- before login form fields --> </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-l ogin-for m-fiel ds</item> <item name="children" xsi:type="array"> <!-- additional login form fields --> </item> /item> em> > name="beforeMethods" xsi:type="array"> m name="component" xsi:type="string">uiComponent</item> m name="displayArea" xsi:type="string">beforeM ethods</item> m name="children" xsi:type="array"> !-- merge additional data before payment methods here --> em> m name="validation" xsi:type="array"> item name="validate-select" xsi:type="string">true</item> Checkout
  10. 10. © 2016 Magento, Inc. 10 checkout_index_index.xml <page layout="checkout"> <body> <referenceContainer name="content"> <block class="MagentoCheckoutBlockOnepage" name="checkout.root" template="onepage.phtml" cacheable="false"> <arguments> <argument name="jsLayout" xsi:type=“array”> <!—- Layout Config —-> </argument> </arguments> </block> </referenceContainer> </body> </page>
  11. 11. © 2016 Magento, Inc. 11 Entry point - onepage.phtml <!-- ko template: getTemplate() --><!-- /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> MagentoCheckoutviewfrontenttemplatesonepage.phtml onepage.html UI Components Checkout Config
  12. 12. © 2016 Magento, Inc. 12 Layout - onepage.HTML <!-- ko foreach: getRegion('progressBar') --> <!-- ko template: getTemplate() --><!-- /ko --> <!--/ko--> <!-- ko foreach: getRegion('estimation') --> <!-- ko template: getTemplate() --><!-- /ko --> <!--/ko--> <!-- ko foreach: getRegion('messages') --> <!-- ko template: getTemplate() --><!-- /ko --> <!--/ko--> <div class="opc-wrapper"> <ol class="opc" id="checkoutSteps"> <!-- ko foreach: getRegion('steps') --> <!-- ko template: getTemplate() --><!-- /ko --> <!--/ko--> </ol> </div> MagentoCheckoutviewfrontentwebtemplateonepage.html Checkout
  13. 13. © 2016 Magento, Inc. 13 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 checkout_index_index.xml
  14. 14. © 2016 Magento, Inc. 14
  15. 15. © 2016 Magento, Inc. 15 How to extend Checkout in Magento 2
  16. 16. © 2016 Magento, Inc. 16 What do we have here? • Plugin • Extension Attributes • Config Provider • Layouts • Components • JavaScript Mixins • Layout Processor BackendFrontend
  17. 17. © 2016 Magento, Inc. 17 Adding new Component
  18. 18. © 2016 Magento, Inc. 18 Adding new Component Checkout Agreement Component before-place-order displayArea
  19. 19. © 2016 Magento, Inc. 19 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> checkout_index_index.xml return Component.extend({ defaults: { template: 'Magento_CheckoutAgreements/checkout/checkout-agreements' } }); checkout-agreements.js
  20. 20. © 2016 Magento, Inc. 20 Dynamic component declaration
  21. 21. © 2016 Magento, Inc. 21 Dynamic component declaration
  22. 22. © 2016 Magento, Inc. 22 Dynamic component declaration - Layout Processor <type name="MagentoCheckoutBlockOnepage"> <arguments> <argument name="layoutProcessors" xsi:type="array"> <item name="addressFormAttributes">MagentoCheckoutBlockCheckoutLayoutProcessor</item> </argument> </arguments> </type> MagentoCheckoutetcfrontenddi.xml namespace MagentoCheckoutBlockCheckout; interface LayoutProcessorInterface { public function process($jsLayout); }
  23. 23. © 2016 Magento, Inc. 23 Component Configuration
  24. 24. © 2016 Magento, Inc. 24 Component Configuration - Config Provider <type name="MagentoCheckoutModelCompositeConfigProvider"> <arguments> <argument name="configProviders"> <item name="braintree_config_provider">MagentoBraintreeModelUiConfigProvider</item> </argument> </arguments> </type> di.xml
  25. 25. © 2016 Magento, Inc. Questions Magento 2 Blog - www.maxpronko.com @max_pronko

×