Skip to content

Instantly share code, notes, and snippets.

@martinboy
Last active September 5, 2023 12:30
  • Star 7 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save martinboy/ba04bfb692fb63c65180abaea8fc4c5e to your computer and use it in GitHub Desktop.
Magento 2: Extend mixin with mixin in custom theme

Input data

  • initial widget Magento_Theme/js/view/breadcrumbs (vendor/magento/module-theme/view/frontend/web/js/view/breadcrumbs.js)
  • native mixin that extends this widget: Magento_Catalog/js/product/breadcrumbs (vendor/magento/module-catalog/view/frontend/web/js/product/breadcrumbs.js)

Task

Extend methods of the mixin Magento_Catalog/js/product/breadcrumbs

Solution

  • Declare your mixin in custom theme app/design/frontend/[Vendor]/[theme]/Magento_Catalog/requirejs-config.js file and associate it with the initial widget
var config = {
    config: {
        mixins: {
            'Magento_Theme/js/view/breadcrumbs': {
                'Magento_Catalog/js/product/breadcrumbs-mixin': true
            }
        }
    }
};
  • In your custom mixin file app/design/frontend/[Vendor]/[theme]/Magento_Catalog/web/js/product/breadcrumbs-mixin.js define target mixin in define section
define([
    'jquery',
    'Magento_Catalog/js/product/breadcrumbs',
    'jquery/ui'
], function ($) {
    'use strict';
    return function (widget) {
        $.widget('mage.breadcrumbs', widget, {
            /**
             * {@inheritdoc}
             */
            _getCategoryCrumb: function (menuItem) {
                //do some custom stuff
                return this._super(menuItem);
            },
        });
        return $.mage.breadcrumbs;
    };
});
@Eddcapone
Copy link

Eddcapone commented Sep 21, 2021

How does it work with components?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment