مستندات فروشگاه

پرو مجازی را به سایت خود وصل کنید

نوع فروشگاه‌تان را انتخاب کنید. مستندات وب‌سایت و وردپرس جدا هستند تا مسیر نصب اشتباه نشود.

فروشگاه باید دقیقاً چه کار کند

پوشینو روی ویترین فعلی شما سوار می‌شود. قالب، سبد خرید و درگاه پرداخت عوض نمی‌شود. فقط یک دکمه «پرو کن» کنار محصول اضافه می‌کنید.

فروشگاه وردپرسی دارید؟ تب را باز کنید.

  1. ۱
    حساب بسازید با شماره موبایل ایرانی وارد شوید و فروشگاه را ثبت کنید (نام، آدرس سایت، نام مالک).
  2. ۲
    کلید عمومی را بردارید فقط pk_live_... داخل سایت فروشگاه می‌رود. کلید محرمانه (sk_live_...) را هیچ‌وقت در HTML نگذارید.
  3. ۳
    دامنه سایت را مجاز کنید اگر فروشگاه روی shop.ir است، همان دامنه باید در داشبورد باشد. وگرنه مودال باز می‌شود ولی API رد می‌کند.
  4. ۴
    یک‌بار SDK را در سایت لود کنید معمولاً در <head> یا قبل از </body>.
  5. ۵
    روی هر محصول دکمه پرو بگذارید سه چیز لازم است: شناسه محصول، لینک مستقیم عکس لباس، نام محصول.
  6. ۶
    با گوشی واقعی تست کنید از دامنه خودتان دکمه را بزنید، عکس تمام‌قد بدهید، نتیجه باید داخل همان مودال بیاید.

مشتری فروشگاه نیاز به ثبت‌نام در پوشینو ندارد. عکس می‌فرستد یا با دوربین می‌گیرد، نتیجه را می‌بیند، بعد خرید را در سایت شما ادامه می‌دهد.

۱. ساخت حساب و فروشگاه

  1. به ثبت‌نام بروید.
  2. شماره موبایل را به شکل 0912... وارد کنید و کد را تأیید کنید.
  3. نام فروشگاه، آدرس وب‌سایت (با https://) و نام مالک را بدهید.
  4. کلیدها نمایش داده می‌شوند. کلید محرمانه فقط همین یک‌بار کامل دیده می‌شود.

اگر قبلاً ثبت‌نام کرده‌اید، از ورود با همان شماره وارد داشبورد شوید. حساب باقی می‌ماند.

۲. کلید API

دو کلید ساخته می‌شود:

کلیدشکلکجا استفاده شود
عمومی pk_live_... فقط همین را در فرانت فروشگاه، داخل Pooshino.init بگذارید.
محرمانه sk_live_... سرور شما. در مرورگر، گیت، قالب وردپرس یا فایل عمومی نگذارید.

کلید عمومی فعلی شما در داشبورد، صفحه کلیدهای API است.

اگر کلید عمومی لو برود، فقط کسی می‌تواند از سهمیه پرو شما روی دامنه‌های مجاز استفاده کند. اگر کلید محرمانه لو برود، کلید را از داشبورد باطل کنید.

۳. دامنه مجاز

وقتی فروشگاه را می‌سازید، دامنه وب‌سایت شما (با و بدون www) خودکار ثبت می‌شود. مودال پرو فقط از همان دامنه‌ها به API وصل می‌شود.

  • سایت روی https://myshop.ir است → دامنه myshop.ir باید فعال باشد.
  • اگر فروشگاه را روی زیردامنه مثل shop.myshop.ir باز می‌کنید، همان را هم اضافه کنید.
  • تست روی دامنه پوشینو (pooshinoai.ir) از محدودیت دامنه فروشگاه مستثنی است.

دامنه‌ها را در داشبورد → دامنه‌ها ببینید. اگر خطای «Origin is not allowed» دیدید، دامنه صفحه فروشگاه با لیست مجاز یکی نیست.

۴. نصب SDK

این دو خط را یک‌بار در تمام صفحات محصول بگذارید (ترجیحاً قبل از </body>). apiKey را با کلید عمومی خودتان عوض کنید.


        

baseUrl را وقتی لازم دارید که فایل sdk.js را از سرور خودتان سرو کنید. اگر اسکریپت را مستقیم از پوشینو لود کنید، آدرس سرویس خودکار تشخیص داده می‌شود.

۵. افزودن دکمه پرو روی محصول

روی کارت یا صفحه محصول، یک دکمه با این سه ویژگی بگذارید. SDK بعد از init کلیک را خودش گوش می‌دهد.

ویژگیالزامیمعنی
data-pooshino-tryon بله این دکمه پرو است.
data-product-id بله شناسه محصول شما (SKU یا id در فروشگاه).
data-product-image بله لینک مستقیم و عمومی عکس لباس. باید با http یا https شروع شود. صفحه HTML یا لینک اینستاگرام قبول نیست.
data-product-name خیر نام لباس؛ در مودال نمایش داده می‌شود.
<button
  type="button"
  data-pooshino-tryon
  data-product-id="tee-white-001"
  data-product-image="https://myshop.ir/images/tee-white.jpg"
  data-product-name="تیشرت سفید">
  پرو کن
</button>

عکس لباس باید از اینترنت قابل دریافت باشد. هوش مصنوعی همان فایل را می‌خواند. اگر عکس پشت لاگین، watermark اسکریپت، یا مسیر نسبی مثل /img/tee.jpg بدون دامنه باشد، ساخت تصویر شکست می‌خورد.

۶. آزمایش اتصال

  1. سایت فروشگاه را روی دامنه واقعی (یا دمو پوشینو) باز کنید.
  2. روی «پرو کن» بزنید. مودال سفید پوشینو باید باز شود.
  3. عکس تمام‌قد، با نور کافی، بدون برش سر یا پا آپلود کنید — یا از دوربین استفاده کنید.
  4. «پرو کن» داخل مودال را بزنید. مراحل تحلیل عکس / درک لباس / ساخت فیت را می‌بینید.
  5. نتیجه در همان مودال می‌ماند. بستن مودال با «بستن» است، نه با تمام شدن هوش مصنوعی.

برای تست سریع بدون سایت خودتان: بوتیک آزمایشی پوشینو.

نمونه کامل یک صفحه محصول

این فایل را می‌توانید ذخیره کنید، کلید را عوض کنید، و در مرورگر باز کنید. برای کار واقعی باید روی دامنه مجاز فروشگاه سرو شود.


        

نمونه JavaScript (کنترل دستی)

اگر دکمه را خودتان می‌سازید یا در React / Vue هستید، به‌جای data-attribute مستقیم openTryOn را صدا بزنید.


        

openTryOn یک Promise برمی‌گرداند. وقتی نتیجه آماده شد resolve می‌شود. اگر کاربر مودال را ببندد، reject می‌شود با پیام لغو. مودال بعد از نتیجه خودش بسته نمی‌شود؛ مشتری می‌تواند تصویر را ببیند و دانلود کند.

فروشگاه وردپرسی؟ تب را ببینید.

مشتری در مودال چه می‌بیند

مودال فروشگاه همان مودال سایت پوشینو است. جریان ثابت است:

  1. شروع: بارگذاری عکس یا دوربین.
  2. عکس: فایل JPG / PNG / WEBP، یا گرفتن از دوربین.
  3. پردازش: چهار گام با تیک سبز — تحلیل عکس، درک لباس، ساخت فیت، نهایی‌کردن.
  4. نتیجه: تصویر ساخته‌شده، دانلود، یا پرو استایل دیگر. مودال باز می‌ماند تا «بستن».

دوربین نیاز به اجازه مرورگر دارد. در iframe، سایت شما باید allow="camera" را مسدود نکرده باشد. SDK این مجوز را روی iframe خودش می‌گذارد.

خطاهای رایج

علامتعلتکار فروشگاه
مودال باز نمی‌شود sdk.js لود نشده یا init صدا زده نشده در Network ببینید اسکریپت ۲۰۰ می‌دهد. Pooshino.init باید قبل از کلیک اجرا شده باشد.
Origin is not allowed دامنه صفحه فروشگاه در لیست مجاز نیست hostname دقیق (مثلاً www.shop.ir) را در دامنه‌ها اضافه کنید.
API key is required / invalid کلید خالی، اشتباه، یا باطل همان pk_live_ داشبورد را بدون فاصله بگذارید.
ساخت تصویر ناموفق عکس کاربر نامناسب، یا لینک لباس غیرقابل دریافت عکس تمام‌قد؛ لینک لباس را در تب جدید باز کنید و مطمئن شوید خودِ فایل تصویر است.
Try-on timed out بیش از ۳ دقیقه طول کشیده دوباره تلاش کنید. اگر تکرار شد به پشتیبانی بگویید.
دوربین باز نمی‌شود HTTPS نیست، یا کاربر اجازه نداده سایت را روی HTTPS سرو کنید. آپلود فایل همیشه جایگزین است.

مرجع SDK

بعد از لود /sdk.js، شیء سراسری Pooshino در صفحه هست.

Pooshino.init(options)

فیلدنوعتوضیح
apiKeystring، الزامیکلید عمومی فروشگاه.
baseUrlstring، اختیاریآدرس ریشه پوشینو. اگر SDK از خود پوشینو لود شود لازم نیست.

Pooshino.openTryOn(options) → Promise

فیلدنوعتوضیح
productIdstring، الزامیشناسه محصول در فروشگاه شما.
productImageUrlstring، الزامیURL مطلق تصویر لباس.
productNamestringنام نمایشی.

نتیجه موفق:

{
  "jobId": "uuid",
  "resultUrl": "https://.../tryon-result.jpg"
}

Pooshino.close()

مودال را می‌بندد. معمولاً لازم نیست؛ مشتری از دکمه بستن داخل مودال استفاده می‌کند.

ساخت فروشگاه دموی مشتری