Mladen Ristić (Inchoo): Magento 2 checkout from Frontend perspective Mladen Ristić (Inchoo): Aспекты чекаута в Magento 2 с точки зрения Frontend

1. inchoo.net
Magento 2 Checkout — Frontend perspective
Mladen Ristić

2. inchoo.net
Magento 2 changes:
●New Layout Structure
●New File Structure
●New Frontend Responsive theme
●New Admin theme
Checkout - most radical change on frontend

3. 1. UI differences

4. 1. UI differences
Main UI improvements (1):
● Reduced number of steps
○ Absolutely beneficial for user’s experience.
● Clean and simple interface
○ Easier shopping progress

5. 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

6. 1. UI differences
Main UI improvements (2):
New Magento Checkout – 2 steps:
•Shipping step
•Review & Payment step
New 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

7. 1. UI differences
Other UI improvements
● Simplified header - less elements
● Removed footer
● Progress bar – navigation through steps.
Possible improvement:
● Promo code on last Checkout step
This shows that Magento 2 will be up to date with latest
ecommerce best practices - At least on the surface.

8. 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

9. 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

10. 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.

11. 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

12. 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.

13. 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

14. 3. How it works
Main template file which Magento 2 uses for checkout:
app/code/Magento/Checkout/view/frontend/templates/onepage.phtml

15. 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>

16. 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.

17. 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/templat
e/onepage.html

18. 3. How it works
JSON?
Checkout JSON object
● Holds checkout UI
components
● Generated by a
controller

19. 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/check
out_index_index.xml
Each element of checkout page with all options is
dynamically created in form of a JSON object.

20. 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.

21. 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.

22. 3. How it works

23. 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

24. 3. How it works
Example (2):
XML that didn’t work as expected
<body>
<referenceContainer name="content">
<block class="MagentoCmsBlockBlock" name="free.shipping" after="checkout.sidebar">
<action method="setBlockId">
<argument name="id" xsi:type="string">1</argument>
</action>
</block>
</referenceContainer>
</body>

25. 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.

26. 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.

27. 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

28. 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.

29. 3. Conclusion
Thank you for your attention
Questions?