Ενσωμάτωση Web SDK

Χρήση @spreeai/web-sdk για ένα προσαρμοσμένο ή headless ηλεκτρονικό κατάστημα.

Αυτά τα παραδείγματα στοχεύουν στα δημοσιευμένα έκδοση 3.0.0 πακέτο. Κλήση init() μία φορά και να διαφυλάξει το μηδενικό του αποτέλεσμα. Ο συνεργάτης επιλύεται από clientId; μην περάσεις partnerId to v3 init()Οι υπάρχουσες ενσωματώσεις v2 θα πρέπει να ακολουθούν τον επίσημο οδηγό αναβάθμισης πριν από την αλλαγή έκδοσης.

Εγκαθιστώ

npm install @spreeai/web-sdk@3.0.0
# or
yarn add @spreeai/web-sdk@3.0.0

Συμπεριλάβετε το φύλλο στυλ SDK που τεκμηριώνεται για την εγκατεστημένη έκδοση SDK.

Αρχικοποίηση και απόδοση

import { init } from "@spreeai/web-sdk";
import "@spreeai/web-sdk/dist/web-sdk.css";

// Add <div id="spreeai-try-on"></div> to the product page first.
const sdk = await init({ clientId: "your-client-id" });

if (sdk) {
  await sdk.renderTryOnButton({
    elementId: "spreeai-try-on",
    garments: [{ garmentId: "your-garment-id" }],
    enableAddToCart: true,
  });
}

init() επιστρέφει null όταν αποτυγχάνει ο έλεγχος ταυτότητας. Προστατέψτε όλες τις κλήσεις απόδοσης.

Κόλλα

Η έκδοση v3.0.0 παρουσιάζει το μέγεθος μέσα στην εμπειρία δοκιμής, αντί για ξεχωριστή sdk.renderSizingButton() μέθοδος. Για ένα ένδυμα με εγκεκριμένα δεδομένα μεγέθους, ενεργοποιήστε αυτήν τη ροή στο κουμπί δοκιμής:

await sdk?.renderTryOnButton({
  elementId: "spreeai-try-on",
  garments: [{ garmentId: "your-garment-id" }],
  enableSizingRecommendation: true,
});

Ενεργοποιήστε την επιλογή μεγέθους μόνο αφού είναι έτοιμα τα δεδομένα ενδύματος και η διαμόρφωση συνεργάτη.

Εκδηλώσεις

Το δημόσιο SDK καταγράφει τις επιστροφές κλήσεων από την πλευρά του πελάτη για το κουμπί δοκιμής και τις ενέργειες προσθήκης στο καλάθι. Συνδέστε τις επιστροφές κλήσεων με τα υπάρχοντα επίπεδα αναλυτικών στοιχείων και καλαθιού αγορών του καταστήματος. Μην τοποθετείτε εικόνες πελατών, διαπιστευτήρια ή περιττά προσωπικά δεδομένα σε φορτία αναλυτικών στοιχείων.

Οδηγίες παραγωγής

Αρχικοποίηση μία φορά ανά σελίδα.
Απόδοση μόνο για επιλέξιμα ενδύματα.
Διαβίβαση σταθερών αναγνωριστικών καταλόγου.
Κρατήστε τα μυστικά των πελατών μακριά από τον κώδικα του προγράμματος περιήγησης.
Δοκιμάστε αλλαγές παραλλαγών και μεταβάσεις δρομολόγησης σε εφαρμογές μίας σελίδας.
Διατηρήστε την εστίαση του πληκτρολογίου και μια προσβάσιμη ετικέτα για το σημείο εισόδου.
Επικυρώστε τις καταστάσεις φόρτωσης, αποτυχίας και μη διαθεσιμότητας.
Παρακολουθήστε την απόδοση της σελίδας προϊόντος πριν και μετά την ενεργοποίηση της ενσωμάτωσης.