Checkout is probably one of the complex implementations in Magento 2. It is a crucial part of the eCommerce platform and importance of high-quality customizations cannot be underestimated. We will go through code examples on how to extend checkout functionality in the way that complies with the Magento 2 best practices.

1. © 2017 Pronko Consulting www.pronkoconsulting.com

2. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com

3. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Extending Checkout…
• UI component
• XML
• Layout processor
• Config provider
• Plugin/Interceptor
• Template
• JavaScript Component
• JavaScript Mixin
• Extension Attributes

4. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Checkout UI Component
define([
'uiComponent'
], function (Component) {
'use strict';
return Component.extend({
defaults: {
template: 'Giftsdirect_Checkout/messages'
}
});
});
<div id="messages" class="messages" data-bind="html: content"></div>

5. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Checkout UI Component - Declaration
<item name="login-errors" xsi:type="array">
<item name="component" xsi:type=“string">MageTitans/js/view/messages</item>
<item name="displayArea" xsi:type="string">login-messages</item>
</item>

6. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Checkout Layout XML
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="customer-email" xsi:type="array">
<item name="template" xsi:type="string">email</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>

7. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
The jsLayout
$jsLayout[‘components’][‘checkout’]['children']
['steps']['children']
[‘shipping-step'][‘children']
['shippingAddress']['children']
[‘customer-email']['template'];

8. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Layout Processor - Dynamic Changes
namespace MageTitansCheckoutBlock;
use MagentoCheckoutBlockCheckoutLayoutProcessorInterface;
class PromotionalLayoutProcessor implements LayoutProcessorInterface
{
public function process($jsLayout)
{
$jsLayout['components']['checkout']['children']
['promotional']['config']['content'] = $this->provider->get();
return $jsLayout;
}
}

9. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Adding Layout Processor via di.xml
<type name="MagentoCheckoutBlockOnepage">
<arguments>
<argument name="layoutProcessors" xsi:type="array">
<item name=“promoProcessor" xsi:type="object>PromoLayoutProcessor</item>
</argument>
</arguments>
</type>

10. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Configuration Provider
namespace MageTitansSubscriptionModel;
use MagentoCheckoutModelConfigProviderInterface;
class ConfigProvider implements ConfigProviderInterface
{
public function getConfig()
{
return [
'subscription' => [
'showOnCheckout' => $this->config->showCheckboxOnCheckout()
]
];
}
}

11. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Adding Config Provider via di.xml
<type name="MagentoCheckoutModelCompositeConfigProvider">
<arguments>
<argument name="configProviders" xsi:type="array">
<item name="subscription" xsi:type="object">MageTitansConfigProvider</item>
</argument>
</arguments>
</type>
return parseInt(window.checkoutConfig.subscription.showOnCheckout)

12. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Plugin/Interceptor
namespace MageTitansCheckoutPlugin;
use MagentoCheckoutBlockCheckoutLayoutProcessor;
class AddressLayoutProcessor
{
public function afterProcess(LayoutProcessor $subject, array $jsLayout)
{
// custom validation, templates, config
return $jsLayout;
}
}

13. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Custom Template
<div class="control">
<input class=“input-text"
type=“password" name=“password" id="customer-password"
data-validate="{required:true, 'validate-password':true}"/>
<!-- ko foreach: getRegion('login-messages') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!—/ko-->
</div>

14. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
JavaScript Mixin
return function (emailComponent) {
return wrapper.wrap(emailComponent, function(action, component) {
component.login = function(loginForm) {
// pass message component to Login Action
};
return action(component);
});
};

15. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
JavaScript Component Extend
define(
[
'Magento_Checkout/js/view/summary/abstract-total'
],
function (Component) {
'use strict';
return Component.extend({
defaults: {
title: 'You Save',
template: 'MageTitans/total-savings'
},
getValue: function() {
return this.getFormattedPrice(9.99);
}
});
}
);

16. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com

17. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Answer
• New UI Component definition in the checkout_index_index.xml
• New HTML template with CSS class
• Layout Processor plugin
• Declare plugin in the di.xml
• (optional) more code for billing address
https://magento.stackexchange.com/questions/186805

18. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com

19. © 2017 Pronko Consulting www.pronkoconsulting.com
youtube.com/maxpronko

20. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Summary
• UI Component -> flexibility
• Custom feature -> template override
• Optimal implementation -> time
• Extension Attributes -> Custom Storage
• Observable Variables -> track changes

21. © 2017 Pronko Consulting www.pronkoconsulting.com
THANK YOU!
@max_pronko
www.maxpronko.com