1

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?

  • 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 '18 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 '18 at 10:12
  • Can do Max glad it sorted for you. – harri Jun 7 '18 at 10:15
  • Added your answer for you with updated module for fixing the issue. – harri Jun 7 '18 at 10:37
5

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

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
  • This does not work for me. :( – Max Jun 6 '18 at 15:54
  • Any errors show? – user68116 Jun 6 '18 at 16:06
  • You added above js ? – user68116 Jun 6 '18 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 '18 at 16:16
  • can you check please github.com/magento/magento2/blob/2.2.4-preview/app/code/Magento/… this override – user68116 Jun 6 '18 at 18:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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