Jetzt wird es interessant: 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 statt eines direkten Feldes.

fetchProductBySku() im API-Client

// ... 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;
}

encodeURIComponent(sku) ist wichtig: Manche SKUs enthalten Sonderzeichen wie Leerzeichen oder Schrägstriche, die in einer URL kodiert werden müssen – GENAU dasselbe Muster wie in "React für Einsteiger" Kapitel 22.

Die rohe Antwortstruktur eines Produkts

Bevor wir Code schreiben, ein Blick auf eine ECHTE (gekürzte) Magento-Produktantwort – rufen Sie GET /V1/products/IHRE-SKU mit dem Token aus Kapitel 5 auf, um Ihre eigene, vollständige Version zu sehen:

{
  "sku": "WSH12-BLUE",
  "name": "Blaues Baumwollhemd",
  "price": 39.99,
  "status": 1,
  "custom_attributes": [
    { "attribute_code": "description", "value": "Ein bequemes Baumwollhemd..." },
    { "attribute_code": "color", "value": "58" },
    { "attribute_code": "image", "value": "/w/s/wsh12-blue_1.jpg" }
  ],
  "media_gallery_entries": [ ... ],
  "extension_attributes": { "stock_item": { ... } }
}

custom_attributes sicher auslesen: eine Hilfsfunktion

Da custom_attributes ein ARRAY ist (nicht ein Objekt mit direktem Feldzugriff), brauchen wir eine kleine Hilfsfunktion, um an einen bestimmten Wert zu kommen:

// ... vorheriger Code ...

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

?.find(...) und ?? null fangen zwei häufige Fälle sicher ab: custom_attributes könnte fehlen (Optional Chaining), und das gesuchte Attribut selbst existiert bei diesem konkreten Produkt vielleicht nicht (Nullish Coalescing).

ProductDetailPage.jsx: alle Daten anzeigen

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { fetchProductBySku, leseCustomAttribute } from '../api/magentoApi';

function ProductDetailPage() {
  const { sku } = useParams();
  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 <p>Lade Produkt...</p>;
  }

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

  return (
    <div>
      <h1>{produkt.name}</h1>
      <p>SKU: {produkt.sku}</p>
      <p>{produkt.price} €</p>
      {beschreibung && (
        <div dangerouslySetInnerHTML={{ __html: beschreibung }} />
      )}
    </div>
  );
}

export default ProductDetailPage;

Weitere häufig genutzte custom_attributes

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