Gunakan pengenal yang tepat
ID produk etalase, SKU, atau ID varian tidak otomatis menjadi ID garmen SPREEAI. Pertahankan pemetaan yang dibuat melalui penyerapan atau alur kerja sinkronisasi Shopify. Pakaian tersebut harus milik mitra yang diautentikasi dan tersedia untuk dicoba.
Memetakan pilihan produk
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 dapat memfilter warna, kecocokan, jenis kelamin, dan gaya. Pencocokan yang terdokumentasi tidak membedakan huruf besar dan kecil. Cocokkan warna dengan namanya, misalnya blue, bukan dengan nilai hex.
Kesiapan pakaian
| Keadaan atau kondisi | Tindakan integrasi |
|---|---|
| Tidak disinkronkan/penyerapan tidak lengkap | Pertahankan pengalaman produk yang normal; tidak menjanjikan ketersediaan uji coba. |
| Siap tetapi dinonaktifkan di Shopify | Tinjau dan aktifkan secara eksplisit produk yang dimaksud. Siap saja tidak menjadikannya hidup. |
| Tersedia garmen dan varian yang serasi | Render tombol untuk pilihan itu. |
| Tidak ada pakaian yang cocok | Harapkan fallback ke pakaian pertama dalam susunan. |
| Validasi gagal | Tidak ada tombol yang ditampilkan; selidiki konsol dan pemetaan produk. |
Selalu perbarui data produk
- Perbarui harga yang ditampilkan dan ukuran stok saat pilihan produk berubah.
- Gunakan ID penampung unik untuk tombol produk terpisah.
- Saat merender ulang tombol, lewati pilihan pakaian dan varian saat ini.
- Tinjau data keranjang yang dikembalikan dengan katalog Anda sendiri sebelum membuat mutasi keranjang.
Menyiapkan aset garmen
Gunakan arus standar gambar garmen untuk citra dan metadata yang didukung. Selesaikan masalah pemrosesan sebelum mengaktifkan produk; jangan mengganti ID garmen placeholder dengan data produksi.