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 Customizations in Magento 2 - MageTitansMCR 2017

263 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Checkout Customizations in Magento 2 - MageTitansMCR 2017

  1. 1. © 2017 Pronko Consulting www.pronkoconsulting.com
  2. 2. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
  17. 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. 18. © 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
  19. 19. © 2017 Pronko Consulting www.pronkoconsulting.com youtube.com/maxpronko
  20. 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. 21. © 2017 Pronko Consulting www.pronkoconsulting.com THANK YOU! @max_pronko www.maxpronko.com

×