MAGETWO-49796: Catalog top nav, CSS class not set to active when using Varnish

Author: NadiyaS

lib/web/mage/menu.js

@@ -59,6 +59,8 @@ define([
             }
 
             this._assignControls()._listen();
+
+            this._setActiveMenu();
         },
 
         /**
@@ -108,6 +110,49 @@ define([
             }
         },
 
+        /**
+         * Sets 'active' CSS class to menu item for active category if it was not set before.
+         * If menu item has parent categories, sets 'has-active' class to all af them
+         *
+         * @private
+         *
+         * @return void
+         */
+        _setActiveMenu: function () {
+            var currentUrl = window.location.href.split('?')[0],
+                activeCategoryLink = this.element.find('a[href="' + currentUrl + '"]');
+
+            if (activeCategoryLink && activeCategoryLink.parent().hasClass('active') !== true
+                && activeCategoryLink.hasClass('ui-corner-all')
+            ) {
+                activeCategoryLink.parent().addClass('active');
+                var classes = activeCategoryLink.parent().attr('class'),
+                    classStartPosition = classes.indexOf('nav-'),
+                    classNav = classes.substring(classStartPosition, classes.indexOf(' ', classStartPosition));
+
+                this._setActiveParent(classNav);
+            }
+        },
+
+        /**
+         * Sets 'has-active' CSS class to all parent categories in menu has active category
+         *
+         * @private
+         *
+         * @param {String} childClassName - Class name of active category <li> element
+         * @return void
+         */
+        _setActiveParent: function (childClassName) {
+            var parentClass = childClassName.substr(0, childClassName.lastIndexOf('-'));
+            if (parentClass.lastIndexOf('-') !== -1) {
+                var parent = this.element.find('.' + parentClass);
+                if (parent) {
+                    parent.addClass('has-active');
+                }
+                this._setActiveParent(parentClass);
+            }
+        },
+
         /**
          * Add class for expanded option.
          */