# Extending Javascript Plugin

**URL:** <https://forum.shopware.com/t/extending-javascript-plugin/66135>\
**Category:** Programmierung\
**Created:** [8. April 2020 um 13:29 UTC](https://forum.shopware.com/t/extending-javascript-plugin/66135 "2020-04-08T13:29:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![hbee](https://avatars.discourse-cdn.com/v4/letter/h/f08c70/32.png) [@hbee](https://forum.shopware.com/u/hbee)\
**Post date:** [8. April 2020 um 13:29 UTC](https://forum.shopware.com/t/extending-javascript-plugin/66135/1 "2020-04-08T13:29:59Z")

</div>

Hallo, ich würde gern ein Javascript erweitern bzw. überschreiben. Dazu bin ich nach [dieser Anleitung](https://docs.shopware.com/en/shopware-platform-dev-en/how-to/extend-core-js-storefront-plugin?category=shopware-platform-dev-en/how-to) 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.

---

<div class="post-metadata">

**Author:** ![TAB10](https://avatars.discourse-cdn.com/v4/letter/t/c68b51/32.png) [@TAB10](https://forum.shopware.com/u/TAB10)\
**Post date:** [9. April 2020 um 09:27 UTC](https://forum.shopware.com/t/extending-javascript-plugin/66135/2 "2020-04-09T09:27:33Z")

</div>

```
 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();
}

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![hbee](https://avatars.discourse-cdn.com/v4/letter/h/f08c70/32.png) [@hbee](https://forum.shopware.com/u/hbee)\
**Post date:** [9. April 2020 um 13:09 UTC](https://forum.shopware.com/t/extending-javascript-plugin/66135/3 "2020-04-09T13:09:50Z")

</div>

> [@thom schrieb:](https://forum.shopware.com/profile/17133/thom "thom")
> 
> 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();  
> }
> 
> &nbsp;

hi, danke für deine Antwort. ich glaube da ist was mit der Codeformatierung schief gelaufen oder? Wenn du darauf hinaus willst,&nbsp; 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.

---

<div class="post-metadata">

**Author:** ![gigabit](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/gigabit/32/8094_2.png) [@gigabit](https://forum.shopware.com/u/gigabit)\
**Post date:** [9. April 2020 um 13:47 UTC](https://forum.shopware.com/t/extending-javascript-plugin/66135/4 "2020-04-09T13:47:22Z")

</div>

Versuch den override mal mit dem Tag:

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

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![hbee](https://avatars.discourse-cdn.com/v4/letter/h/f08c70/32.png) [@hbee](https://forum.shopware.com/u/hbee)\
**Post date:** [9. April 2020 um 14:15 UTC](https://forum.shopware.com/t/extending-javascript-plugin/66135/5 "2020-04-09T14:15:27Z")

</div>

> [@gigabit schrieb:](https://forum.shopware.com/profile/34590/gigabit "gigabit")
> 
> Versuch den override mal mit dem Tag:
> 
> PluginManager.override(‚SearchWidget‘, netzkomSearchWidget, ‚[data-search-form]‘);
> 
> &nbsp;

ist ja verrückt! das klappt. vielen Dank.&nbsp;