Produktdetails: alle Daten eines Produkts auslesen

GENAU wie im React-Web-Tutorial: Ein einzelnes Magento-Produktobjekt trägt DEUTLICH mehr Daten als nur name und price – und ein Großteil davon steckt in custom_attributes, einem flachen Array.

fetchProductBySku() im API-Client

api/magentoApi.js

// ... BASE_URL, ACCESS_TOKEN, PAGE_SIZE, magentoFetch(), fetchProducts() wie in Kapitel 8 ...

export async function fetchProductBySku(sku) {
  const produkt = await magentoFetch(`/products/${encodeURIComponent(sku)}`);
  return produkt;
}

custom_attributes sicher auslesen: eine Hilfsfunktion

api/magentoApi.js

// ... vorheriger Code ...

export function leseCustomAttribute(produkt, attributeCode) {
  const attribut = produkt.custom_attributes?.find(
    (a) => a.attribute_code === attributeCode
  );
  return attribut?.value ?? null;
}

Diese Hilfsfunktion und die Datenstruktur sind mit dem React-Web-Tutorial IDENTISCH – haben Sie magentoApi.js dort bereits gebaut, kennen Sie diesen Code schon.

ProductDetailScreen.js: alle Daten anzeigen

screens/ProductDetailScreen.js

import { useEffect, useState } from 'react';
import { ScrollView, Text, View, ActivityIndicator, StyleSheet } from 'react-native';
import { fetchProductBySku, leseCustomAttribute } from '../api/magentoApi';

export default function ProductDetailScreen({ route }) {
  const { sku } = route.params;
  const [produkt, setProdukt] = useState(null);
  const [ladend, setLadend] = useState(true);

  useEffect(() => {
    setLadend(true);
    async function laden() {
      const data = await fetchProductBySku(sku);
      setProdukt(data);
      setLadend(false);
    }
    laden();
  }, [sku]);

  if (ladend) {
    return <ActivityIndicator style={styles.zentriert} size="large" />;
  }

  const beschreibung = leseCustomAttribute(produkt, 'description');

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.titel}>{produkt.name}</Text>
      <Text>SKU: {produkt.sku}</Text>
      <Text>{produkt.price} €</Text>
      {beschreibung && <Text style={styles.beschreibung}>{beschreibung}</Text>}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  zentriert: { flex: 1, justifyContent: 'center' },
  container: { padding: 16 },
  titel: { fontSize: 20, fontWeight: 'bold', marginBottom: 8 },
  beschreibung: { marginTop: 16 },
});

Achtung: Anders als im React-Web-Tutorial verwenden wir HIER bewusst KEIN dangerouslySetInnerHTML-Äquivalent – React Native rendert grundsätzlich KEIN HTML. Enthält description aus Magento HTML-Tags (was bei Inhalten aus dem WYSIWYG-Editor häufig der Fall ist), erscheinen diese Tags hier als SICHTBARER Text. Für eine produktionsreife Lösung bräuchte man eine Bibliothek wie react-native-render-html, die für dieses fokussierte Tutorial bewusst außen vor bleibt – die reinen Textdaten in <Text> reichen aus, um das API-Prinzip zu demonstrieren.

Weitere häufig genutzte custom_attributes

short_description – Kurzbeschreibung.
meta_title/meta_description – SEO-Metadaten des Produkts.
special_price – ein reduzierter Preis, falls im Admin gesetzt.
weight – Gewicht, relevant für Versandberechnungen.