In diesem Tutorial erklären wir, wie Sie das System zum Abrufen und Anzeigen von Bewertungen über das Modul  habeuk/rating-app einrichten.

Im Endergebnis erhalten wir

• Einen Block für die Zusammenfassung aller Bewertungen für die Entität, der auch dazu dient, einen Filter für die anzuzeigenden Bewertungen einzurichten
• Die ersten 10 Bewertungen unter den anzuzeigenden Bewertungen
• Einen Paginierungsblock, falls erforderlich (anzuzeigende Bewertungen > 10)

Diese verschiedenen Teile des Moduls werden nacheinander in der Reihenfolge Zusammenfassung>Bewertungen>Paginierung angezeigt, wobei der Standardstil dem in der folgenden Bilderserie gezeigten entspricht.

Jetzt, da wir wissen, was wir erreichen wollen, können wir uns direkt an die Umsetzung machen. 😉😉

Einrichtung des Moduls :

Zunächst müssen Sie das Repository des Moduls rating-app mit dem folgenden Befehl in Ihr Arbeitsverzeichnis klonen

git clone https://github.com/Habeuk/rating-app.git

Die zu importierende JavaScript-Datei ist bereits vorhanden, sodass Sie keine Änderungen an den Modulen vornehmen müssen, um die oben gezeigten Ergebnisse zu erhalten. 

Nachdem Sie unser Repository geklont haben, müssen Sie die Dateien ratingApp.umd.js  und style.css aus dem Verzeichnis „files” im Stammverzeichnis des Moduls abrufen und in die Seite importieren, auf der Ihre Bewertungen angezeigt werden sollen.

Fügen Sie schließlich auf der Seite, auf der Sie Ihre Bewertungen sehen möchten, im Abschnitt, der sie enthalten soll, die ID #app (id=„app“) hinzu. Dies ist die Standard-ID, die Sie direkt in der Datei main.js des Moduls rating-app ändern können

Zusätzlich zur ID müssen Sie das Attribut „data-product-handler” hinzufügen (der Wert dieses Attributs muss dynamisch eingegeben werden, damit es sich an das aktuelle Produkt anpasst).

Beachten Sie, dass fast alles, was oben beschrieben wurde, für die Standardkonfiguration vorgesehen ist, die mit Shopify funktionieren soll. Wenn Sie Änderungen am Modul vornehmen möchten, müssen Sie es installieren und kompilieren (gemäß der Dokumentation unter https://github.com/Habeuk/rating-app.git) , um die Dateien ratingApp.umd.js  und style.css vor der Verwendung zu aktualisieren.