javascript - Overwrite an existing plugin JS in Shopware 6 - Stack Overflow

admin管理员组

文章数量:1348103

I am currently trying to overwrite a javascript file from an existing plugin.

I've been following the documentation but I am struggling with the path for the JS class to overwrite.

In the docs is an example code:

import CookiePermissionPlugin from 'src/plugin/cookie/cookie-permission.plugin';

export default class MyCookiePermission extends CookiePermissionPlugin {
}

So I implemented the following code:

import QuantityField from 'src/plugin/FilterRangeSlider/filter-range-slider.plugin';

export default class ExampleQuantityField extends QuantityField {

This code does not work for me, since the original file is in the vendor directory and my plugin is in the custom directory. When trying to pile (eg bin/build-storefront.sh) I receive the following error message:

Module not found: Error: Can't resolve 'src/plugin/FilterRangeSlider/filter-range-slider.plugin' in '<project root>/custom/plugins/ExampleProductFilter/src/Resources/app/storefront/src/filter-range-slider'

Any idea how I can import that class as stated in the docs?

I am currently trying to overwrite a javascript file from an existing plugin.

I've been following the documentation but I am struggling with the path for the JS class to overwrite.

In the docs is an example code:

import CookiePermissionPlugin from 'src/plugin/cookie/cookie-permission.plugin';

export default class MyCookiePermission extends CookiePermissionPlugin {
}

So I implemented the following code:

import QuantityField from 'src/plugin/FilterRangeSlider/filter-range-slider.plugin';

export default class ExampleQuantityField extends QuantityField {

This code does not work for me, since the original file is in the vendor directory and my plugin is in the custom directory. When trying to pile (eg bin/build-storefront.sh) I receive the following error message:

Module not found: Error: Can't resolve 'src/plugin/FilterRangeSlider/filter-range-slider.plugin' in '<project root>/custom/plugins/ExampleProductFilter/src/Resources/app/storefront/src/filter-range-slider'

Any idea how I can import that class as stated in the docs?

• javascript
• shopware
• shopware6

Share Improve this question Follow edited Nov 24, 2021 at 12:12 Alex 35.3k1919 gold badges114114 silver badges197197 bronze badges asked Aug 5, 2021 at 16:22 MweisSWMweisSW 81177 silver badges2020 bronze badges 3

• 1 In your example you paste code from the CookiePermissionPlugin - In your Error message it's the FilterRangeSlider from within the plugin. Please show the exact code which you have and not what's written within the docs. – Christopher Dosin Commented Aug 6, 2021 at 6:15
• @ChristopherDosin MweisIMI edited the question. I guess it would work to import from ../../../../(no clue how many times)/../vendor/store.shopware./..... but is that a clean solution? – Alex Commented Aug 6, 2021 at 8:08
• I think if the plugin would extend the webpack config like this: developer.shopware./docs/guides/plugins/plugins/… and register an alias, it would be very simple – Alex Commented Nov 28, 2021 at 15:49

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4 +75

Node.js provides a bunch of in-built file-system functionalities. The __dirname points to the root directory.

So, this should work.

import QuantityField from `${__dirname}/vendor/store.shopware./mmeesrangesliderpro/src/Resources/app/storefront/src/script/filter-range-slider.plugin`

My current solution is not really clean...

import QuantityField from '../../../../../../../../../vendor/store.shopware./mmeesrangesliderpro/src/Resources/app/storefront/src/script/filter-range-slider.plugin';

Isnt there any plugin root variable or something similar?

There is - I believe - no easier way to acplish this.

If each plugin would extend the webpack config as described in

https://developer.shopware./docs/guides/plugins/plugins/administration/extending-webpack

const path = require('path');

module.exports = () => {
    return {
    resolve: {
        alias: {
            MmeesRangeSliderPro: path.join(__dirname, '..', 'src')
        }
    }
    };
};

The alias could be used instead of the Plugin Root.

But this is not the case, so the following is not working:

import QuantityField from 'MmeesRangeSliderPro/plugin/FilterRangeSlider/filter-range-slider.plugin';

You can add a console.log(webpackConfig) to the bottom of Resources/app/storefront/webpack.config.js to validate this.

   alias: {
      src: '/home/user/example/projects/example.de/vendor/shopware/storefront/Resources/app/storefront/src',
      assets: '/home/user/example/projects/example.de/vendor/shopware/storefront/Resources/app/storefront/assets',
      jquery: 'jquery/dist/jquery.slim',
      scss: '/home/user/example/projects/example.de/vendor/shopware/storefront/Resources/app/storefront/src/scss',
      vendor: '/home/user/example/projects/example.de/vendor/shopware/storefront/Resources/app/storefront/vendor'
    }

And those again to not really allow locating the module.

If it is a third-party plugin, replace the path with an absolute path like the following

import ThirdPartyPlugin from '/app/custom/plugins/ThirdPartyPlugin/src/Resources/app/storefront/src/third-party-plugin/third-party-plugin.plugin';

本文标签： javascriptOverwrite an existing plugin JS in Shopware 6Stack Overflow