bezahlt von Shopware 6: Storefront Plugins
Ein JavaScript Plugin für die Shopware 6 Storefront zu schreiben ist an sich sehr einfach.
Das Plugin an sich ist sehr einfach strukturiert.
example-plugin/index.js
import Plugin from 'src/plugin-system/plugin.class';
export default class ExamplePlugin extends Plugin {
init() {
console.log('plugin is bind to this element', this.el);
}
}
Die Klasse registiert man in der main.js:
import ExamplePlugin from './example-plugin/';
window.PluginManager.register('ExamplePlugin', ExamplePlugin, '[data-example-plugin]');
Nun muss man das nur noch an ein HTML-Element binden, so dass es wenn dieses Element geladen wird auch gestartet wird.
...
<div data-example-plugin="true"></div>
...
Im Plugin sucht man sich dann alle benötigten Elemente und registriert dort alle benötigten Listener.
Ausführlich steht alles hier: https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-javascript
Wobei ich eher diese Seite https://mrtnschndlr.medium.com/die-neue-shopware-6-storefront-und-was-du-alles-dar%C3%BCber-wissen-solltest-e1e5621b6397 empfehlen würde.
die Art und Weise erinnert mich etwas wie ich damals bei meinen cJSv2-Framework die Controller an Elemente gebunden und initialisiert habe.. der default-Name der Init-Methode war da auch init.
Der DomAccess-Helper ist super und sollte man so verwenden. Über den kann man auch den QuerySelector nutzen und dass schützt hoffentlich davor, dass ein Haufen klassischer Webdesigner versuchen JQuery wieder da rein zu bringen. Der HttpClient ist auch nett aber man kann genau so gut direkt mit fetch() arbeiten, wenn man nicht unbedingt irgendwelche Steinzeit Browser supporten möchte. Aber besonder mag ich von den Helpern DeviceDetection.isTouchDevice() weil man damit einfach unterschieden kann ob man gerade ein Touch oder ein MouseEnter
Event nutzen muss.
Das Plugin an sich ist sehr einfach strukturiert.
example-plugin/index.js
import Plugin from 'src/plugin-system/plugin.class';
export default class ExamplePlugin extends Plugin {
init() {
console.log('plugin is bind to this element', this.el);
}
}
Die Klasse registiert man in der main.js:
import ExamplePlugin from './example-plugin/';
window.PluginManager.register('ExamplePlugin', ExamplePlugin, '[data-example-plugin]');
Nun muss man das nur noch an ein HTML-Element binden, so dass es wenn dieses Element geladen wird auch gestartet wird.
...
<div data-example-plugin="true"></div>
...
Im Plugin sucht man sich dann alle benötigten Elemente und registriert dort alle benötigten Listener.
Ausführlich steht alles hier: https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-javascript
Wobei ich eher diese Seite https://mrtnschndlr.medium.com/die-neue-shopware-6-storefront-und-was-du-alles-dar%C3%BCber-wissen-solltest-e1e5621b6397 empfehlen würde.
die Art und Weise erinnert mich etwas wie ich damals bei meinen cJSv2-Framework die Controller an Elemente gebunden und initialisiert habe.. der default-Name der Init-Methode war da auch init.
Der DomAccess-Helper ist super und sollte man so verwenden. Über den kann man auch den QuerySelector nutzen und dass schützt hoffentlich davor, dass ein Haufen klassischer Webdesigner versuchen JQuery wieder da rein zu bringen. Der HttpClient ist auch nett aber man kann genau so gut direkt mit fetch() arbeiten, wenn man nicht unbedingt irgendwelche Steinzeit Browser supporten möchte. Aber besonder mag ich von den Helpern DeviceDetection.isTouchDevice() weil man damit einfach unterschieden kann ob man gerade ein Touch oder ein MouseEnter
Event nutzen muss.
| User | annonyme | 2022-09-18 12:12 |
write comment: