2 minutes August 1, 2024

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.ElementLoadingIndicatorUtil

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:ElementLoadingIndicatorUtil

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

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();

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.