Die Texte in diesem Beitrag wurden in Teilen von OpenAIs ChatGPT generiert und durch uns korrigiert und überarbeitet.
Als Ausgangspunkt für unsere Demonstration zur Visualisierung und Umrechnung von Produktdaten dient uns die folgende, simplifizierte Datenstruktur, die wichtige Produktinformationen wie Name, Preis und Währung enthält:
[
{
"name": "Arctis 1 Wireless",
"price": {
"value": 99.99,
"currency": "USD"
}
}
]
Jedes Produkt wird als Objekt in der Liste gespeichert und enthält die Felder name und price. Der price-Schlüssel enthält wiederum ein Objekt mit den Preisinformationen.
Daten beziehen und visualisieren
Um die Daten im Frontend darstellen zu können, benötigen wir zunächst eine Möglichkeit, sie zu beziehen. Hierfür verwenden wir in unserem Beispiel eine fiktive API, von der wir die Datenstruktur mithilfe der Funktion getOffers() beziehen und im Objekt offers speichern. Dies geschieht, wie üblich, in einem eigens dafür geschaffenen Kontext innerhalb von Alpine, hier als utility bezeichnet.
Wenn Sie mehr darüber erfahren möchten, wie Sie Alpine in Ihre Umgebung einbinden können, empfehlen wir Ihnen unseren Beitrag: Alpine.js in einer Produktions-Umgebung einbinden
document.addEventListener("alpine:init", () => {
Alpine.data("utility", () => ({
offers: [],
async getOffers() {
const response = await (
await fetch("https://steelseries.com/api/offers")
).json();
this.offers = response.data;
},
}));
});
Um die Daten im Frontend zu visualisieren, können wir anschließend folgenden HTML-Code verwenden:
<div class="offers" x-data="utility" x-init="getOffers">
<template x-for="offer in offers">
<article class="offer">
<div class="offer-title" x-text="offer.name"></div>
<div
class="offer-price"
x-text="`${offer.price.value} ${offer.price.currency}`"
></div>
</article>
</template>
</div>
Umrechnungskurs beziehen und Preise aktualisieren
Um den aktuellen Produktpreis in Euro anzeigen zu können, beziehen wir aktuelle Umrechnungskurse über eine API von exchangerate.host. Die Funktion getConversion() speichert daraufhin den aktuellen Kurs im Schlüssel conversion. Falls die API unerwartet eine inkorrekte Antwort liefert, verwenden wir das initiale Objekt im Schlüssel als Referenz.
document.addEventListener("alpine:init", () => {
Alpine.data("utility", () => ({
conversion: { rate: 1, currency: "USD" },
offers: [],
async getConversion() {
const rate = await (
await fetch(`https://api.exchangerate.host/convert?from=USD&to=EUR`)
).json();
if (!rate.success) return;
this.conversion = { rate: rate.result, currency: rate.query.to };
},
async getOffers() {
const response = await (
await fetch("https://steelseries.com/api/offers")
).json();
await this.getConversion();
this.offers = response.data;
},
setPrice() {
const price = (this.offer.price.value * this.conversion.rate).toFixed(2);
return `${price} ${this.conversion.currency}`;
},
}));
});
Die Funktion setPrice() gibt den aktualisierten Preis zurück und ersetzt den interpolierten String aus dem vorherigen HTML-Code.
<div class="offers" x-data="utility" x-init="getOffers">
<template x-for="offer in offers">
<article class="offer">
<div class="offer-title" x-text="offer.name"></div>
<div class="offer-price" x-text="setPrice"></div>
</article>
</template>
</div>
Somit können wir Produktinformationen mit aktuellen Preisen über Alpine beziehen und visualisieren. Da es sich hierbei nur um eine simple Demonstration handelt, ließe sich im nächsten Schritt dieser Code um Loading und Fallback States erweitern, welche die Erfahrung für Nutzer im Frontend klarer und angenehmer gestalten.
TL;DR
Über Alpine wird ein Array von Produktdaten bezogen, dessen Preise anschließend, mithilfe einer externen API, in Euro umgerechnet werden, um diese Daten als Liste im Frontend zu visualisieren.