Breadcrumbs not displaying on Product Page Magento-2.2.4
-
14-04-2021 - |
题
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>
解决方案
I had faced the same issue but its resolved. Please check the below link.
其他提示
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" />
- The first line sets the template which is used on non-product-pages.
- The second line instantiates the given block class which adds the breadcrumb-paths to the first block.
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;
}
}
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
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
yes I saw that the issue caused by the cache when someone opens the product from the search or from a custom widget the product page will be opened without category breadcrumbs and as well will be cached as it