Web SDK Entegrasyonu

Kullanmak @spreeai/web-sdk Özel veya başsız web mağazası için.

Bu örnekler yayınlanmış olanları hedef almaktadır. v3.0.0 paket. Arayın init() Bir kez ve geçersiz kılınabilir sonucunu koruyun. Ortak, çözümlenir. clientId; geçme partnerId v3'e init(). Mevcut v2 entegrasyonları, sürümleri değiştirmeden önce resmi yükseltme kılavuzunu takip etmelidir.

Yükle

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

Yüklü SDK sürümü için belgelenen SDK stil sayfasını ekleyin.

Başlat ve oluştur

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() iadeler null Kimlik doğrulama başarısız olduğunda. Tüm render çağrılarını koruyun.

Bedenlendirme

v3.0.0 sürümü, beden seçeneklerini ayrı bir bölümde değil, deneme deneyiminin içinde sunuyor. sdk.renderSizingButton() Yöntem. Onaylanmış beden verilerine sahip bir giysi için, deneme düğmesinde bu akışı etkinleştirin:

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

Boyutlandırmayı yalnızca giysi verileri ve iş ortağı yapılandırması hazır olduktan sonra etkinleştirin.

Etkinlikler

Herkese açık SDK, "Dene" düğmesi ve sepete ekleme işlemleri için istemci tarafı geri çağırma işlevlerini belgeler. Geri çağırma işlevlerini mağazanın mevcut analiz ve sepet katmanlarına bağlayın. Müşteri görsellerini, kimlik bilgilerini veya gereksiz kişisel verileri analiz yüklerine yerleştirmeyin.

Üretim rehberliği

Sayfa başına bir kez başlatın.
Yalnızca uygun giysiler için render alın.
Kararlı katalog tanımlayıcılarını iletin.
İstemci sırlarını tarayıcı kodunun dışında tutun.
Tek sayfa uygulamalarında varyant değişikliklerini ve rota geçişlerini test edin.
Giriş noktası için klavye odağını ve erişilebilir etiketi koruyun.
Yükleme, hata ve kullanılamazlık durumlarını doğrulayın.
Entegrasyonu etkinleştirmeden önce ve etkinleştirdikten sonra ürün sayfası performansını izleyin.