Τεκμηρίωση

SDK 2.0 · ΕΝΣΩΜΑΤΩΣΗ

Καλάθι & εκδηλώσεις

Συνδέστε τις δύο τεκμηριωμένες επανακλήσεις στη βιτρίνα και τα αναλυτικά στοιχεία σας.

Υποστηριζόμενες επανακλήσεις

ΕπανάκλησηΌταν πυροδοτείΩφέλιμο φορτίο κλειδιού
onTryOnButtonClickΚάντε κλικ στο κουμπί, πριν ανοίξει το παράθυρο διαλόγου.name
onAddToCartClickedΌταν η εμπειρία δημοσιεύει ένα μήνυμα προσθήκης στο καλάθι, ενεργοποιήστε πρώτα την προσθήκη στο καλάθι.name, garments, setIsLoading, closePopUp, onError

Χειριστείτε ένα αίτημα καλαθιού

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

const sdk = await init({ clientId: "YOUR_ISSUED_CLIENT_ID" });
if (sdk) {
  await sdk.renderTryOnButton({
    elementId: "spreeai-try-on",
    garments: [{ garmentId: "YOUR_READY_GARMENT_ID" }],
    enableAddToCart: true,
    events: {
      onTryOnButtonClick: ({ name }) => {
        // Forward this non-sensitive event to your analytics layer.
        console.info(name);
      },
      onAddToCartClicked: async ({
        garments, setIsLoading, closePopUp, onError,
      }) => {
        setIsLoading(true);
        try {
          // Implement this endpoint in YOUR storefront backend.
          // Validate and map these garment IDs to your own cart variants.
          const response = await fetch("/api/cart/from-spreeai", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ garments }),
          });
          if (!response.ok) throw new Error("Cart request failed");
          closePopUp();
        } catch {
          onError("Could not add to bag. Please try again.");
        } finally {
          setIsLoading(false);
        }
      },
    },
  });
}

Μετρήστε τη σωστή δράση

Ένα κλικ στο κουμπί επανάκλησης μετρά την πρόθεση να ανοίξει η δοκιμή. δεν αποτελεί απόδειξη ότι ολοκληρώθηκε μια δοκιμή ή μια αγορά. Χρησιμοποιήστε την εγκεκριμένη ενσωμάτωση αναλυτικών στοιχείων για μεταγενέστερα αποτελέσματα. Μην εφευρίσκετε επανακλήσεις ολοκλήρωσης ή webhook διακομιστή που απουσιάζουν από το δημοσιευμένο API.

Έλεγχοι αποδοχής

  • Μια επιτυχημένη λειτουργία στο καλάθι προσθέτει το προβλεπόμενο προϊόν, την παραλλαγή και την ποσότητα.
  • Ένα αποτυχημένο αίτημα κρατά ενήμερο τον αγοραστή και διαγράφει την κατάσταση φόρτωσης.
  • Τα διπλά κλικ δεν δημιουργούν ακούσιες διπλότυπες μεταλλάξεις στο δικό σας πρόγραμμα χειρισμού.
  • Το Analytics περιέχει μόνο μεταδεδομένα συμβάντων, χωρίς εικόνες πελατών, διακριτικά ή περιττά προσωπικά δεδομένα.
Αναφορές πηγών

Αναζήτηση τίτλων και περιεχομένου σελίδων. Το Escape κλείνει την αναζήτηση.

Επιλέξτε τη γλώσσα σας.