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.
© 2017 Pronko Consulting www.pronkoconsulting.com
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Extending Checkout…
• UI component
• XML
• Layout pr...
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Checkout UI Component
define([
'uiComponent'
], func...
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Checkout UI Component - Declaration
<item name="logi...
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Checkout Layout XML
<referenceBlock name="checkout.r...
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
The jsLayout
$jsLayout[‘components’][‘checkout’]['ch...
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Layout Processor - Dynamic Changes
namespace MageTit...
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Adding Layout Processor via di.xml
<type name="Magen...
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Configuration Provider
namespace MageTitansSubscript...
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Adding Config Provider via di.xml
<type name="Magent...
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Plugin/Interceptor
namespace MageTitansCheckoutPlugi...
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Custom Template
<div class="control">
<input class=“...
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
JavaScript Mixin
return function (emailComponent) {
...
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
JavaScript Component Extend
define(
[
'Magento_Check...
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Answer
• New UI Component definition in the checkout...
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
© 2017 Pronko Consulting www.pronkoconsulting.com
youtube.com/maxpronko
© 2016 Magento, Inc.© 2017 Pronko Consulting www.pronkoconsulting.com
Summary
• UI Component -> flexibility
• Custom featu...
© 2017 Pronko Consulting www.pronkoconsulting.com
THANK YOU!
@max_pronko
www.maxpronko.com
Upcoming SlideShare
Loading in …5
×

of

Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 1 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 2 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 3 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 4 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 5 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 6 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 7 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 8 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 9 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 10 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 11 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 12 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 13 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 14 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 15 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 16 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 17 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 18 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 19 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 20 Checkout Customizations in Magento 2 - MageTitansMCR 2017 Slide 21
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Checkout Customizations in Magento 2 - MageTitansMCR 2017

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all
  • 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

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.

Views

Total views

435

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

5

Shares

0

Comments

0

Likes

0

×