0

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;
    });
0

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

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.