Verwenden Sie die richtige Kennung
Eine Storefront-Produkt-ID, SKU oder Varianten-ID ist nicht automatisch eine SPREEAI-Kleidungsstück-ID. Behalten Sie eine Zuordnung bei, die durch Ihren Aufnahme- oder Shopify-Synchronisierungsworkflow erstellt wurde. Das Kleidungsstück muss dem authentifizierten Partner gehören und zur Anprobe verfügbar sein.
Bilden Sie eine Produktauswahl ab
import type { RenderTryOnButtonOptions } from "@spreeai/web-sdk";
export const productOptions: RenderTryOnButtonOptions = {
elementId: "spreeai-try-on",
garments: [{
garmentId: "SPREEAI_GARMENT_ID",
variant: { color: "blue", fit: "regular" },
availableSizes: ["S", "M", "L"],
price: "$59.00",
}],
showSizes: true,
showPrices: true,
};variant kann Farbe, Passform, Geschlecht und Stil filtern. Beim dokumentierten Abgleich wird die Groß-/Kleinschreibung nicht beachtet. Ordnen Sie Farben anhand ihres Namens zu, z. B blue, und nicht durch einen Hexadezimalwert.
Kleidungsstück bereit
| Zustand oder Zustand | Integrationsaktion |
|---|---|
| Nicht synchronisiert/Aufnahme unvollständig | Behalten Sie das normale Produkterlebnis bei; versprechen keine Anprobe-Verfügbarkeit. |
| Bereit, aber in Shopify deaktiviert | Überprüfen Sie das gewünschte Produkt und aktivieren Sie es explizit. Bereit allein macht es nicht lebensfähig. |
| Verfügbares Kleidungsstück und passende Variante | Rendern Sie die Schaltfläche für diese Auswahl. |
| Kein passendes Outfit verfügbar | Erwarten Sie, dass auf das erste Kleidungsstück in der Reihe zurückgegriffen wird. |
| Die Validierung schlägt fehl | Es wird keine Schaltfläche gerendert. Untersuchen Sie die Konsolen- und Produktzuordnung. |
Halten Sie die Produktdaten aktuell
- Aktualisieren Sie den angezeigten Preis und die vorrätigen Größen, wenn sich die Produktauswahl ändert.
- Verwenden Sie eindeutige Container-IDs für separate Produktschaltflächen.
- Übergeben Sie beim erneuten Rendern eines Knopfes die aktuelle Auswahl des Kleidungsstücks und der Variante.
- Überprüfen Sie die zurückgegebenen Warenkorbdaten mit Ihrem eigenen Katalog, bevor Sie eine Warenkorbmutation erstellen.
Bereiten Sie Kleidungsstücke vor
Nutzen Sie den Strom Bildstandards für Kleidungsstücke für unterstützte Bilder und Metadaten. Beheben Sie Verarbeitungsprobleme, bevor Sie Produkte aktivieren. Ersetzen Sie Produktionsdaten nicht durch Platzhalter-Kleidungsstück-IDs.