Remove active category in the cache key

- Remove ViewModel;

Author: adifucan

app/code/Magento/Catalog/ViewModel/SeoConfigTopMenu.php

@@ -66,12 +66,5 @@
             <block class="Magento\Framework\View\Element\Js\Components" name="head.components" as="components" template="Magento_Catalog::js/components.phtml"/>
         </referenceContainer>
         <block class="Magento\Framework\View\Element\Template" name="head.additional" as="head.additional" template="Magento_Theme::html/container.phtml"/>
-        <referenceContainer name="page.top">
-            <referenceBlock name="catalog.topnav" template="Magento_Catalog::html/topmenu.phtml">
-                <arguments>
-                    <argument name="viewModel" xsi:type="object">Magento\Catalog\ViewModel\SeoConfigTopMenu</argument>
-                </arguments>
-            </referenceBlock>
-        </referenceContainer>
     </body>
 </page>

app/code/Magento/Catalog/view/frontend/layout/default.xml

@@ -16,7 +16,6 @@ define([
      */
     $.widget('mage.menu', $.ui.menu, {
         options: {
-            useCategoryPathInUrl: false,
             categoryLayoutClass: 'catalog-product-view',
             responsive: false,
             expanded: false,
@@ -200,61 +199,56 @@ define([
         /**
          * Determines if the current page is a product page.
          * It checks the catalog product view related class in the body tag of the document.
-         * The result is cached after the first check to optimize performance for subsequent calls.
          *
          * @return {Boolean} True if the current page is a product page, false otherwise.
          * @private
          */
         _isProductPage: function () {
-            // Cache the result if called multiple times
-            if (this._cachedIsProductPage === undefined) {
-                this._cachedIsProductPage = document.body.classList.contains(this.options.categoryLayoutClass);
-            }
-            return this._cachedIsProductPage;
+            return document.body.classList.contains(this.options.categoryLayoutClass);
         },
 
         /**
-         * Sets the active state in the menu for a product page.
-         * It first tries to determine the category URL based on the referrer or the current URL.
-         * If 'useCategoryPathInUrl' is enabled, it uses the current URL and appends the dynamically determined category URL suffix.
-         * Otherwise, it uses the referrer URL or the current URL with the dynamically determined category URL suffix.
-         * If a valid category URL is found, it sets the corresponding category as active in the menu.
-         * If no valid category URL is found, it clears the active state.
+         * Sets the active state in the menu for a product page. Determines the category URL from either
+         * the referrer URL or the current URL, using the URL extension to identify the category.
+         * Sets the corresponding category as active in the menu if a valid category URL is found.
+         * Clears the active state if no valid category URL is found or if it's not a product page.
          *
-         * @param {String} currentUrl - current page URL without parameters
-         * @return {Boolean}
+         * @param {String} currentUrl - The current page URL without parameters.
+         * @return {Boolean} - True if a valid category is set, false otherwise.
          * @private
          */
         _setActiveMenuForProduct: function (currentUrl) {
             var firstCategoryUrl = this.element.find('> li a').attr('href');
 
-            // If no category URL is found in the menu, return false.
+            // Return false if no category URL is found in the menu.
             if (!firstCategoryUrl) {
+                this._clearActiveState();
                 return false;
             }
 
             var categoryUrlExtension = this._getUrlExtension(firstCategoryUrl);
             var categoryUrl;
+            var isProductPage = this._isProductPage();
 
-            if (this.options.useCategoryPathInUrl) {
-                // Derive the category URL from the current URL and append the dynamically determined URL extension
-                categoryUrl = currentUrl.substring(0, currentUrl.lastIndexOf('/')) + categoryUrlExtension;
-            } else {
-                var referrer = new URL(document.referrer);
-                var isProductPage = this._isProductPage();
+            if (isProductPage) {
+                var currentHostname = window.location.hostname;
 
-                if (referrer.hostname === window.location.hostname && referrer.pathname.endsWith(categoryUrlExtension) && isProductPage) {
-                    categoryUrl = referrer.href.split('?')[0];
-                } else if (isProductPage) {
-                    categoryUrl = currentUrl.substring(0, currentUrl.lastIndexOf('/')) + categoryUrlExtension;
+                // Check if the referrer's hostname matches the current hostname
+                // and if the referrer's pathname ends with the category URL extension
+                if (document.referrer.includes(currentHostname) && document.referrer.endsWith(categoryUrlExtension)) {
+                    categoryUrl = document.referrer.split('?')[0];
                 } else {
-                    this._clearActiveState();
-                    return false;
+                    // Fallback to using the current URL
+                    categoryUrl = currentUrl.substring(0, currentUrl.lastIndexOf('/')) + categoryUrlExtension;
                 }
+
+                this._setActiveMenuForCategory(categoryUrl);
+                return true;
             }
 
-            this._setActiveMenuForCategory(categoryUrl);
-            return true;
+            // Clear active state if not a product page
+            this._clearActiveState();
+            return false;
         },
 
         /**