Använd rätt identifierare
Ett skyltfönsterprodukt-ID, SKU eller variant-ID är inte automatiskt ett SPREEAI plagg-ID. Underhåll en mappning som skapats genom ditt inmatnings- eller Shopify-synkroniseringsarbetsflöde. Plagget måste tillhöra den autentiserade partnern och vara tillgängligt för provning.
Kartlägg ett produktval
TypeScript
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 kan filtrera färg, passform, kön och stil. Dokumenterad matchning är skiftlägesokänslig. Matcha färg efter dess namn, t.ex bluesnarare än med ett hexadecimalt värde.
Klädberedskap
| Tillstånd eller tillstånd | Integrationsåtgärd |
|---|---|
| Ej synkroniserad/inmatning ofullständig | Behåll den normala produktupplevelsen; lova inte prova-på tillgänglighet. |
| Klar men inaktiverad i Shopify | Granska och aktivera uttryckligen den avsedda produkten. Redo ensam gör det inte live. |
| Finns plagg och matchande variant | Gör knappen för det valet. |
| Ingen matchande tillgänglig outfit | Räkna med återgång till det första plagget i arrayen. |
| Validering misslyckas | Ingen knapp renderas; undersöka konsolen och produktkartläggningen. |
Håll produktdata aktuell
- Uppdatera visat pris och lagerstorlekar när produkturvalet ändras.
- Använd unika behållar-ID:n för separata produktknappar.
- När du återrenderar en knapp, passera det aktuella plagget och variantvalet.
- Granska de returnerade kundvagnsdata mot din egen katalog innan du skapar en kundvagnsmutation.
Förbered plaggtillgångar
Använd strömmen standarder för plaggbild för bilder och metadata som stöds. Lös bearbetningsproblem innan du aktiverar produkter; ersätt inte platshållar-id:n för plagg med produktionsdata.