Magento – Trying to override magento2 product view breadcrumbs

breadcrumbsjavascriptmagento2magento2.3requirejs

So i tried to change the breadcrumbs.html JS template for magento 2.3 product view breadcrumbs in <themedir>/Magento_Theme/web/templates/breadcrumbs.html, but ive been stuck on this for half a day or so now, the template inheritance does not seem to be working with this file the same as it does others, since creating the file in my theme directory ive deleted static files in pub/static, my browser cache is turned off on the page, this is the replacement template :

  <ol class="breadcrumb">
  <% _.each(breadcrumbs, function(crumb) { %>
      <li class="breadcrumb-item <%- crumb.name %>">
          <% if (crumb.link) { %>
          <a href="<%= crumb.link %>" title="<%- crumb.title %>"><%- crumb.label %></a>
          <% } else if (crumb.last) { %>
          <strong><%= crumb.label %><strong>
          <% } else { %>
          <%= crumb.label %>
          <% } %>
      </li>
  <% }); %>
  </ol>

which does not seem to override the default template located at app/code/Magento/Theme/view/frontend/web/templates/breadcrumbs.html

i can see the breadcrumbs are called through magento JS, im not sure quite exactly what is going on with it, this is the phtml that magento calls to create the breadcrumbs in php from Magento_Catalog/templates/product/breadcrumbs.phtml but that is just building a JSON object to pass into magento JS

    <?php
    /**
     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
     */
    /** @var \Magento\Theme\Block\Html\Breadcrumbs $block */
    /** @var \Magento\Catalog\ViewModel\Product\Breadcrumbs $viewModel */
    $viewModel = $block->getData('viewModel');
    ?>
    <div class="container mt-2 breadcrumbs">
    </div>

    <script type="text/x-magento-init">
            {
                ".breadcrumbs": <?= $viewModel->getJsonConfigurationHtmlEscaped() ?>
            }
    </script>

i can see in the theme directory there is a breadcrumbs file at: app/code/Magento/Theme/view/frontend/web/js/view/breadcrumbs.js
I have not tried to override this file yet, is there some reason why i can override other JS html templates but not breadcrumbs.html in magento theme

    /**
     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
     */

    define([
        'jquery',
        'mage/template',
        'Magento_Theme/js/model/breadcrumb-list',
        'text!Magento_Theme/templates/breadcrumbs.html',
        'jquery/ui'
    ], function ($, mageTemplate, breadcrumbList, tpl) {
        'use strict';

        /**
         * Breadcrumb Widget.
         */
        $.widget('mage.breadcrumbs', {

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

            /**
             * Render breadcrumb.
             *
             * @private
             */
            _render: function () {
                var html,
                    crumbs = breadcrumbList,
                    template = mageTemplate(tpl);

                this._decorate(crumbs);

                html = template({
                    'breadcrumbs': crumbs
                });

                if (html.length) {
                    $(this.element).html(html);
                }
            },

            /**
             * Decorate list.
             *
             * @param {Array} list
             * @private
             */
            _decorate: function (list) {

                if (list.length) {
                    list[0].first = true;
                }

                if (list.length > 1) {
                    list[list.length - 1].last = true;
                }
            }
        });

        return $.mage.breadcrumbs;
    });

Best Answer

This seems to have corrected itself, something between the cache in magento and the browser cache must have been stopping it from updating, it is now running the right template

Related Topic