inchoo.net

Magento 2 Checkout — Frontend perspective

Mladen Ristić

inchoo.net

Magento 2 changes:

●New Layout Structure

●New File Structure

●New Frontend Responsive theme

●New Admin theme

Checkout - most radical change on frontend

1. UI differences

1. UI differences

Main UI improvements (1):

● Reduced number of steps○ Absolutely beneficial for user’s experience.

● Clean and simple interface○ Easier shopping progress

1. UI differences

Main UI improvements (2):

Current Magento Onepage Checkout - 6 steps:

●Checkout method

●Billing information

●Shipping information

●Shipping method

●Payment information

●Order information

1. UI differences

Main UI improvements (2):

New Magento Checkout – 2 steps:

•Shipping step

•Review & Payment stepNew checkout can be a definite improvement if designers and developers have the knowledge and decide to follow this new approach.

Benefits:

•New customer can place order in less than 2 minutes•Increased number of successful orders

1. UI differences

Other UI improvements

● Simplified header - less elements

● Removed footer

● Progress bar – navigation through steps.

Possible improvement:

● Promo code on last Checkout stepThis shows that Magento 2 will be up to date with latest ecommerce best practices - At least on the surface.

2. Performance

Loading time M1 vs M2 Checkout (1):

Three years ago:

● More than 47% of people expect a web page to load

in two seconds or less

Today:

● 60% or more by today's standards

● Page load time can be two seconds, but less is

almost mandatory

2. Performance

Loading time M1 vs M2 Checkout (2):

Page load time directly affects:

●Customers satisfaction

●Store revenue

How seriously Magento 2 approached this topic?

Performance results and comparisons:http://www.magemeter.com/benchmark/index

2. Performance

Loading time M1 vs M2 Checkout (3):

Magento 1 EE - Madison Island theme.VS

Magento 2 Checkout - Luma theme.

● Test environment is placed on the same server

● 2 Mbit Internet connection

● With and without a browser cache.

2. Performance

Loading time M1 vs M2 Checkout Results:

Magento EE – [no cache]

Magento EE - with browser cache

Magento 2 - 1.0.0-

beta [no cache]

Magento 2 - 1.0.0

beta - with cache

No. of requests

58 58 260 259

MB transferred

1.2 MB 166 KB 3.1 MB 845 KB

Finish 5.66 s 4.61 s 35.14 s 8.81 s

DOM Content Loaded

4.49 s 4.39 s 21.9 s 5.08 s

Load 5.55 s 4.43 s 25.6 s 5.08 s

3. How it works

As we have seen the new checkout on frontend looks much different than the current one, and also it is expected that some major changes had to happen under the hood.

3. How it works

We are familiar with JavaScript in Magento - it isn’t a new feature in Magento. Current checkout depends heavily on JavaScript.

New Magento Checkout = JavaScript application

3. How it works

Main template file which Magento 2 uses for checkout:

app/code/Magento/Checkout/view/frontend/templates/onepage.phtml

3. How it works

app/code/Magento/Checkout/view/frontend/templates/onepage.phtml

<div id="checkout" data-bind="scope:'checkout'" class="checkout-container"> <!-- ko template: getTemplate() --><!-- /ko --> <script type="text/x-magento-init"> { "#checkout": { "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?> } } </script> <script> window.checkoutConfig = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getCheckoutConfig()); ?>; // Create aliases for customer.js model from customer module window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn; window.customerData = window.checkoutConfig.customerData; </script> <script> require([ 'mage/url', 'Magento_Checkout/js/model/step-loader', 'Magento_Ui/js/block-loader' ], function(url, loader, blockLoader) { loader.registerLoader(); blockLoader("<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"); return url.setBaseUrl('<?php /* @escapeNotVerified */ echo $block->getBaseUrl();?>'); }) </script></div>

3. How it works

One of two ways how Magento 2 initializes a UI component in a PHTML template:● data-mage-init● <script type="text/x-magento-init">

Official documentation:http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js_init.html.

3. How it works

RequireJS call – dependency file loader ● Which files to load before rendering content● In what order to load them

After all required JavaScript files are loaded and all dependencies covered, then JSON object is generated. Knockout JS kicks in and starts with rendering page elements based on JSON object using HTML file:app/code/Magento/Checkout/view/frontend/web/template/onepage.html

3. How it works

JSON?

Checkout JSON object ● Holds checkout UI

components● Generated by a

controller

3. How it works

If you wish to learn more about this:

JSON objects is construed inside checkout_index_index.xml

Path:app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml

Each element of checkout page with all options is dynamically created in form of a JSON object.

3. How it works

JavaScript Knockout?

It is a JavaScript library that helps to create rich, responsive display and editor user interfaces with a clean underlying data model.

Any time you have sections of UI that update dynamically JavaScript KO can help you implement it.

3. How it works

Example: Custom CMS block on Magento 2 Checkout

After we get familiar with concept of rendering a new checkout let us try to add something new on checkout page.

Something custom, for example CMS Static block from admin panel - one of simplest operation in current Magento.

3. How it works

3. How it works

Example (1): Custom CMS block on Magento 2 Checkout

In theory, to add static block you need to create XML file inside your theme.

Like local.xml in current Magento.

In our case we need checkout_index_index.xml inside path:app/design/frontend/Inchoo/theme/Magento_Checkout/layout

3. How it works

Example (2):

XML that didn’t work as expected

<body> <referenceContainer name="content"> <block class="Magento\Cms\Block\Block" name="free.shipping" after="checkout.sidebar"> <action method="setBlockId"> <argument name="id" xsi:type="string">1</argument> </action> </block> </referenceContainer></body>

3. How it works

Example (3): Custom CMS block on Magento 2 Checkout

Layout XML isn’t enough to manipulate new checkout page. Not even in simple case as in placing CMS Block.

Magento 2 bring complexity of development to a new level.

3. How it works

Example (4): Custom CMS block on Magento 2 Checkout

Solution:By using UI Components, just like all other components of Magento2 checkout.

3. Conclusion

Magento 2 Checkout looks simpler and nicer on surface, but under hood things are not as nice.

Reality is that Magento 2 in combination with UI components has just become much more complicated than current Magento.

Magento will certainly continue with UI components in further development

3. Conclusion

If you are frontend developer and you wish to work on Magento 2 checkout, you will need to know these things:

● RequireJS - JavaScript dependency manager● Knockout JS and UI Components.● Understand Magento specific data-bind objects.

3. Conclusion

Thank you for your attention

Questions?