Magento2: Invisible breadcrumbs at product page when mageMenu widget is not used

[vovayatsyuk]

Preconditions

1. Magento 2.2.4 only

Steps to reproduce

1. Open app/code/Magento/Theme/view/frontend/templates/html/topmenu.phtml
2. Remove the following code from the template:

data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'

1. Navigate to the product page

Expected result

1. Breadcrumbs should remain visible

Actual result

1. Breadcrumbs are not rendered

Explanation

2.2.4 release uses js component to render breadcrumbs on the product page.
Here is its init method:

https://github.com/magento/magento2/blob/3bd8afbbd7fbd876ab65cd2288c52145856a5dc0/app/code/Magento/Catalog/view/frontend/web/js/product/breadcrumbs.js#L23-L36

I don't really know what is this check for if (typeof menu === 'undefined') {, and why do we even need to get mageMenu, maybe @ameysar can help with explanation?

[mageho]

Same issue here (magento 2.2.4)

[ameysar]

@vovayatsyuk these changes were done to fix issue related to Problems with breadcrumbs. If product is assigned to few categories, and category path is not used in product url - first category, product was opened from, was cached within breadcrumb. To resolve this - breadcrumb render was moved to frontend. To get category data (name, url) on frontend - used navigation menu. Vanilla Magento uses mageMenu widget to render menu. As far as UI components rendered asynchronously - was added check if (typeof menu === 'undefined') { (in case widget is not loaded yet) and subscription to widget initialization.

[vovayatsyuk]

1. Menu DOM is not rendered asynchronously. It's rendered directly with PHP.
2. mageMenu is not used to render menu. It's used to make dropdown works.
3. mageMenu instance is not used anywhere in breadcrumbs.js except for the _init method.

So, with current information, I don't see any reason to override _init method, and I think, we can completely remove it.

[lingwooc]

I've just gone through this with my custom/unsupported menu. I'll try and describe what needs to be fixed.

Your menu must be in a nav container and have the right data action AND have a ul in it (even if it has no lis).

<nav class="nav-container" data-action="navigation">
        <ul>

You also need this javascript (since I'm assuming you aren't using the menu widget at all). This sets the menu up and triggers the event if it doesn't beat the breadcrumb js to exection.

       $('[data-action="navigation"] > ul').data('mageMenu',true);
        $('[data-action="navigation"] > ul').trigger('menucreate');

Now the breadcrumb will find the menu but it will still fail because you've not got the ids and classes set right (probably).

You need to set the id of the a tags in your menu to a string with the id of the category in it or you get nothing.

The class of the parent of the a needs to have the class of the form nav-{id} or nav-{parentid}-{id} etc for however far nested it is. If you omit this you don't get parent tags.

It seems like it could have loaded this all from some easily parsed json in a data tag rather than pissing about trying to derive it from tags in the menu that are easily lost. You've got to think all this DOM searching is going to be slower than just having the information output sensibly. It feels like a bodge that assumes too much.

For what its worth with my fixes my breadcrumbs are now fine.

[vovayatsyuk]

@lingwooc, thanks for explanation and solution:

$('[data-action="navigation"] > ul').data('mageMenu', true);

However, it's a bit hacky and may cause errors with third-party modules, as they will expect to get an instance of mageMenu and not a true flag.

Still, the main question is why do we even need to know if mageMenu is initialized while rendering breadcrumbs?

[lingwooc]

It's not blown up for me, so I'm taking that as a win. You may well be right though and you don't need those bits of javascript if you are using the menu widget. You could set it to something less "dangerous" than a true if you wanted. I guess if anyone has a 3rd party module that relies on that they are probably using the menu widget. That may be another bold assumption though.

I think it checks that to see if it is likely to get the right classes and ids. In fairness it didn't for my menu, but crapping out and displaying nothing doesn't feel like a good response. Maybe it should just show a basic breadcrumb and spaff an error out to the console. Like:
Home > Product

[lingwooc]

@vovayatsyuk just seen your message above my first one. If it's not making the DOM then you don't need it. It seems pointless to decide the ids and classes aren't there without just checking for them. Especially since it doesn't fall back to something sensible.

Sadly it's just not very well thought out.

[vovayatsyuk]

Found one dependency between mageMenu and breadcrumbs script:

https://github.com/magento/magento2/blob/4bffc3a45d27d1acbb9de224214a5df1b7e65e8b/app/code/Magento/Catalog/view/frontend/web/js/product/breadcrumbs.js#L94

ID attribute is genereated by jQueryUI menu and looks like ui-id-4

Since it's not a categoryId, I think it could be replaced with mageUtils.uniqueid().

[mageho]

Good afternoon everyone,

Have you some news from Magento core team about this problem and the patch we need to fix it ?

Cheers

[magento-engcom-team]

Hi @vovayatsyuk. Thank you for your report.
The issue has been fixed in magento/magento2#15178 by @vovayatsyuk in 2.2-develop branch
Related commit(s):

• 34a871bad70e60b1277a28481fc597c79101ad90
• 1bcf41c77bb94f92aa90a84821a6cac207a28406

The fix will be available with the upcoming 2.2.5 release.

[mattyl]

on one of our sites we use a custom menu - even with the fix it seems we are forced to use some sort of compatible menu, just for the breadcrumbs - that has to be crazy doesn't it - surely there should be a fall back option? Perhaps some sort of config setting?

[magento-engcom-team]

Hi @vovayatsyuk. Thank you for your report.
The issue has been fixed in magento/magento2#15478 by @vovayatsyuk in 2.3-develop branch
Related commit(s):

• 7b1d1b624bd1e07cc60673b40ee996a7c0dcbd89
• fd03f7c2c508b8994003dcd18b616a0243b7f66f

The fix will be available with the upcoming 2.3.0 release.

[dyron]

Unfortunately this seems not to be included in 2.2.5:

https://github.com/magento/magento2/blob/2.2.5/app/code/Magento/Catalog/view/frontend/web/js/product/breadcrumbs.js

[ghost]

I applied the changes on my theme to the file Magento/Catalog/view/frontend/web/js/product/breadcrumbs.js and the breadcrumbs do show on the page.

The only problem is that the categories do not show on the breadcrumbs while navigating from a category page to the product page. Can you confirm that is fixed on 2.3.0?

[VincentMarmiesse]

The only problem is that the categories do not show on the breadcrumbs while navigating from a category page to the product page

I can confirm this bug on 2.2.5.

EDIT: you have to debug vendor/magento/module-catalog/view/frontend/web/js/product/breadcrumbs.js.
The function _resolveCategoryMenuItem() probably returns null, that's why it doesn't work.
In my case, I had to add data-action="navigation" to my <nav> section.
Also, I had to add the class category-item on my <li> items because of the categoryItemSelector option.