Search

Page tree
Skip to end of metadata
Go to start of metadata


eZ Commerce supports generation of breadcrumbs throughout the shop. The customer can currently be in many different parts of the shop, but still there will be at least one generator responsible for creating breadcrumbs. 


The breadcrumb will be generated using a general template called from the pagelayout. There is no need to define html code in full templates:


pagelayout.html.twig
{% block breadcrumb %}
        <div class="crumb-wrap hide-for-print">
          <div class="row">
            <div class="columns">
              {% render(controller('SilversolutionsEshopBundle:Breadcrumbs:renderBreadcrumbs')) %}
            </div>
          </div>
        </div>
 {% endblock %} 


It uses schema.org markup (http://schema.org/BreadcrumbList) for generating the html tags. 

The breadcrumb system is using the WhiteOctober breadcrumbs bundle.

eZ Commerce breadcrumbs supports:

  • creation of breadcrumbs for catalog elements (e.g. products, categories)
  • creation of breadcrumbs for internal shop routes (e.g. my profile, search)
  • creation of breadcrumbs for eZ Platform content
  • creation of breadcrumbs for special eZ Commerce forms (e.g. contact form)
  • different data providers as products may come from different sources
  • generation of breadcrumbs for multiple product catalogs
  • storage of additional data in translationParameters
  • configuration for eZ content fields that should be used as breadcrumb labels

You can configure the eZ fields, that should be used as labels for the (eZ content) breadcrumb nodes.

The first match wins!

parameters:
    siso_core.default.breadcrumb_content_label_fields: ['name', 'title']


 Dataprovider

Dataprovider is the instance that provides the catalog data. eZ Commerce (Advanced version only) provides a flexible way to handle products and categories. Catalog data can be stored in different source in the shop (eZ, DB, solr) and the main goal of the data provider is to fetch the product data from the source and build the catalog elements.

Currently there are two concrete implementations for dataproviders:

Catalog Data CMS eZ

(Ez5CatalogDataProvider)

(tick)  products can be edited in the CMS

(tick)  good for up to 20.000 products

(minus) import of products costs time

customer has no PIM system

and the amount of roducts

Catalog Data eContent

(EcontentCatalogDataProvider)

(tick) allws more than 1 million products

(tick) fast imports

(minus) currently no edit interface in the backend of the CMS

The customer is using a PIM system

or the ERP provides all the product information

Please keep in mind that Breadcrumbs is really connected with a lot of different modules in our shop. Be sure to check these out:


 Why do the breadcrumbs for my controller only display the root element?

Please check the routing.yml.

The RoutesBreadcrumbsGenerator need at least the parameter "breadcrumb_path". This parameter usually contains the key of the current routing definition.

custom_blog_index:
    pattern:  /blog/index
    defaults:
        _controller: AppBundle:Blog:index
        breadcrumb_path: custom_blog_index
        breadcrumb_names: Blog List
 Some or all elements of the breadcrumbs display strange words like some_route_name|breadcrumb?

Please check the routing.yml.

Either no breadcrumb_names is defined, like:

custom_blog_index:
    pattern:  /blog/index
    defaults:
        _controller: AppBundle:Blog:index
        breadcrumb_path: custom_blog_index

Or the number of elements in breadcrumb_names and breadcrumb_path differ, like:

custom_blog_index:
    pattern:  /blog/index
    defaults:
        _controller: AppBundle:Blog:index
        breadcrumb_path: custom_blog_index/new
        breadcrumb_names: Blog List


In these cases, the fallback implementation tries to translate the respective breadcrumb_path elements with context "breadcrumb", which most likely are not translated. The best solution is to have proper path and names configuration and existing translations for the breadcrumb_names' elements:

custom_blog_index:
    pattern:  /blog/index
    defaults:
        _controller: AppBundle:Blog:index
        breadcrumb_path: custom_blog_index/new
        breadcrumb_names: Blog List/New blog post

TODO This example represents the status quo, but does not respect the  translations standards.

 Why are no breadcrumbs displayed at all?

TODO Better description

Possibilities:

  • The 'breadcrumb' block of the pagelayout.html.twig template was overridden by the currently displayed, extending template with emtpy content.
  • The matched generator encountered an error and didn't render the breadcrumbs
  • Very unlikely but not impossible: No generator matched at all. But in the standard setup, the lowest prio RoutesBreadcrumbsGenerator checks the active Router service to match the active Request service. That's SHOULD be always the case.
 How can breadcrumbs be limited to their ez content in sub shops?

The parameter 'content.tree_root.location_id 'is used to limit the sub shops to their ez content ( contains Node ID of the desired catalog).

If 'content.tree_root.location_id'is set, a criterion is used in the CatalogHelper.php to fetch the correct product catalog instead of the default one.

if ($this->configResolver->hasParameter('content.tree_root.location_id')) {
                $ezLocationRootId = $this->configResolver->getParameter('content.tree_root.location_id');
                $ezLocationRoot = $this->locationService->loadLocation($ezLocationRootId);
                $ezLocationRootPath = $ezLocationRoot->pathString;
                $subtreeCriterion = new Criterion\Subtree($ezLocationRootPath);
                $criteria[] = $subtreeCriterion;
            }
 What is the purpose of the additional data stored in translationParameters?

This data can be used to define, for example if a breadcrumb of an eZNode should be clickable or hidden.

Example for not clickable breadcrumbs with bold text, if crumb.translationParameters.type == 'catalog':


vendor/silversolutions/silver.e-shop/src/Silversolutions/Bundle/EshopBundle/Resources/views/Breadcrumbs/breadcrumb_list.html.twig
{% if not loop.last %}
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    {% if crumb.translationParameters.type == 'catalog' %}
      <b>
        <span itemprop="name">{{ crumb.text }}</span>
        <meta itemprop="position" content="{{ loop.index }}"/>
      </b>
    {% else %}
      <a itemprop="item" href="{{ crumb.url }}">
        <span itemprop="name">{{ crumb.text }}</span>
      </a>
      <meta itemprop="position" content="{{ loop.index }}" />
    {% endif %}
  </li>
{% else %}
  {# TODO make last element link configurable #}
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <span itemprop="name">{{ crumb.text }}</span>
    <meta itemprop="position" content="{{ loop.index }}" />
  </li>
{% endif %}



The Breadcrumbs is using a one template, which can be overridden if required. The template is loaded by a Controller which is called from the pagelayout. 

Read more...

In the cookbook you will find a tutorial how to extend own routes using the breadcrumb feature and how to extend the breadcrumb system using own generators. 

Find recipes in cookbook...

In this section you will find more information about the

  • general concept behind the breadcrumb system
  • a description of the breadcrumb generators used in the standard eZ Commerce (RoutesBreadcrumbsGenerator, EzContentBreadcrumbsGenerator, PostSilverModuleBreadcrumbsGenerator, RoutesBreadcrumbsGenerator)

Read more

  • No labels