2

After upgrade breadcrumbs from product page disappear. As suggested, I have updated my breadcrumbs.js but still not showing. Only displaying code like below.

<div class="breadcrumbs" data-mage-init='{
    "breadcrumbs": {
        "categoryUrlSuffix": ".html",
        "useCategoryPathInUrl": 0,
        "product": "Aquasure Dash Series Countertop Drinking  Water System with Micro-Ceramic Filtration"
    }
  }'>
</div>
  • check console log, something is stopping Magento JS to render /read data-mage-init – kunj Jun 8 '18 at 13:25
  • There is no any error in my console. – rakesh kumar Jun 8 '18 at 13:37
  • Are you use default theme or custom theme? – Suresh Chikani Jun 8 '18 at 13:42
  • I am using a custom theme. – rakesh kumar Jun 8 '18 at 13:43
  • is there others data-mage-init in your browsers HTML? Actually, Magento remove that attribute if successfully run function/JS which calling in data-mage-init. – kunj Jun 8 '18 at 14:23
0

I had faced the same issue but its resolved. Please check the below link.

Breadcrumbs not working on Product Page Magento 2.2.4

  • I am not creating a module but using the same code in Magento block(breadcrumbs.php) and template(breadcrumbs.phtml) but not working. – rakesh kumar Jun 8 '18 at 13:53
  • Are you using custom theme or any purchased theme? – Sukumar Gorai Jun 8 '18 at 13:58
  • I am using purchased theme. – rakesh kumar Jun 8 '18 at 14:01
  • Did you check the demo of that purchased theme to confirm whether its working there or not? – Sukumar Gorai Jun 8 '18 at 14:09
  • It was working earlier version but after the upgrade, it is not working. – rakesh kumar Jun 8 '18 at 14:13
7

It's still possible to activate the classic breadcrumb. Just put these lines into your layout-xml:

<referenceBlock name="breadcrumbs" template="Magento_Theme::html/breadcrumbs.phtml" />
<block class="Magento\Catalog\Block\Breadcrumbs" />
  1. The first line sets the template which is used on non-product-pages.
  2. The second line instantiates the given block class which adds the breadcrumb-paths to the first block.
1

Just overwrite the Plugin

[Vendor]/[Module]/etc/frontend/di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Catalog\Controller\Product\View">
        <plugin name="custom_product_breadcrumbs" type="Vendor\Module\Plugin\Product\View" sortOrder="1"/>
    </type>
</config>

app/code/Vendor/Module/Plugin/Product

<?php 

namespace Vendor\Module\Plugin\Product;

use Magento\Catalog\Controller\Product\View as MagentoView;
use Magento\Catalog\Model\Product;
use Magento\Framework\View\Result\PageFactory;
use Magento\Store\Model\StoreManager;
use Magento\Framework\Registry;
use Magento\Framework\Exception\LocalizedException;
use Magento\Catalog\Model\ResourceModel\Category\Collection;
use Magento\Framework\View\Result\Page;

class View
{

    /**
     * @var Product
     */
    protected $product;
    /**
     * @var StoreManager
     */
    protected $storeManager;
    /**
     * @var Registry
     */
    protected $registry;
    /**
     * @var Collection
     */
    protected $collection;
    /**
     * @var PageFactory
     */
    private $resultPage;


    /**
     * View constructor.
     * @param StoreManager $storeManager
     * @param Registry $registry
     * @param Collection $collection
     * @param PageFactory $resultPage
     */
    public function __construct(
        StoreManager $storeManager,
        Registry $registry,
        Collection $collection,
        PageFactory $resultPage)
    {
        $this->storeManager = $storeManager;
        $this->registry = $registry;
        $this->collection = $collection;
        $this->resultPage = $resultPage;
    }

    public function afterExecute(MagentoView $subject, $result)
    {
        if(!$result instanceof Page){
            return $result;
        }

        $resultPage = $this->resultPage->create();
        $breadcrumbsBlock = $resultPage->getLayout()->getBlock('breadcrumbs');
        if(!$breadcrumbsBlock || !isset($breadcrumbsBlock)){
            return $result;

        }
        $breadcrumbsBlock->addCrumb(
            'home',
            [
                'label' => __('Home'),
                'title' => __('Go to Home Page'),
                'link' => $this->storeManager->getStore()->getBaseUrl()
            ]
        );

        try {
            $product = $this->getProduct();
        } catch (LocalizedException $e) {
            return $result;
        }

        $resultPage->getConfig()->getTitle()->set($product->getName());

        if(null == $product->getCategory() || null == $product->getCategory()->getPath()){
            $breadcrumbsBlock->addCrumb(
                'cms_page',
                [
                    'label' => $product->getName(),
                    'title' => $product->getName(),
                ]
            );
            return $result;
        }

        $categories = $product->getCategory()->getPath();
        $categoriesids = explode('/', $categories);

        $categoriesCollection = null;
        try {
            $categoriesCollection = $this->collection
                ->addFieldToFilter('entity_id', array('in' => $categoriesids))
                ->addAttributeToSelect('name')
                ->addAttributeToSelect('url_key')
                ->addAttributeToSelect('include_in_menu')
                ->addAttributeToSelect('is_active')
                ->addAttributeToSelect('is_anchor');
        } catch (LocalizedException $e) {
            return $result;
        }

        foreach ($categoriesCollection->getItems() as $category) {
            if ($category->getIsActive() && $category->isInRootCategoryList()) {
                $categoryId = $category->getId();
                $path = [
                    'label' => $category->getName(),
                    'link' => $category->getUrl() ? $category->getUrl() : ''
                ];
                $breadcrumbsBlock->addCrumb('category' . $categoryId, $path);
            }
        }

        $breadcrumbsBlock->addCrumb(
            'cms_page',
            [
                'label' => $product->getName(),
                'title' => $product->getName(),
            ]
        );

        return $result;
    }

    /**
     * @return Product
     * @throws LocalizedException
     */
    public function getProduct()
    {
        if (is_null($this->product)) {
            $this->product = $this->registry->registry('product');

            if (!$this->product->getId()) {
                throw new LocalizedException(__('Failed to initializing product'));
            }
        }

        return $this->product;
    }
}
0

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:

1. php bin/magento setup:upgrade 
2. php bin/magento setup:static-content:deploy -f
0

It's a known bug (actually a feature) that only comes up when you upgrade from 2.2.3 to 2.2.4 and have a non-standard topmenu (yes, you read right): https://github.com/magento/magento2/issues/15490

Workaround that worked for me: Magento2: breadcrumbs disappeared from product page after upgrading to 2.2.4

  • I already tried both but somehow it is not working for me. – rakesh kumar Jun 8 '18 at 13:37

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.