Vue Produktkonfigurator: Varianten, Attribute und Live-Preisberechnung

1. Was ein Vue Produktkonfigurator leisten muss

Ein Vue Produktkonfigurator für konfigurierbare Magento Produkte, etwa ein T-Shirt in mehreren Farben und Größen, muss vier Dinge gleichzeitig synchron halten: die gewählten Attributwerte, den daraus resultierenden Varianten-SKU, den aktuellen Preis und die Verfügbarkeit. Ändert der Nutzer die Farbe, muss sich potenziell auch die verfügbare Größenauswahl anpassen, das Produktbild wechseln und der Preis neu berechnet werden, alles ohne sichtbaren Ladezustand.

Der häufigste Fehler bei einem selbstgebauten Vue Produktkonfigurator: Für jede Attributkombination wird eine eigene GraphQL Anfrage an Magento geschickt. Bei einem Produkt mit fünf Farben und sechs Größen sind das theoretisch dreißig mögliche Anfragen, nur um herauszufinden, welche Kombination existiert. Der bessere Ansatz lädt die vollständige Varianten-Matrix einmalig beim Seitenaufruf und löst danach jede Auswahl rein clientseitig auf.

Die folgenden Abschnitte bauen einen Vue Produktkonfigurator Schritt für Schritt auf: vom Datenmodell über die GraphQL Anbindung bis zur Live-Preisberechnung und der Behandlung nicht verfügbarer Kombinationen.

2. Datenmodell: Attribute, Varianten und SKU-Auflösung

Magento liefert konfigurierbare Produkte über GraphQL als configurable_options und variants. Jede Variante enthält ihre eigene SKU, ihren eigenen Preis und die Kombination der Attributwerte, die sie repräsentiert. Für einen performanten Vue Produktkonfigurator lohnt es sich, diese Rohstruktur in eine Lookup-Map umzuwandeln, deren Schlüssel eine sortierte Kombination der gewählten Attributwerte ist, etwa color:red|size:m, und deren Wert die passende Variante ist.

Diese Lookup-Map macht die SKU-Auflösung im Vue Produktkonfigurator zu einer einzigen Objektzugriff-Operation statt einer Schleife über alle Varianten bei jeder Auswahl. Bei Produkten mit mehreren Hundert Varianten, wie es bei Möbeln mit vielen Materialoptionen vorkommt, macht dieser Unterschied den Konfigurator spürbar reaktionsschneller.

// composables/useVariantMatrix.ts — build a fast lookup map from Magento variants
interface MagentoVariant {
  product: { sku: string; price_range: { minimum_price: { final_price: { value: number } } } };
  attributes: { code: string; value_index: number }[];
}

function buildVariantKey(attributes: { code: string; value_index: number }[]): string {
  return attributes
    .slice()
    .sort((a, b) => a.code.localeCompare(b.code))
    .map((a) => `${a.code}:${a.value_index}`)
    .join('|');
}

export function useVariantMatrix(variants: MagentoVariant[]) {
  const matrix = new Map<string, MagentoVariant>();

  for (const variant of variants) {
    matrix.set(buildVariantKey(variant.attributes), variant);
  }

  function resolve(selection: Record<string, number>): MagentoVariant | undefined {
    const key = buildVariantKey(
      Object.entries(selection).map(([code, value_index]) => ({ code, value_index }))
    );
    return matrix.get(key);
  }

  return { matrix, resolve };
}

3. Konfigurator-State mit einem Composable abbilden

Der zentrale State eines Vue Produktkonfigurators ist die aktuelle Auswahl pro Attribut, ein einfaches reaktives Objekt wie { color: null, size: null }. Aus diesem State werden alle abgeleiteten Werte, Varianten-SKU, Preis, Bild und Verfügbarkeit, über computed Eigenschaften berechnet, nie manuell synchronisiert. Das verhindert die klassische Fehlerklasse, bei der Preis und Auswahl auseinanderlaufen, weil ein Update-Pfad vergessen wurde.

Ein useProductConfigurator Composable kapselt diesen State zusammen mit der Varianten-Matrix aus Abschnitt zwei und stellt der Komponente nur die benötigten reaktiven Werte zur Verfügung. Die Komponente selbst bleibt dadurch schlank und enthält keine Berechnungslogik, nur Bindungen an das Composable. Für Tests lässt sich das Composable isoliert ohne gerenderte Komponente prüfen, was die Testabdeckung des Vue Produktkonfigurators deutlich vereinfacht.

// composables/useProductConfigurator.ts — central configurator state
import { reactive, computed } from 'vue';
import { useVariantMatrix } from './useVariantMatrix';

export function useProductConfigurator(product: MagentoConfigurableProduct) {
  const { resolve } = useVariantMatrix(product.variants);
  const selection = reactive<Record<string, number | null>>(
    Object.fromEntries(product.configurable_options.map((o) => [o.attribute_code, null]))
  );

  const isComplete = computed(() => Object.values(selection).every((v) => v !== null));

  const activeVariant = computed(() => {
    if (!isComplete.value) return undefined;
    return resolve(selection as Record<string, number>);
  });

  const currentPrice = computed(() => {
    return activeVariant.value?.product.price_range.minimum_price.final_price.value
      ?? product.price_range.minimum_price.final_price.value;
  });

  function selectAttribute(code: string, valueIndex: number) {
    selection[code] = valueIndex;
  }

  return { selection, isComplete, activeVariant, currentPrice, selectAttribute };
}

4. Konfigurierbare Produkte aus Magento GraphQL laden

Für einen Vue Produktkonfigurator ist es entscheidend, in einer einzigen GraphQL Query sowohl die configurable_options als auch alle variants mit deren Preis, Bild und Lagerbestand zu laden. Wird die Query zu schmal geschnitten, entstehen im Verlauf der Nutzung weitere Nachladeanfragen, die den Konfigurator bei jeder Auswahl kurz einfrieren lassen. Wird sie zu breit geschnitten, wächst die initiale Ladezeit bei Produkten mit vielen Varianten unnötig an.

Ein guter Mittelweg für den Vue Produktkonfigurator: die Query lädt Preis und SKU für jede Variante, aber Bilder nur in einer niedrig aufgelösten Vorschauversion, die volle Galerie wird erst nach Abschluss der Auswahl für die konkrete Variante nachgeladen. Das hält die initiale Payload klein, ohne bei der Preisberechnung eine zweite Anfrage zu benötigen.

// graphql/queries/configurableProduct.ts — single query for options, variants and pricing
export const CONFIGURABLE_PRODUCT_QUERY = `
  query getConfigurableProduct($sku: String!) {
    products(filter: { sku: { eq: $sku } }) {
      items {
        sku
        name
        price_range { minimum_price { final_price { value currency } } }
        ... on ConfigurableProduct {
          configurable_options {
            attribute_code
            label
            values { value_index label }
          }
          variants {
            attributes { code value_index }
            product {
              sku
              stock_status
              price_range { minimum_price { final_price { value currency } } }
              image { url(width: 240) label }
            }
          }
        }
      }
    }
  }
`;

5. Live-Preisberechnung bei Attributauswahl

Die Live-Preisberechnung im Vue Produktkonfigurator darf niemals auf eine erneute Netzwerkanfrage warten, sonst wirkt jede Attributauswahl träge. Da die vollständige Varianten-Matrix bereits aus Abschnitt vier im Speicher liegt, ist die Preisberechnung eine reine computed Ableitung, wie im Composable aus Abschnitt drei gezeigt. Ändert der Nutzer die Farbe, aktualisiert sich der angezeigte Preis noch im selben Render-Zyklus, ohne spürbare Verzögerung.

Bei Produkten mit Aufpreisen pro Attributwert, etwa einem teureren Materialaufschlag, reicht der reine Varianten-Preis manchmal nicht aus. Der Vue Produktkonfigurator muss dann Basispreis und Attribut-Aufpreise addieren, statt sich blind auf den Varianten-Endpreis zu verlassen. Eine Testsuite mit konkreten Preis-Fixtures für jede Attributkombination verhindert, dass sich Rundungsfehler oder falsch angewendete Rabatte unbemerkt einschleichen.

6. Bildwechsel und Galerie synchron zur Auswahl halten

Sobald eine Variante im Vue Produktkonfigurator vollständig ausgewählt ist, soll die Produktgalerie automatisch auf die zur Variante passenden Bilder wechseln, etwa das rote statt das blaue T-Shirt. Ein watch auf den activeVariant aus dem Composable triggert diesen Wechsel, ohne dass die Galerie-Komponente selbst wissen muss, wie Varianten aufgelöst werden.

Wichtig ist ein sanfter Übergang statt eines harten Bildsprungs, insbesondere wenn eine Auswahl zwischenzeitlich unvollständig ist, etwa nach der Farbauswahl, aber vor der Größenauswahl. In diesem Zustand zeigt der Vue Produktkonfigurator sinnvollerweise das Hauptbild der gewählten Farbe über alle Größen hinweg, nicht das generische Ausgangsbild des Produkts.

// components/ProductConfigurator.vue — sync gallery with variant selection
watch(activeVariant, (variant) => {
  if (variant?.product.image?.url) {
    galleryImage.value = variant.product.image.url;
    return;
  }
  // Fallback: show the image of the color-only match, ignore size
  const colorOnlyVariant = variants.find(
    (v) => v.attributes.some((a) => a.code === 'color' && a.value_index === selection.color)
  );
  galleryImage.value = colorOnlyVariant?.product.image?.url ?? baseProductImage.value;
});

7. Verfügbarkeit und ausgegraute Optionen behandeln

Nicht jede Attributkombination existiert als Variante. Ein Vue Produktkonfigurator muss deshalb bereits vor der vollständigen Auswahl anzeigen, welche verbleibenden Optionen überhaupt noch zu einer existierenden, lagernden Variante führen. Praktisch bedeutet das: Sobald eine Farbe gewählt ist, werden Größen, für die es in dieser Farbe keine Variante gibt oder deren Lagerbestand null ist, in der Auswahl ausgegraut statt entfernt.

Ausgrauen statt Entfernen ist für den Vue Produktkonfigurator die bessere UX-Entscheidung, weil der Nutzer sieht, dass die Größe grundsätzlich existiert, aktuell aber in dieser Farbe nicht verfügbar ist. Das verhindert Verwirrung gegenüber einer Liste, die sich bei jeder Auswahl in ihrer Länge verändert. Die Berechnung, welche Werte ausgegraut werden, ist eine Filterung der Varianten-Matrix nach der bereits getroffenen Teilauswahl.

8. Validierung und Fehlerzustände im Konfigurator

Ein Vue Produktkonfigurator darf den Warenkorb-Button erst aktivieren, wenn isComplete aus dem Composable wahr ist und die aufgelöste Variante tatsächlich lagernd ist. Ein häufiger Fehler ist, den Button rein anhand der Attributvollständigkeit freizugeben, ohne den Lagerbestand der konkreten Variante zu prüfen, das führt zu Fehlermeldungen erst beim Klick auf Warenkorb hinzufügen, statt vorher sichtbar zu sein.

Für Sonderfälle wie temporär ausverkaufte Varianten sollte der Vue Produktkonfigurator eine klare Inline-Meldung neben der betroffenen Option anzeigen, etwa Vorübergehend nicht verfügbar, statt den Nutzer erst nach der vollständigen Auswahl mit einer generischen Fehlermeldung zu konfrontieren. Diese frühe, kontextbezogene Fehlerkommunikation reduziert Support-Anfragen und Kaufabbrüche spürbar.

9. Produktkonfigurator im Vergleich: Ansätze

Es gibt unterschiedliche Strategien, wie ein Vue Produktkonfigurator Varianten auflösen kann. Die folgende Tabelle vergleicht die gängigsten Ansätze nach Ladeverhalten und Komplexität.

Für den überwiegenden Teil der Magento Shops mit konfigurierbaren Produkten ist die vollständige Matrix vorab die richtige Wahl für einen Vue Produktkonfigurator, weil sie sofortige Reaktion ermöglicht, ohne die Serverlast durch wiederholte Anfragen zu erhöhen. Nur bei extrem großen Variantenzahlen oder hochkomplexer, personalisierter Preislogik lohnt sich der Mehraufwand einer serverseitigen Berechnung.

10. Zusammenfassung

Ein produktionsreifer Vue Produktkonfigurator lädt die vollständige Varianten-Matrix konfigurierbarer Magento Produkte in einer einzigen GraphQL Anfrage und löst danach jede Attributauswahl rein clientseitig über eine Lookup-Map auf. Preis, Bild und Verfügbarkeit werden als computed Ableitungen aus dem zentralen Auswahl-State berechnet, nie manuell synchronisiert, was die klassische Fehlerklasse auseinanderlaufender Zustände verhindert.

Ausgegraute statt entfernte Optionen kommunizieren Verfügbarkeit klarer, und frühe, kontextbezogene Fehlermeldungen statt generischer Warenkorb-Fehler reduzieren Kaufabbrüche. Für die überwiegende Mehrheit konfigurierbarer Produkte ist die vollständige Matrix vorab der richtige Ansatz, nur bei extremen Variantenzahlen oder komplexer B2B-Preislogik lohnt sich eine serverseitige Berechnung pro Auswahl im Vue Produktkonfigurator.

11. FAQ: Vue Produktkonfigurator