Extending Javascript Plugin

Shopware 6 (German) Programmierung
1

Hallo, ich würde gern ein Javascript erweitern bzw. überschreiben. Dazu bin ich nach dieser Anleitung vorgegangen.
Leider bekomme ich im Frontend dann folgenden Fehler in der Konsole:

Error: The plugin "SearchWidget" is not registered.

Meine main.js sieht so aus:

// Import all necessary Storefront plugins and scss files
import netzkomSearchWidget from './js/search-widget.plugin';

// Register them via the existing PluginManager
const PluginManager = window.PluginManager;
PluginManager.override('SearchWidget', netzkomSearchWidget);

// Necessary for the webpack hot module reloading server
if (module.hot) {
    module.hot.accept();
}

meine js/search-widget.plugin.js so:

import SearchWidgetPlugin from 'src/plugin/header/search-widget.plugin';

export default class netzkomSearchWidget extends SearchWidgetPlugin {
    /**
     * Sets the focus on the input field
     * @private
     */
    _focusInput() {
        alert('click');
        if (!this._toggleButton.classList.contains(this.options.searchWidgetCollapseClass)) {
            this._toggleButton.blur(); // otherwise iOS won´t focus the field.
            this._inputField.setAttribute('tabindex', '-1');
            this._inputField.focus();
        }

        this.$emitter.publish('focusInput');
    }
}

Warum ist das original Plugin nicht registriert? kann man irgendwo die Reihenfolge festlegen in der die PLugins kompiliert werden? oder habe ich einen anderen Fehler?

danke.

2 
 SearchWidgetPlugin vs. SearchWidget

main.js sollte so aussehen:

// Import all necessary Storefront plugins and scss files
import netzkomSearchWidget from './js/search-widget.plugin';

// Register them via the existing PluginManager
const PluginManager = window.PluginManager;
PluginManager.override('SearchWidgetPlugin', netzkomSearchWidget);

// Necessary for the webpack hot module reloading server
if (module.hot) {
    module.hot.accept();
}

 

3

@thom schrieb:

SearchWidgetPlugin vs. SearchWidget

main.js sollte so aussehen:

// Import all necessary Storefront plugins and scss files
import netzkomSearchWidget from ‚./js/search-widget.plugin‘;

// Register them via the existing PluginManager
const PluginManager = window.PluginManager;
PluginManager.override(‚SearchWidgetPlugin‘, netzkomSearchWidget);

// Necessary for the webpack hot module reloading server
if (module.hot) {
module.hot.accept();
}

 

hi, danke für deine Antwort. ich glaube da ist was mit der Codeformatierung schief gelaufen oder? Wenn du darauf hinaus willst,  im override statt SearchWidget, SearchWidgetPlugin zu schreiben, das habe ich schon versucht. Gleiches ergebnis nur dass in der Konsole dann SearchWidgetPlugin als nicht registriert angemeckert wird.
In der vendor/shopware/platform/src/Storefront/Resources/app/storefront/src/main.js wird das Plugin auch als SearchWidget registriert.

4

Versuch den override mal mit dem Tag:

PluginManager.override('SearchWidget', netzkomSearchWidget, '[data-search-form]');

 

1 „Gefällt mir“
5

@gigabit schrieb:

Versuch den override mal mit dem Tag:

PluginManager.override(‚SearchWidget‘, netzkomSearchWidget, ‚[data-search-form]‘);

 

ist ja verrückt! das klappt. vielen Dank.