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

 - cover case for product view page

Author: NadiyaS

lib/web/mage/menu.js

@@ -59,7 +59,6 @@ define([
             }
 
             this._assignControls()._listen();
-
             this._setActiveMenu();
         },
 
@@ -111,48 +110,105 @@ 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
+         * Tries to figure out the active category for current page and add appropriate classes:
+         *  - 'active' class for active category
+         *  - 'has-active' class for all parents of active category
          *
-         * @private
+         *  First, checks whether current URL is URL of category page,
+         *  otherwise tries to retrieve category URL in case of current URL is product view page URL
+         *  which has category tree path in it.
          *
          * @return void
+         * @private
          */
         _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);
+            var currentUrl = window.location.href.split('?')[0];
+
+            if (!this._setActiveMenuForCategory(currentUrl)) {
+                this._setActiveMenuForProduct(currentUrl);
             }
         },
 
         /**
-         * Sets 'has-active' CSS class to all parent categories in menu has active category
+         * Looks for category with provided URL and adds 'active' CSS class to it if it was not set before.
+         * If menu item has parent categories, sets 'has-active' class to all af them.
          *
+         * @param {String} url - possible category URL
+         * @returns {boolean} - true if active category was founded by provided URL, otherwise return false
          * @private
+         */
+        _setActiveMenuForCategory: function (url) {
+            var activeCategoryLink = this.element.find('a[href="' + url + '"]'),
+                classes,
+                classNav;
+
+            if (activeCategoryLink && activeCategoryLink.hasClass('ui-corner-all')) {
+
+                if (!activeCategoryLink.parent().hasClass('active')) {
+                    activeCategoryLink.parent().addClass('active');
+                    classes = activeCategoryLink.parent().attr('class');
+                    classNav = classes.match(/(nav\-)[0-9]+(\-[0-9]+)+/gi);
+
+                    if (classNav) {
+                        this._setActiveParent(classNav[0]);
+                    }
+                }
+                return true;
+            }
+            return false;
+        },
+
+        /**
+         * Sets 'has-active' CSS class to all parent categories which have part of provided class in childClassName
+         *
+         * @example:
+         *  childClassName - 'nav-1-2-3'
+         *  CSS class 'has-active' will be added to categories have 'nav-1-2' and 'nav-1' classes
          *
          * @param {String} childClassName - Class name of active category <li> element
          * @return void
+         * @private
          */
         _setActiveParent: function (childClassName) {
-            var parentClass = childClassName.substr(0, childClassName.lastIndexOf('-'));
+            var parentElement,
+                parentClass = childClassName.substr(0, childClassName.lastIndexOf('-'));
+
             if (parentClass.lastIndexOf('-') !== -1) {
-                var parent = this.element.find('.' + parentClass);
-                if (parent) {
-                    parent.addClass('has-active');
+                parentElement = this.element.find('.' + parentClass);
+
+                if (parentElement) {
+                    parentElement.addClass('has-active');
                 }
                 this._setActiveParent(parentClass);
             }
         },
 
+        /**
+         * Tries to retrieve category URL from current URL and mark this category as active
+         * @see _setActiveMenuForCategory(url)
+         *
+         * @example:
+         *  currentUrl - http://magento.com/category1/category12/product.html,
+         *  category URLs has extensions .phtml - http://magento.com/category1.phtml
+         *  method sets active category which has URL http://magento.com/category1/category12.phtml
+         *
+         * @param {String} currentUrl - current page URL without parameters
+         * @return void
+         * @private
+         */
+        _setActiveMenuForProduct: function (currentUrl) {
+            var categoryUrlExtension,
+                possibleCategoryUrl,
+                //retrieve first category URL to know what extension is used for category URLs
+                firstCategoryUrl = this.element.find('> li a').attr('href');
+
+            if (firstCategoryUrl) {
+                categoryUrlExtension = firstCategoryUrl.substr(firstCategoryUrl.lastIndexOf('.'));
+                possibleCategoryUrl = currentUrl.substr(0, currentUrl.lastIndexOf('/')) + categoryUrlExtension;
+                this._setActiveMenuForCategory(possibleCategoryUrl);
+            }
+        },
+
         /**
          * Add class for expanded option.
          */