MAGETWO-33936: Checkout scripts to eliminate (6 script)

- Move initialization of mage.accordion to dependant component

Author: Denys Rul

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

@@ -11,7 +11,19 @@ $_paymentBlock = $block->getLayout()->getBlock('checkout.onepage.payment');
 ?>
 
 <div class="opc-wrapper">
-    <ol class="opc" id="checkoutSteps">
+    <ol class="opc"
+        id="checkoutSteps"
+        data-accordion='{
+                "collapsibleElement": " > li",
+                "openedState": "active"
+            }'
+        data-mage-init='{
+                "opcOrderReview": {
+                    "checkoutAgreements": "#checkout-agreements",
+                    "checkoutProgressContainer": "#checkout-progress-wrapper",
+                    "methodDescription": ".items"
+                }
+            }'>
     <?php $i = 0; foreach ($block->getSteps() as $_stepId => $_stepInfo): ?>
     <?php if (!$block->getChildBlock($_stepId) || !$block->getChildBlock($_stepId)->isShow()): continue; endif; $i++ ?>
         <li id="opc-<?php echo $_stepId ?>" class="section<?php echo !empty($_stepInfo['allow']) ? ' allow' : '' ?><?php echo !empty($_stepInfo['complete']) ? ' saved' : '' ?>">
@@ -25,36 +37,11 @@ $_paymentBlock = $block->getLayout()->getBlock('checkout.onepage.payment');
         </li>
     <?php endforeach ?>
     </ol>
-    <script>
-require([
-    "underscore",
-    "accordion",
-    "opcOrderReview",
-], function(_, accordion, opcOrderReview){
-    'use strict';
-
-    /**
-     * @todo refactor opcCheckoutMethod
-     *
-     * Initializiation of this components can't be moved to a data-mage-init attribute
-     * due to dependencies between instances of opcCheckoutMethod and mage.accordion.
-     * Thus initializiation has to be synchronyous.
-     */
-    var elem = document.getElementById('checkoutSteps'),
-        opcConfig;
-
-    opcConfig = _.extend({
-        'checkoutAgreements': '#checkout-agreements',
-        'checkoutProgressContainer': '#checkout-progress-wrapper',
-        'methodDescription': '.items'
-    },<?php echo $this->helper('Magento\Core\Helper\Data')->jsonEncode($_paymentBlock->getOptions()); ?>);
-
-    accordion({
-        'collapsibleElement': ' > li',
-        'openedState': 'active'
-    }, elem);
-
-    opcOrderReview(opcConfig, elem);
-});
-</script>
+    <script type="text/x-magento-init">
+        {
+           "#checkoutSteps": {
+                "opcOrderReview": <?php echo $this->helper('Magento\Core\Helper\Data')->jsonEncode($_paymentBlock->getOptions()); ?>
+           }    
+        }
+    </script>
 </div>

app/code/Magento/Checkout/view/frontend/web/js/opc-checkout-method.js

@@ -8,10 +8,11 @@
 /*global alert*/
 define([
     "jquery",
+    "accordion",
     "jquery/ui",
     "mage/validation/validation",
     "mage/translate"
-], function($){
+], function($, accordion){
     'use strict';
 
     // Base widget, handle ajax events and first section(Checkout Method) in one page checkout accordion
@@ -43,9 +44,13 @@ define([
 
         _create: function() {
             var self = this;
+            
+            this._initAccordion();
+
             this.sectionActiveClass = this.element.accordion("option","openedState");
             this.contentSelector = this.element.accordion("option","content");
             this.checkoutPrice = this.options.quoteBaseGrandTotal;
+            
             if (this.options.checkout.suggestRegistration) {
                 $(this.options.checkout.loginGuestSelector).prop('checked', false);
                 $(this.options.checkout.loginRegisterSelector).prop('checked', true);
@@ -96,6 +101,12 @@ define([
             });
         },
 
+        _initAccordion: function(){
+            var config = this.element.data('accordion');
+
+            accordion(config, this.element[0]);
+        },
+
         /**
          * Get the checkout steps, disable steps but first, adding callback on before opening section to
          * disable all next steps