- Warum werden Shopware-Plugins nicht im Shopware-Administrationsbereich angezeigt und wie können Sie dieses Problem beheben?
- Wie konfiguriere ich den Redis-Cache in Shopware 6?
- So beheben Sie, dass das Titelbild der Produktlistenseite in Shopware 6 nicht angezeigt wird
- So leeren Sie den Cache im Shopware App System automatisch
So verwenden Sie den Standard-Shopware-Preloader in Storefront
Bei der Entwicklung mit Shopware 6 kann es vorkommen, dass Sie während eines AJAX-Aufrufs Preloader anzeigen möchten, um die Benutzererfahrung zu verbessern. Anstatt einen benutzerdefinierten Preloader zu implementieren, bietet Shopware 6 einen Standard-Preloader, den Sie mit geringem Aufwand verwenden können. In diesem Artikel wird erläutert, wie Sie den Standard- Shopware-Preloader in Ihrem Storefront verwenden, um unnötige benutzerdefinierte Preloader-Implementierungen zu vermeiden.
Aufgetretenes Problem
Viele Entwickler entwickeln benutzerdefinierte Preloader, die zwischen AJAX-Aufrufen angezeigt werden. Dies führt jedoch zu unnötigen Komplikationen und potenziellen Leistungsproblemen. Stattdessen unterstützt die vollständige Nutzung der nativen Shopware-Preloader-Funktion eine vereinfachte Entwicklung und gewährleistet eine konsistente Benutzererfahrung.
Lösung
Die standardmäßige Preloader-Funktion von Shopware kann das Problem leicht lösen. Dazu müssen nur die folgenden einfachen Schritte ausgeführt werden:
- Importieren Sie die Shopware Preloader Library.
- Verwenden Sie den Preloader in Ihren AJAX-Anrufen.
Schritt für Schritt Anleitung
1. Importieren Sie die Shopware Preloader Library
Binden Sie die Bibliothek von Shopware in Ihr eigenes JavaScript-Plugin ein. Diese Bibliothek stellt alle Methoden zum Hinzufügen und Löschen eines Preloaders zur Verfügung.
<b>ElementLoadingIndicatorUtil</b><span></span>
Javascript
importiere ElementLoadingIndicatorUtil aus „src/utility/loading-indicator/element-loading-indicator.util“;
2. Nutzen Sie den Preloader in Ihren AJAX-Aufrufen
Mit dieser Methode können Sie Ihren Preloader vor einem AJAX-Aufruf anzeigen und später entfernen. Sie können sie wie folgt verwenden:
<b>ElementLoadingIndicatorUtil</b><span></span>
Vor dem AJAX-Aufruf:
Fügen Sie die folgende Codezeile hinzu, um den Preloader für dieses Element zu erstellen und anzuzeigen:
Javascript
ElementLoadingIndicatorUtil.create(‘Elementklasse, die angezeigt werden muss’);
Nach dem AJAX-Aufruf:
Sobald der AJAX-Aufruf abgeschlossen ist, entfernen Sie den Preloader mit dem folgenden Code:
Javascript
ElementLoadingIndicatorUtil.remove(‘Elementklasse, die angezeigt werden muss’);
Beispiel
Hier ist ein Beispiel für die Verwendung des Standard-Shopware-Preloaders in einem AJAX-Aufruf:
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | import ElementLoadingIndicatorUtil from 'src/utility/loading-indicator/element-loading-indicator.util'; // Function to perform an AJAX call function performAjaxCall() { // Display the preloader ElementLoadingIndicatorUtil.create('my-element-class'); // Perform the AJAX call $.ajax({ url: 'your-api-endpoint', method: 'GET', success: function(response) { // Handle the response console.log(response); }, error: function(error) { // Handle the error console.error(error); }, complete: function() { // Remove the preloader ElementLoadingIndicatorUtil.remove('my-element-class'); } }); } // Call the function performAjaxCall(); |
Abschluss
Durch die Verwendung des standardmäßigen Shopware-Preloaders können Sie sich eine Menge Arbeit bei der Implementierung und Wartung Ihrer benutzerdefinierten Preloader sparen. Dieser Ansatz stellt sicher, dass die Storefront effizient funktioniert und ein reibungsloses Benutzererlebnis bietet. Dadurch wird die ElementLoadingIndicatorUtil -Bibliothek importiert und anschließend ihre Methoden rund um den AJAX-Aufruf erstellt und entfernt. Für weitere Unterstützung und Expertenlösungen sollten Sie eine Shopware-Agentur konsultieren , um Ihre E-Commerce-Plattform effektiv zu optimieren.
Recent help desk articles
Grüße! Ich bin Aneesh Sreedharan, CEO von 2Hats Logic Solutions. Bei 2Hats Logic Solutions widmen wir uns der Bereitstellung von technischem Fachwissen und der Lösung Ihrer Probleme in der Welt der Technologie. Unsere Blog-Seite dient als Ressource, in der wir Einblicke und Erfahrungen teilen und wertvolle Perspektiven auf Ihre Fragen bieten.