3

After to Magento 2.2.4 breadcrumbs are not working anymore on the product page. It seems like it works on other pages, tho.

in cms_index_index.xml I have removed breadcrumbs beacuse we dont want them visible on the homepage. However, for other pages the breadcrumb should be there. It is, for example on the category page, Contact Page and so on.

Just not on the product page. What could be the reason to that and how to fix it?

4
  • I have had similar difficulties with breadcrumbs on 2.2.4 has changed dramatically, have you any modules that may interfere here? From what i have noticed default navigation is needed now so modules for a megamenu messed me up. magento.stackexchange.com/questions/225370/…
    – harri
    Jun 6, 2018 at 17:05
  • @harri Your solution worked as a charm. You might want to create an correct answer here to spread the workaround.
    – Max
    Jun 7, 2018 at 10:12
  • Can do Max glad it sorted for you.
    – harri
    Jun 7, 2018 at 10:15
  • Added your answer for you with updated module for fixing the issue.
    – harri
    Jun 7, 2018 at 10:37

2 Answers 2

8

Breadcrumbs within 2.2.4 have changed dramatically is seems. Default navigation is needed now so modules for a Megamenu messed my Breadcrumbs up and switching back to default navigation fixed them for me. If however you want my alternative to breadcrumbs which change how the breadcrumbs work on product pages see below answer:

Magento 2.2.4 - Breadcrumbs do not show on product pages when default navigation is not present

This does create a breadcrumb trail when searching for products or if you have a warm up script so breadcrumbs are always present rather than normally where they can get cached without a trail.

This is based on my module here I haven't thoroughly tested it however have just updated it for 2.2.4 based on my answer so please let me know of any issues:

https://github.com/harrigo/EverCrumbs

1
  • hi @harri, this is not working in magento 2.3.4, showing invalid categories in the detail page Jun 4, 2020 at 13:58
3

Create file:

app/design/frontend/Vendor/Theme/Magento_Catalog/web/js/product/breadcrumbs.js

Add this jquery

define([
    'jquery',
    'Magento_Theme/js/model/breadcrumb-list'
], function ($, breadcrumbList) {
    'use strict';

    return function (widget) {
        $.widget('mage.breadcrumbs', widget, {
            options: {
                categoryUrlSuffix: '',
                useCategoryPathInUrl: false,
                product: '',
                menuContainer: '[data-action="navigation"] > ul'
            },

            /** @inheritdoc */
            _render: function () {
                this._appendCatalogCrumbs();
                this._super();
            },

            /**
             * Append category and product crumbs.
             *
             * @private
             */
            _appendCatalogCrumbs: function () {
                var categoryCrumbs = this._resolveCategoryCrumbs();

                categoryCrumbs.forEach(function (crumbInfo) {
                    breadcrumbList.push(crumbInfo);
                });

                if (this.options.product) {
                    breadcrumbList.push(this._getProductCrumb());
                }
            },

            /**
             * Resolve categories crumbs.
             *
             * @return Array
             * @private
             */
            _resolveCategoryCrumbs: function () {
                var menuItem = this._resolveCategoryMenuItem(),
                    categoryCrumbs = [];

                if (menuItem !== null && menuItem.length) {
                    categoryCrumbs.unshift(this._getCategoryCrumb(menuItem));

                    while ((menuItem = this._getParentMenuItem(menuItem)) !== null) {
                        categoryCrumbs.unshift(this._getCategoryCrumb(menuItem));
                    }
                }

                return categoryCrumbs;
            },

            /**
             * Returns crumb data.
             *
             * @param {Object} menuItem
             * @return {Object}
             * @private
             */
            _getCategoryCrumb: function (menuItem) {
                var categoryId,
                    categoryName,
                    categoryUrl;

                categoryId = /(\d+)/i.exec(menuItem.attr('id'))[0];
                categoryName = menuItem.text();
                categoryUrl = menuItem.attr('href');

                return {
                    'name': 'category',
                    'label': menuItem.text(),
                    'link': menuItem.attr('href'),
                    'title': ''
                };
            },

            /**
             * Returns product crumb.
             *
             * @return {Object}
             * @private
             */
            _getProductCrumb: function () {
                return {
                    'name': 'product',
                    'label': this.options.product,
                    'link': '',
                    'title': ''
                };
            },

            /**
             * Find parent menu item for current.
             *
             * @param {Object} menuItem
             * @return {Object|null}
             * @private
             */
            _getParentMenuItem: function (menuItem) {
                var classes,
                    classNav,
                    parentClass,
                    parentMenuItem = null;

                if (!menuItem) {
                    return null;
                }

                classes = menuItem.parent().attr('class');
                classNav = classes.match(/(nav\-)[0-9]+(\-[0-9]+)+/gi);

                if (classNav) {
                    classNav = classNav[0];
                    parentClass = classNav.substr(0, classNav.lastIndexOf('-'));

                    if (parentClass.lastIndexOf('-') !== -1) {
                        parentMenuItem = $(this.options.menuContainer).find('.' + parentClass + ' > a');
                        parentMenuItem = parentMenuItem.length ? parentMenuItem : null;
                    }
                }

                return parentMenuItem;
            },

            /**
             * Returns category menu item.
             *
             * Tries to resolve category from url or from referrer as fallback and
             * find menu item from navigation menu by category url.
             *
             * @return {Object|null}
             * @private
             */
            _resolveCategoryMenuItem: function () {
                var categoryUrl = this._resolveCategoryUrl(),
                    menu = $(this.options.menuContainer),
                    categoryMenuItem = null;

                if (categoryUrl && menu.length) {
                    categoryMenuItem = menu.find('a[href="' + categoryUrl + '"]');
                }

                return categoryMenuItem;
            },

            /**
             * Returns category url.
             *
             * @return {String}
             * @private
             */
            _resolveCategoryUrl: function () {
                var categoryUrl;

                if (this.options.useCategoryPathInUrl) {
                    // In case category path is used in product url - resolve category url from current url.
                    categoryUrl = window.location.href.split('?')[0];
                    categoryUrl = categoryUrl.substring(0, categoryUrl.lastIndexOf('/')) +
                        this.options.categoryUrlSuffix;
                } else {
                    // In other case - try to resolve it from referrer (without parameters).
                    categoryUrl = document.referrer;

                    if (categoryUrl.indexOf('?') > 0) {
                        categoryUrl = categoryUrl.substr(0, categoryUrl.indexOf('?'));
                    }
                }

                return categoryUrl;
            }
        });

        return $.mage.breadcrumbs;
    };
});

and after run deploy Command:

php bin/magento setup:static-content:deploy -f
8
  • This does not work for me. :(
    – Max
    Jun 6, 2018 at 15:54
  • Any errors show?
    – user68116
    Jun 6, 2018 at 16:06
  • You added above js ?
    – user68116
    Jun 6, 2018 at 16:10
  • Yes. Please note that its Magento 2.2.4 which does not have a breadcrumbs.js-file in its source origin (module-catalog/view/js/product contains no breadcrumbs.js so it will not be loaded).
    – Max
    Jun 6, 2018 at 16:16
  • can you check please github.com/magento/magento2/blob/2.2.4-preview/app/code/Magento/… this override
    – user68116
    Jun 6, 2018 at 18:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.