The Shopware Storefront SDK is a set of classes and methods to easily access the Shopware Storefront. So in your plugins, you can add this package as dependency and use the classes from this package instead of default Shopware files. This is especially helpful if you want to build your plugin without having the Shopware code-base, such as in custom webpack builds.
npm install @friendsofshopware/storefront-sdk
This package is usually used to build artifacts independent from Shopware. However, you might still want to be able to also build your storefront inside a Shopware shop.
For this, please create a custom webpack configuration in your plugin that resolves the alias and path for your dependency.
Create a new file ../Resources/app/storefront/build/webpack.config.js and add this content:
module.exports = (params) => {
return {
resolve: {
modules: [
`${params.basePath}/Resources/app/storefront/node_modules`,
],
}
};
}
To have PluginManager
typed, you need to create a tsconfig.json
(src/Resources/app/storefront/tsconfig.json
) with following content:
{
"compilerOptions": {
"types": ["@shopware-ag/storefront-types"]
}
}
@shopware-ag/storefront-types
is a separate NPM package which contains only the types of the storefront.
You can now use the plugin classes from this package instead of the original ones in your Shopware Javascript plugins.
import Plugin from '@friendsofshopware/storefront-sdk/plugin-system/plugin.class';
export default class MyStorefrontPlugin extends Plugin {
constructor(el, options, pluginName) {
super(el, options, pluginName);
this.setup();
}
init(): void {
// run your own code here
this.el.addEventListener('click', this.onClick.bind(this));
}
onClick(event) {
console.log('called');
}
}
Because you have no dependency on Shopware classes anymore, can now build your plugins without having Shopware itself. This is helpful if you want to create custom webpack builds for your plugin.
But you can also use the Shopware CLI or still Shopware itself for building.