การผสานรวม Web SDK

ใช้ @spreeai/web-sdk สำหรับร้านค้าออนไลน์แบบกำหนดเองหรือแบบไร้ส่วนหัว (headless web storefront)

ตัวอย่างเหล่านี้มุ่งเป้าไปที่สิ่งพิมพ์ เวอร์ชัน 3.0.0 แพ็คเกจ โทร init() ครั้งเดียวและป้องกันผลลัพธ์ที่เป็นโมฆะ คู่ค้าได้รับการแก้ไขจาก clientIdห้ามผ่าน partnerId ถึงเวอร์ชัน 3 init()สำหรับการใช้งานเวอร์ชัน 2 ที่มีอยู่แล้ว ควรปฏิบัติตามคู่มือการอัปเกรดอย่างเป็นทางการก่อนทำการเปลี่ยนเวอร์ชัน

ติดตั้ง

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 เมื่อการตรวจสอบสิทธิ์ล้มเหลว ให้ป้องกันการเรียกใช้ฟังก์ชันเรนเดอร์ทั้งหมด

ขนาด

เวอร์ชัน 3.0.0 แสดงขนาดสินค้าภายในขั้นตอนการลองสวมใส่ แทนที่จะเป็นหน้าต่างแยกต่างหาก sdk.renderSizingButton() วิธีการ สำหรับเสื้อผ้าที่มีข้อมูลขนาดที่ได้รับการอนุมัติแล้ว ให้เปิดใช้งานขั้นตอนดังกล่าวบนปุ่มลองสวม:

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

เปิดใช้งานการกำหนดขนาดหลังจากข้อมูลเสื้อผ้าและการกำหนดค่าพันธมิตรพร้อมแล้วเท่านั้น

กิจกรรม

เอกสาร SDK สาธารณะอธิบายการทำงานของฟังก์ชันเรียกกลับฝั่งไคลเอ็นต์สำหรับปุ่มลองสวมและปุ่มเพิ่มลงตะกร้าสินค้า เชื่อมต่อฟังก์ชันเรียกกลับเหล่านี้เข้ากับระบบวิเคราะห์และการจัดการตะกร้าสินค้าที่มีอยู่แล้วของร้านค้าออนไลน์ ห้ามใส่ภาพลูกค้า ข้อมูลประจำตัว หรือข้อมูลส่วนบุคคลที่ไม่จำเป็นลงในข้อมูลวิเคราะห์

คำแนะนำในการผลิต

• เริ่มต้นการทำงานเพียงครั้งเดียวต่อหน้า
• แสดงผลลัพธ์เฉพาะกับเสื้อผ้าที่เข้าเกณฑ์เท่านั้น
• ส่งผ่านตัวระบุแคตตาล็อกที่เสถียร
• อย่าเก็บความลับของลูกค้าไว้ในโค้ดของเบราว์เซอร์
• ทดสอบการเปลี่ยนแปลงรูปแบบและการเปลี่ยนเส้นทางในแอปพลิเคชันหน้าเดียว
• รักษาโฟกัสของแป้นพิมพ์และป้ายกำกับที่เข้าถึงได้สำหรับจุดเริ่มต้น
• ตรวจสอบสถานะการโหลด ความล้มเหลว และความพร้อมใช้งาน
• ตรวจสอบประสิทธิภาพของหน้าสินค้าก่อนและหลังเปิดใช้งานการผสานรวม

เอกสารอ้างอิงอย่างเป็นทางการ

• การแนะนำ
• API
• การผสานรวม Shopify