Override existing Javascript
If you have to customize the logic of some core JavaScript storefront plugins you can override them with your own implementations. You will see how this works by extending the cookie permission plugin and showing the cookie notice on every page load and asking the user if he wants to hide cookie bar via a confirm dialogue.
While this is not mandatory, having read the guide about adding custom javascript plugins in the first place might help you understand this guide a bit further. Other than that, this guide just requires you to have a running plugin installed, e.g. our plugin from the plugin base guide.
As JavaScript storefront plugins are vanilla JavaScript classes, you can simply extend them.
Each JavaScript plugin can only be overridden once. If two Shopware plugins try to override the same plugin, only the last one of them will actually work.
So let's start with creating the proper directory structure. This example will be called
my-cookie-permission, as it's extending the default cookie-permission plugin.So for this example you create a
<plugin root>/src/Resources/app/storefront/src/my-cookie-permission directory and put an empty file my-cookie-permission.plugin.js in there. The latter will be your main plugin class file.Next you create a JavaScript class that extends the original CookiePermission plugin inside your previously created file:
import CookiePermissionPlugin from 'src/plugin/cookie/cookie-permission.plugin';
export default class MyCookiePermission extends CookiePermissionPlugin {
}
The first line just imports the original
cookie-permission plugin class, so you can extend from it.Now you can override the functions from the parent class.
Let's start with the function, that the cookie bar should always show up, no matter if the user already configured his cookie preferences or not. By having a look at the original cookie permission plugin, we can see that it's only shown when the item
this.options.cookieName is set in the CookieStorage. The latter is just a neat helper from Shopware 6 itself to simplify dealing with cookies in JavaScript.So we'll just override the
init() method and make sure this value is always set to an empty string, which will evaluate to false.After that you call the
init() method of the original plugin.import CookiePermissionPlugin from 'src/plugin/cookie/cookie-permission.plugin';
import CookieStorage from 'src/helper/storage/cookie-storage.helper';
export default class MyCookiePermission extends CookiePermissionPlugin {
init() {
CookieStorage.setItem(this.options.cookieName, '');
super.init();
}
}
So now the cookie will always be set to an empty string, resulting in the cookie bar always being shown after a page reload.
Upon clicking the "Accept" or "Deny" button, you want to prompt a confirm dialogue if the user wants to hide the cookie bar. Therefore you override the
_hideCookieBar() function to show the dialogue and only call the parent implementation if the user clicks "OK" in the confirm dialogue. So your whole plugin now looks like this:import CookiePermissionPlugin from 'src/plugin/cookie/cookie-permission.plugin';
import CookieStorage from 'src/helper/storage/cookie-storage.helper';
export default class MyCookiePermission extends CookiePermissionPlugin {
init() {
CookieStorage.setItem(this.options.cookieName, '');
super.init();
}
_hideCookieBar() {
if (confirm('Do you want to hide the cookie bar?')) {
super._hideCookieBar();
}
}
}
Of course, if the user reloads the page, the bar will be back up.
A few things are now missing to actually register your overridden plugin version. Currently, Shopware doesn't even know your overridden plugin, so let's introduce it to Shopware.
Create a new file called
main.js in the directory <plugin root>/src/Resources/app/storefront/src/, which represents the automatically loaded entry point for javascript files in a plugin.Next you have to register your extended plugin using the
PluginManager from the global window object for this. But instead of using the register() function to register a new plugin, you use the override() function to indicate that you want to override an existing plugin.import MyCookiePermission from './my-cookie-permission/my-cookie-permission.plugin';
const PluginManager = window.PluginManager;
PluginManager.override('CookiePermission', MyCookiePermission, '[data-cookie-permission]');
// Necessary for the webpack hot module reloading server
if (module.hot) {
module.hot.accept();
}
To see your changes you have to build the storefront. Use the following command and reload your storefront.
Development template
Production template
./psh.phar storefront:build
./bin/build-storefront.sh
You should see the cookie notice at the bottom of the page. If you click the "Accept" or the "Deny" button you should be prompted to confirm hiding the bar.
Sometimes you don't have to actually override a javascript plugin, since sometimes you can simply use an event instead. Learn how this is done in our guide about listening to events.
Last modified 5mo ago