वेब एसडीके एकीकरण

उपयोग @spreeai/web-sdk कस्टम या हेडलेस वेब स्टोरफ्रंट के लिए।

ये उदाहरण प्रकाशित सामग्री को लक्षित करते हैं। v3.0.0 पैकेज। कॉल करें init() एक बार और इसके शून्य होने योग्य परिणाम की रक्षा करें। साझेदार को हल किया जाता है। clientId; जाने मत दो partnerId 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 में ट्राई-ऑन बटन और ऐड-टू-कार्ट एक्शन के लिए क्लाइंट-साइड कॉलबैक का विवरण दिया गया है। कॉलबैक को स्टोरफ्रंट के मौजूदा एनालिटिक्स और कार्ट लेयर्स से कनेक्ट करें। एनालिटिक्स पेलोड में ग्राहक की तस्वीरें, क्रेडेंशियल या अनावश्यक व्यक्तिगत डेटा न डालें।

उत्पादन मार्गदर्शन

• प्रति पृष्ठ एक बार प्रारंभ करें।
• केवल योग्य कपड़ों के लिए ही रेंडर करें।
• स्थिर कैटलॉग पहचानकर्ताओं को पास करें।
• क्लाइंट की गोपनीय जानकारियों को ब्राउज़र कोड से दूर रखें।
• सिंगल-पेज एप्लिकेशन में टेस्ट वेरिएंट परिवर्तन और रूट ट्रांज़िशन की जांच करें।
• प्रवेश बिंदु के लिए कीबोर्ड फोकस और एक सुलभ लेबल को सुरक्षित रखें।
• लोडिंग, विफलता और अनुपलब्धता की स्थितियों को सत्यापित करें।
• एकीकरण को सक्षम करने से पहले और बाद में उत्पाद पृष्ठ के प्रदर्शन की निगरानी करें।

आधिकारिक संदर्भ

• परिचय
• एपीआई
• Shopify एकीकरण