From bd3ffe0f9161aa553dfe747cf68d608c4bfd2ecf Mon Sep 17 00:00:00 2001 From: Shyim Date: Tue, 19 Nov 2024 14:39:22 +0100 Subject: [PATCH] refactor: Replace Plugin class with PluginBaseClass in JavaScript guides (#1569) * refactor: Replace Plugin class with PluginBaseClass in JavaScript guides * fix: correct typo in quality guidelines for plugins --- .wordlist.txt | 2 ++ .../store-api/add-store-api-route.md | 32 +++++++++++------ .../using-npm-dependencies.md | 4 +-- .../storefront/add-custom-javascript.md | 12 +++---- .../add-dynamic-content-via-ajax-calls.md | 30 ++++++++-------- .../fetching-data-with-javascript.md | 36 +++++-------------- .../reacting-to-javascript-events.md | 8 ++--- .../storefront/using-a-modal-window.md | 26 +++++++------- .../store/quality-guidelines-plugins/index.md | 2 +- 9 files changed, 71 insertions(+), 81 deletions(-) diff --git a/.wordlist.txt b/.wordlist.txt index f9453eca4..bf1369cd8 100644 --- a/.wordlist.txt +++ b/.wordlist.txt @@ -1742,3 +1742,5 @@ youtube zlib zsh zstd +zipignore +XMLHttpRequest diff --git a/guides/plugins/plugins/framework/store-api/add-store-api-route.md b/guides/plugins/plugins/framework/store-api/add-store-api-route.md index ab3663506..3d2c2a9f6 100644 --- a/guides/plugins/plugins/framework/store-api/add-store-api-route.md +++ b/guides/plugins/plugins/framework/store-api/add-store-api-route.md @@ -379,18 +379,28 @@ When you want to request your custom route you can use the existing `http-client ```javascript // /src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js -import Plugin from 'src/plugin-system/plugin.class'; -import HttpClient from 'src/service/http-client.service'; - -export default class ExamplePlugin extends Plugin { - init() { - this._client = new HttpClient(); - } - - requestCustomRoute() { - this._client.post('/example', { limit: 10, offset: 0}, (response) => { - alert(response); +const { PluginBaseClass } = window; + +export default class ExamplePlugin extends PluginBaseClass { + async requestCustomRoute() { + const response = await fetch('/example', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + limit: 10, + offset: 0, + }), }); + + if (!response.ok) { + throw new Error('Request failed'); + } + + const data = await response.json(); + + console.log(data); } } ``` diff --git a/guides/plugins/plugins/plugin-fundamentals/using-npm-dependencies.md b/guides/plugins/plugins/plugin-fundamentals/using-npm-dependencies.md index 83c40cce4..0b5650033 100644 --- a/guides/plugins/plugins/plugin-fundamentals/using-npm-dependencies.md +++ b/guides/plugins/plugins/plugin-fundamentals/using-npm-dependencies.md @@ -57,7 +57,7 @@ Once we have installed all the dependencies and registered the package in the bu ```javascript // /src/Resources/app/storefront/src/example.plugin.js -import Plugin from 'src/plugin-system/plugin.class'; +const { PluginBaseClass } = window; // Import logger import { log } from 'missionlog'; @@ -68,7 +68,7 @@ log.init({ initializer: 'INFO' }, (level, tag, msg, params) => { }); // The plugin skeleton -export default class ExamplePlugin extends Plugin { +export default class ExamplePlugin extends PluginBaseClass { init() { console.log('init'); diff --git a/guides/plugins/plugins/storefront/add-custom-javascript.md b/guides/plugins/plugins/storefront/add-custom-javascript.md index 8ec389d71..fcdeb38b3 100644 --- a/guides/plugins/plugins/storefront/add-custom-javascript.md +++ b/guides/plugins/plugins/storefront/add-custom-javascript.md @@ -29,9 +29,9 @@ Inside this file create and export an ExamplePlugin class that extends the base ```javascript // /src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js -import Plugin from 'src/plugin-system/plugin.class'; +const { PluginBaseClass } = window; -export default class ExamplePlugin extends Plugin { +export default class ExamplePlugin extends PluginBaseClass { } ``` @@ -41,9 +41,9 @@ Each plugin has to implement the `init()` method. This method will be called whe ```javascript // /src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js -import Plugin from 'src/plugin-system/plugin.class'; +const { PluginBaseClass } = window; -export default class ExamplePlugin extends Plugin { +export default class ExamplePlugin extends PluginBaseClass { init() { window.addEventListener('scroll', this.onScroll.bind(this)); } @@ -146,9 +146,9 @@ You can configure your plugins from inside the templates via data-options. First ```javascript // /src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js -import Plugin from 'src/plugin-system/plugin.class'; +const { PluginBaseClass } = window; -export default class ExamplePlugin extends Plugin { +export default class ExamplePlugin extends PluginBaseClass { static options = { /** * Specifies the text that is prompted to the user diff --git a/guides/plugins/plugins/storefront/add-dynamic-content-via-ajax-calls.md b/guides/plugins/plugins/storefront/add-dynamic-content-via-ajax-calls.md index 446ae4894..d519a1d8b 100644 --- a/guides/plugins/plugins/storefront/add-dynamic-content-via-ajax-calls.md +++ b/guides/plugins/plugins/storefront/add-dynamic-content-via-ajax-calls.md @@ -87,19 +87,13 @@ Again this is built upon the [adding custom Javascript](add-custom-javascript) a ```javascript // /src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js -import HttpClient from 'src/service/http-client.service'; -import Plugin from 'src/plugin-system/plugin.class'; +const { PluginBaseClass } = window; -export default class AjaxPlugin extends Plugin { +export default class AjaxLoadPlugin extends PluginBaseClass { init() { - // initialize the HttpClient - this._client = new HttpClient(); - - // get references to the dom elements this.button = this.el.children['ajax-button']; this.textdiv = this.el.children['ajax-display']; - // register the events this._registerEvents(); } @@ -108,18 +102,22 @@ export default class AjaxPlugin extends Plugin { this.button.onclick = this._fetch.bind(this); } - _fetch() { - // make the network request and call the `_setContent` function as a callback - this._client.get('/example', this._setContent.bind(this), 'application/json', true) - } - - _setContent(data) { - // parse the response and set the `textdiv.innerHTML` to the timestamp - this.textdiv.innerHTML = JSON.parse(data).timestamp; + async _fetch() { + const response = await fetch('/example'); + const data = await response.json(); + this.textdiv.innerHTML = data.timestamp; } } ``` +and register it in the `main.js` + +```javascript +import AjaxLoadPlugin from './example-plugin/example-plugin.plugin'; + +window.PluginManager.register('AjaxLoadPlugin', AjaxLoadPlugin, '[data-ajax-helper]'); +``` + ## Adding the Template The only thing that is now left, is to provide a template for the Storefront plugin to hook into: diff --git a/guides/plugins/plugins/storefront/fetching-data-with-javascript.md b/guides/plugins/plugins/storefront/fetching-data-with-javascript.md index 072583a17..16137ff86 100644 --- a/guides/plugins/plugins/storefront/fetching-data-with-javascript.md +++ b/guides/plugins/plugins/storefront/fetching-data-with-javascript.md @@ -19,46 +19,26 @@ While this is not mandatory, having read the guide about [adding custom javascri ## Fetching data -At first, we need to import the `HttpClient` to use it in our JavaScript plugin. We also create a new instance of the `HttpClient` and assigned it to a variable in our `ExamplePlugin`. +We will use the standard [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to gather additional data. The fetch API is a modern replacement for the old `XMLHttpRequest` object. It is a promise-based API that allows you to make network requests similar to XMLHttpRequest (XHR). ```javascript // /src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js -import Plugin from 'src/plugin-system/plugin.class'; -import HttpClient from 'src/service/http-client.service'; +const { PluginBaseClass } = window; -export default class ExamplePlugin extends Plugin { +export default class ExamplePlugin extends PluginBaseClass { init() { - this._client = new HttpClient(); - } -} -``` - -To fetch data from the API, we now can use the `get` method of the `HttpClient` to invoke a get request. - -```javascript -// /src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js -import Plugin from 'src/plugin-system/plugin.class'; -import HttpClient from 'src/service/http-client.service'; - -export default class ExamplePlugin extends Plugin { - init() { - this._client = new HttpClient(); - this.fetchData(); } // ... - fetchData() { - this._client.get('/widgets/checkout/info', this.handleData); - } + async fetchData() { + const response = await fetch('/widgets/checkout/info'); + const data = await response.text(); - handleData(response) { - console.log(response); + console.log(data); } } ``` -The `get` method takes three arguments. The first one is the `url` which we want to call. In the example we are going to fetch a widget which contains some HTML. The second parameter is a `callback` function. It will be invoked when the API call was done. In the example below we pass in the `handleData` method of our plugin. The callback function then receives the `response` of the API call. We can now use this in our plugin to display the widget in the DOM, for example. - -The third parameter of the `get` method is the `contentType` which will be sent in the request header of the API call. It is optional and by default set to be `application/json`. +In this example, we fetch the data from the `/widgets/checkout/info` endpoint. The `fetch` method returns a promise that resolves to the `Response` object representing the response to the request. We then use the `text` method of the `Response` object to get the response body as text. diff --git a/guides/plugins/plugins/storefront/reacting-to-javascript-events.md b/guides/plugins/plugins/storefront/reacting-to-javascript-events.md index bcb4aa77a..a37f9ef5f 100644 --- a/guides/plugins/plugins/storefront/reacting-to-javascript-events.md +++ b/guides/plugins/plugins/storefront/reacting-to-javascript-events.md @@ -21,9 +21,9 @@ As already mentioned, this guide will not explain how to create a JavaScript plu ```javascript // /src/Resources/app/storefront/src/events-plugin/events-plugin.plugin.js -import Plugin from 'src/plugin-system/plugin.class'; +const { PluginBaseClass } = window; -export default class EventsPlugin extends Plugin { +export default class EventsPlugin extends PluginBaseClass { init() { } } @@ -43,9 +43,9 @@ Now that you possibly found your event, it's time to register to it and execute ```javascript // /src/Resources/app/storefront/src/events-plugin/events-plugin.plugin.js -import Plugin from 'src/plugin-system/plugin.class'; +const { PluginBaseClass } = window; -export default class EventsPlugin extends Plugin { +export default class EventsPlugin extends PluginBaseClass { init() { const plugin = window.PluginManager.getPluginInstanceFromElement(document.querySelector('[data-cookie-permission]'), 'CookiePermission'); plugin.$emitter.subscribe('hideCookieBar', this.onHideCookieBar); diff --git a/guides/plugins/plugins/storefront/using-a-modal-window.md b/guides/plugins/plugins/storefront/using-a-modal-window.md index 9c5776348..233311b16 100644 --- a/guides/plugins/plugins/storefront/using-a-modal-window.md +++ b/guides/plugins/plugins/storefront/using-a-modal-window.md @@ -118,10 +118,10 @@ Now let's get started with the modal window. First we have to import the `Pseudo ```javascript // /src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js -import Plugin from 'src/plugin-system/plugin.class'; +const { PluginBaseClass } = window; import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util'; -export default class ExamplePlugin extends Plugin { +export default class ExamplePlugin extends PluginBaseClass { init() { // ... } @@ -133,10 +133,10 @@ We also call the method `open()` to make it visible. ```javascript // /src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js -import Plugin from 'src/plugin-system/plugin.class'; +const { PluginBaseClass } = window; import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util'; -export default class ExamplePlugin extends Plugin { +export default class ExamplePlugin extends PluginBaseClass { init() { this.openModal(); } @@ -177,10 +177,10 @@ Of course, the content can also be generated via an API and inserted via AJAX re ```javascript // /src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js -import Plugin from 'src/plugin-system/plugin.class'; +const { PluginBaseClass } = window; import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util'; -export default class ExamplePlugin extends Plugin { +export default class ExamplePlugin extends PluginBaseClass { init() { // declaring some basic content const content = ` @@ -213,10 +213,10 @@ The `open()` method of the `PseudoModalUtil` class supports a callback function ```javascript // /src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js -import Plugin from 'src/plugin-system/plugin.class'; +const { PluginBaseClass } = window; import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util'; -export default class ExamplePlugin extends Plugin { +export default class ExamplePlugin extends PluginBaseClass { init() { // declaring some basic content const content = ` @@ -250,10 +250,10 @@ Here is an example how to use it: ```javascript // /src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js -import Plugin from 'src/plugin-system/plugin.class'; +const { PluginBaseClass } = window; import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util'; -export default class ExamplePlugin extends Plugin { +export default class ExamplePlugin extends PluginBaseClass { init() { // declaring some basic content const content = ` @@ -302,10 +302,10 @@ The constructor method of `PseudoModalUtil` provides optional configuration. If ```javascript // /src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js -import Plugin from 'src/plugin-system/plugin.class'; +const { PluginBaseClass } = window; import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util'; -export default class ExamplePlugin extends Plugin { +export default class ExamplePlugin extends PluginBaseClass { init() { // declaring some basic content const content = ` @@ -342,7 +342,7 @@ Here is an example which shows how to override the CSS class names. ```javascript // /src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js // ... -export default class ExamplePlugin extends Plugin { +export default class ExamplePlugin extends PluginBaseClass { init() { // ... } diff --git a/resources/guidelines/testing/store/quality-guidelines-plugins/index.md b/resources/guidelines/testing/store/quality-guidelines-plugins/index.md index 6dc5d7208..f974dfd4c 100644 --- a/resources/guidelines/testing/store/quality-guidelines-plugins/index.md +++ b/resources/guidelines/testing/store/quality-guidelines-plugins/index.md @@ -520,7 +520,7 @@ Here are some examples of not allowed folders and files: * .tar * .tar.gz * .zip -* .zipognore +* .zipignore * composer.lock * package.json * package-lock.json