#794 lazy cart (#797)

* Remove skip for test

* Load cart lazily

* Apply linter rules

front/js/components/headerCart.es6

@@ -7,20 +7,57 @@
     removeFromCart: '.js-cart-remove',
   };
 
+  const config = {
+    storageKey: 'rendered-cart',
+  };
+
   const init = () => {
-    // @todo #789:60m Load cart lazily.
-    //  See the parent task for details.
+    loadCart();
     setUpListeners();
   };
 
   function setUpListeners() {
-    mediator.subscribe('onCartUpdate', render, configs.initScrollbar, showCart);
+    mediator.subscribe(
+      'onCartUpdate',
+      (_, data) => {
+        render(data.header);
+        saveCart(data.header);
+      },
+      configs.initScrollbar,
+      showCart,
+    );
 
     // Since product's list in Cart dropdown is dynamic, we bind events on static parent
     DOM.$cart.on('click', DOM.resetCart, clear);
     DOM.$cart.on('click', DOM.removeFromCart, remove);
   }
 
+  /**
+   * Load cart lazily to prevent caching of its content
+   * and reach ability to store shared cache for pages.
+   */
+  function loadCart() {
+    const renderedCart = localStorage.getItem(config.storageKey);
+    const renderCart = (html) => {
+      render(html);
+      configs.initScrollbar();
+    };
+
+    if (renderedCart) {
+      renderCart(renderedCart);
+    } else {
+      server.getCart()
+        .then((data) => {
+          renderCart(data.header);
+          saveCart(data.header);
+        });
+    }
+  }
+
+  function saveCart(state) {
+    localStorage.setItem(config.storageKey, state);
+  }
+
   /**
    * Remove product with the given id from cart.
    */
@@ -70,10 +107,10 @@
 
   /**
    * Render new Cart's html.
-   * @param data
+   * @param html
    */
-  function render(_, data) {
-    DOM.$cart.html(data.header);
+  function render(html) {
+    DOM.$cart.html(html);
   }
 
   init();

shopelectro/tests/tests_selenium.py

@@ -388,15 +388,8 @@ def test_load_more_after_filtering(self):
         self.assertEqual(new_product_cards, 96)
 
     @override_settings(DEBUG=True)
-    @unittest.expectedFailure
     def test_cached_cart(self):
-        """
-        The cart state shouldn't be cached on a category page.
-
-        @todo #783:60m Load the cart lazily.
-         It will solve the issue with invalid cart data and
-         bring ability to create cache shared among users.
-        """
+        """The cart state shouldn't be cached on a category page."""
         def add_products_from(url):
             self.browser.get(url)
             self.wait_page_loading()

templates/layout/header.html

@@ -109,7 +109,7 @@
               </div>
 
               <div class="col-md-3 basket-parent js-cart-header">
-                {% include 'ecommerce/header_cart.html' %}
+                <!-- Cart loads lazily -->
               </div>
             </div>
           </div>