MAGETWO-39058: Items in Cart block is NOT automatically expanded on the Payment Step

Author: irenelagno

app/code/Magento/Checkout/view/frontend/web/js/view/summary/cart-items.js

@@ -6,11 +6,14 @@
 /*global define*/
 define(
     [
+        'ko',
         'Magento_Checkout/js/model/totals',
-        'uiComponent'
+        'uiComponent',
+        'Magento_Checkout/js/model/step-navigator',
+        'Magento_Checkout/js/model/quote'
     ],
-    function (totals, Component) {
-        "use strict";
+    function (ko, totals, Component, stepNavigator, quote) {
+        'use strict';
         return Component.extend({
             defaults: {
                 template: 'Magento_Checkout/summary/cart-items'
@@ -19,6 +22,9 @@ define(
             getItems: totals.getItems(),
             getItemsQty: function() {
                 return parseInt(this.totals.items_qty) || 0;
+            },
+            isItemsBlockExpanded: function () {
+                return quote.isVirtual() || stepNavigator.isProcessed('shipping');
             }
         });
     }

app/code/Magento/Checkout/view/frontend/web/template/summary/cart-items.html

@@ -4,7 +4,8 @@
  * See COPYING.txt for license details.
  */
 -->
-<div class="block items-in-cart" data-bind="mageInit: {'collapsible':{'openedState': 'active', 'active': 'true'}}">
+<!-- ko ifnot: isItemsBlockExpanded() -->
+<div class="block items-in-cart" data-bind="mageInit: {'collapsible':{'openedState': 'active'}}">
     <div class="title" data-role="title">
         <strong role="heading"><span data-bind="text: getItemsQty()"></span>
             <!-- ko text: $t('Items in cart') --><!-- /ko -->
@@ -13,16 +14,41 @@
     <div class="content minicart-items" data-role="content">
         <div class="minicart-items-wrapper overflowed">
             <ol class="minicart-items">
-            <!-- ko foreach: getItems -->
+                <!-- ko foreach: getItems -->
                 <li class="product-item">
                     <div class="product">
-                    <!-- ko foreach: $parent.elems() -->
+                        <!-- ko foreach: $parent.elems() -->
                         <!-- ko template: getTemplate() --><!-- /ko -->
-                    <!-- /ko -->
+                        <!-- /ko -->
                     </div>
                 </li>
-            <!-- /ko -->
+                <!-- /ko -->
             </ol>
         </div>
     </div>
 </div>
+<!-- /ko -->
+<!-- ko if: isItemsBlockExpanded() -->
+<div class="block items-in-cart" data-bind="mageInit: {'collapsible':{'openedState': 'active', 'active': true}}">
+    <div class="title" data-role="title">
+        <strong role="heading"><span data-bind="text: getItemsQty()"></span>
+            <!-- ko text: $t('Items in cart') --><!-- /ko -->
+        </strong>
+    </div>
+    <div class="content minicart-items" data-role="content">
+        <div class="minicart-items-wrapper overflowed">
+            <ol class="minicart-items">
+                <!-- ko foreach: getItems -->
+                <li class="product-item">
+                    <div class="product">
+                        <!-- ko foreach: $parent.elems() -->
+                        <!-- ko template: getTemplate() --><!-- /ko -->
+                        <!-- /ko -->
+                    </div>
+                </li>
+                <!-- /ko -->
+            </ol>
+        </div>
+    </div>
+</div>
+<!-- /ko -->