ওয়েব এসডিকে ইন্টিগ্রেশন

ব্যবহার @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-তে Try-On বাটন এবং add-to-cart অ্যাকশনের জন্য ক্লায়েন্ট-সাইড কলব্যাকগুলো নথিভুক্ত করা আছে। কলব্যাকগুলোকে স্টোরফ্রন্টের বিদ্যমান অ্যানালিটিক্স এবং কার্ট লেয়ারের সাথে সংযুক্ত করুন। অ্যানালিটিক্স পেলোডে গ্রাহকের ছবি, পরিচয়পত্র বা অপ্রয়োজনীয় ব্যক্তিগত তথ্য রাখবেন না।

উৎপাদন নির্দেশিকা

• প্রতি পৃষ্ঠার জন্য একবার প্রারম্ভিকীকরণ করুন।
• শুধুমাত্র যোগ্য পোশাকগুলোর জন্য রেন্ডার করুন।
• স্থিতিশীল ক্যাটালগ শনাক্তকারীগুলো পাস করুন।
• ক্লায়েন্টের গোপনীয় তথ্য ব্রাউজার কোড থেকে দূরে রাখুন।
• একক-পৃষ্ঠার অ্যাপ্লিকেশনগুলিতে ভ্যারিয়েন্ট পরিবর্তন এবং রুট ট্রানজিশন পরীক্ষা করুন।
• এন্ট্রি পয়েন্টের জন্য কিবোর্ড ফোকাস এবং একটি প্রবেশযোগ্য লেবেল বজায় রাখুন।
• লোডিং, ব্যর্থতা এবং অনুপলব্ধ অবস্থা যাচাই করুন।
• ইন্টিগ্রেশনটি চালু করার আগে ও পরে প্রোডাক্ট-পেজের পারফরম্যান্স নিরীক্ষণ করুন।

অফিসিয়াল রেফারেন্স

• ভূমিকা
• এপিআই
• Shopify ইন্টিগ্রেশন