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

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

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

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

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

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

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

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

۲. کلید API

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

کلید عمومی فعلی شما در داشبورد، صفحه کلیدهای 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 کلیک را خودش گوش می‌دهد.

<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>

در پرستاشاپ اگر چند تصویر برای محصول دارید، نباید فقط کاور پیش‌فرض را ثابت بگذارید — هنگام کلیک «پرو مجازی» باید همان تصویری که الان در باکس بزرگ گالری دیده می‌شود ارسال شود. جزئیات در تب پرستاشاپ، بخش «تصویر انتخاب‌شده گالری».

نمایش یا مخفی‌سازی دکمه از داشبورد

در داشبورد پوشینو یک سوییچ «دکمه پرو در سایت مشتری» دارید. وقتی خاموش باشد، دکمه پرو در فروشگاه شما (چه با SDK و چه با افزونه وردپرس) نمایش داده نمی‌شود.

• پیش‌فرض: فعال — دکمه برای مشتریان دیده می‌شود.
• با خاموش کردن سوییچ، SDK بعد از init وضعیت را از GET /api/v1/try-on/widget-config می‌خواند و دکمه‌های data-pooshino-tryon را مخفی می‌کند.
• اگر کسی مستقیم openTryOn را صدا بزند یا API پرو را فراخوانی کند، پاسخ WIDGET_DISABLED برمی‌گردد.
• تغییر در داشبورد معمولاً ظرف یک دقیقه در سایت اعمال می‌شود (کش کوتاه SDK و افزونه وردپرس).

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

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

برای تست سریع بدون سایت خودتان:

• سندباکس تست با محصول خودتان — کلید API و لینک عکس لباستان را وارد کنید.
• فروشگاه نمونه پوشینو — محصولات آمادهٔ دمو.

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

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

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

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

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

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

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

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

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

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

خطاهای رایج

پشتیبانی فنی در کنار شما

اگر هنگام نصب SDK، اتصال دامنه، یا اجرای پرو مجازی روی وب‌سایت‌تان به مشکل خوردید، تنها نیستید. تیم فنی پوشینو کنار فروشگاه شما می‌ماند تا اتصال با اطمینان کامل روی سایت‌تان انجام شود.

هر بار که گیر کردید — از کلید API تا دکمه محصول — کافی است تماس بگیرید تا مرحله را با هم جلو ببریم.

مرجع SDK

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

Pooshino.init(options)

Pooshino.openTryOn(options) → Promise

نتیجه موفق:

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

GET /api/v1/try-on/widget-config

با هدر X-Api-Key وضعیت نمایش دکمه را برمی‌گرداند:

{
  "tryOnButtonEnabled": true
}

SDK بعد از init این endpoint را می‌خواند. اگر false باشد دکمه‌های data-pooshino-tryon مخفی می‌شوند.

Pooshino.close()

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

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

افزونه رسمی ووکامرس

این تب فقط برای فروشگاه‌های وردپرس + ووکامرس است. افزونه سبک پوشینو SDK را لود می‌کند و دکمه پرو را روی صفحه محصول می‌گذارد — بدون secret و بدون تغییر قالب.

سایت غیرووردپرسی دارید؟ تب وب‌سایت / SDK را باز کنید.

۱. حساب پوشینو

1. در پوشینو ثبت‌نام کنید و فروشگاه بسازید.
2. از کلیدهای API فقط کلید عمومی pk_... را بردارید.
3. دامنه فروشگاه وردپرس را در دامنه‌ها مجاز کنید (مثلاً myshop.ir).

۲. نصب افزونه

1. فایل zip را دانلود کنید.
2. وردپرس: افزونه‌ها → افزودن → بارگذاری افزونه → انتخاب zip → نصب و فعال‌سازی.
3. اگر پوشه از قبل موجود بود: افزونهٔ قبلی را حذف کنید؛ اگر حذف نشد، پوشه wp-content/plugins/pooshino-try-on را از File Manager هاست پاک کنید و دوباره zip را نصب کنید.
4. یا unzip کنید و پوشه pooshino-try-on را در wp-content/plugins بگذارید.
5. ووکامرس باید فعال باشد.
6. بعد از نصب، از ووکامرس → پوشینو می‌توانید «نصب / جایگزینی آخرین نسخه» را بزنید تا بدون حذف دستی آپدیت شود.

۳. تنظیمات

1. در وردپرس بروید: ووکامرس → پوشینو.
2. کلید API عمومی را بچسبانید.
3. آدرس سرویس پیش‌فرض https://pooshinoai.ir است.
4. روی دکمه در پیشنمایش کلیک کنید تا پنل تنظیمات باز شود؛ رنگ را با انتخابگر، اندازه و فاصله را با اهرم عوض کنید و دکمه را بکشید تا جایش عوض شود.
5. محل نمایش دکمه: پیش‌فرض فقط صفحه تک‌محصول فعال است. در صورت نیاز تیک صفحات لیست و بقیه صفحات (خانه و …) را جداگانه روشن کنید.
6. اندازه پیش‌فرض: عرض ۱۰۰٪؛ ارتفاع و فونت خودکار و هم‌اندازه دکمه افزودن به سبد همان قالب.

نمایش یا مخفی‌سازی دکمه از داشبورد

افزونه وردپرس قبل از نمایش دکمه، همان تنظیم داشبورد را از API پوشینو می‌خواند. اگر در داشبورد سوییچ «دکمه پرو در سایت مشتری» را خاموش کنید:

• دکمه خودکار افزونه، شورت‌کد [pooshino_tryon]، بلوک گوتنبرگ و ویجت المنتور نمایش داده نمی‌شود.
• اسکریپت و استایل پرو هم لود نمی‌شود (سبک‌تر برای صفحه).
• تغییر معمولاً ظرف حدود یک دقیقه اعمال می‌شود (کش ۶۰ ثانیه‌ای افزونه).

تنظیمات ظاهری دکمه در ووکامرس → پوشینو همچنان ذخیره می‌شوند؛ با روشن کردن دوباره سوییچ داشبورد، همان ظاهر برمی‌گردد.

۴. رفتار روی فروشگاه

• نمایش دکمه هم از تنظیمات سراسری افزونه و هم از خود محصول پیروی می‌کند.
• در ووکامرس → پوشینو می‌توانید به‌صورت دسته‌ای مشخص کنید دکمه فقط روی دسته‌های انتخاب‌شده نشان داده شود، یا روی بعضی دسته‌ها مخفی شود.
• در ویرایش محصول ووکامرس، تیک «دکمه پرو مجازی» را برای محصولاتی که پرو ندارند بردارید (اولویت با تنظیم هر محصول است).
• صفحات لیست یعنی فروشگاه، دسته‌بندی، برچسب و جستجوی محصول. بقیه صفحات شامل خانه، برگه‌ها و محصولات مرتبط است.
• دکمه با تصویر شاخص محصول (اندازه full) و نام و شناسه ووکامرس ساخته می‌شود.
• اگر محصول تصویر شاخص نداشته باشد، دکمه نشان داده نمی‌شود.
• برای گذاشتن دستی دکمه از شورت‌کد [pooshino_tryon]، بلوک گوتنبرگ یا ویجت المنتور استفاده کنید.

۵. کش و بهینه‌ساز

• در WP Rocket / LiteSpeed / Autoptimize، دامنه پوشینو یا فایل sdk.js را از Combine/Defer خراب‌کننده مستثنی کنید.
• صفحه محصول باید روی HTTPS باشد تا دوربین و آپلود درست کار کنند.
• اگر قالب صفحه‌ساز است، همان پیشنمایش را استفاده کنید یا شورت‌کد [pooshino_tryon] و ویجت پوشینو را در المنتور بگذارید.

کد دستی قالب (اختیاری)

اگر نمی‌خواهید افزونه نصب کنید، SDK را در footer لود کنید و در حلقه محصول این دکمه را بگذارید:

<button
  type="button"
  data-pooshino-tryon
  data-product-id="<?php echo esc_attr( get_the_ID() ); ?>"
  data-product-image="<?php echo esc_url( wp_get_attachment_url( get_post_thumbnail_id() ) ); ?>"
  data-product-name="<?php echo esc_attr( get_the_title() ); ?>">
  پرو کن
</button>

آزمایش

1. یک محصول با تصویر شاخص را در سایت وردپرس باز کنید.
2. دکمه پرو مجازی را بزنید؛ مودال پوشینو باید باز شود.
3. اگر «Origin is not allowed» دیدید، دامنه را در داشبورد پوشینو چک کنید.

پشتیبانی فنی در کنار شما

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

دانلود افزونه ساخت فروشگاه

پرستاشاپ (PrestaShop)

افزونه رسمی پرستاشاپ نداریم؛ همان SDK وب را در قالب فروشگاه نصب می‌کنید. دکمه «پرو مجازی» فقط روی صفحه تک‌محصول اضافه می‌شود.

فروشگاه وردپرسی دارید؟ تب وردپرس · سایت اختصاصی؟ SDK

۱. حساب و دامنه مجاز

1. در پوشینو ثبت‌نام کنید و فروشگاه بسازید.
2. از کلیدهای API فقط کلید عمومی pk_... را بردارید.
3. دامنه پرستاشاپ (مثلاً shop.ir با یا بدون www) را در دامنه‌های مجاز ثبت کنید.

۲. نصب SDK در همهٔ صفحات

در پنل پرستاشاپ: طراحی → تنظیمات قالب → پیشرفته، یا فایل themes/نام-قالب/templates/_partials/footer.tpl — این کد را قبل از </body> بگذارید:

بعد از تغییر قالب، از پارامترهای پیشرفته → کارایی کش پرستاشاپ را پاک کنید.

۳. دکمه در صفحه محصول

فایل themes/نام-قالب/templates/catalog/product.tpl را ویرایش کنید و دکمه را کنار «افزودن به سبد» بگذارید. شناسه و نام محصول از Smarty می‌آید؛ آدرس عکس را اینجا ثابت نکنید — در بخش بعد توضیح داده شده.

<button type="button" class="btn btn-primary" id="pooshino-tryon-btn">
  پرو مجازی
</button>

۴. تصویر انتخاب‌شده در گالری (الزامی)

وقتی مشتری روی بندانگشتی کلیک می‌کند، تصویر بزرگ عوض می‌شود. در لحظهٔ کلیک «پرو مجازی» باید URL همان <img> باکس اصلی خوانده شود و با Pooshino.openTryOn فرستاده شود.

این اسکریپت را در همان product.tpl (بعد از دکمه) بگذارید:

• اگر قالب شما کلاس دیگری دارد، در DevTools روی تصویر بزرگ گالری راست‌کلیک → Inspect و selector مناسب (مثلاً .product-cover img) را به آرایهٔ selectors اضافه کنید.
• ترجیحاً از data-image-large-src یا currentSrc استفاده می‌شود تا نسخهٔ با کیفیت برود.
• با عوض شدن ترکیب رنگ/سایز (prestashop.on('updatedProduct')) نیازی به آپدیت دستی نیست؛ هر کلیک دوباره از باکس فعلی می‌خواند.

۵. کش و HTTPS

• بعد از هر ویرایش قالب، کش Smarty و کش ماژول را پاک کنید.
• صفحه محصول باید روی HTTPS باشد تا دوربین و آپلود در موبایل درست کار کند.
• افزونه‌های فشرده‌سازی JS نباید sdk.js را خراب کنند؛ دامنه پوشینو را مستثنی کنید.

آزمایش

1. صفحه محصول با چند تصویر باز کنید.
2. تصویر دوم را در گالری انتخاب کنید؛ مطمئن شوید باکس بزرگ عوض شده.
3. «پرو مجازی» را بزنید — در مودال باید همان لباس/رنگ تصویر انتخاب‌شده دیده شود.
4. اگر مودال باز نشد: Network → sdk.js و دامنه مجاز در داشبورد.

پشتیبانی

اگر selector گالری قالب شما متفاوت است، با Inspect المنت تصویر بزرگ را پیدا کنید و به تابع getSelectedProductImageUrl اضافه کنید.

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

میکسین (Mixin)

برای فروشگاه‌های ساخته‌شده با میکسین یک اسکریپت آماده هست. خودش SDK را لود می‌کند، فقط روی صفحه محصول (/product/...) دکمه «پرو مجازی با هوش مصنوعی» را کنار «افزودن به سبد» می‌گذارد و نیازی به دکمه دستی در قالب نیست.

۱. حساب و دامنه مجاز

1. در پوشینو ثبت‌نام کنید و فروشگاه بسازید.
2. از کلیدهای API فقط کلید عمومی pk_... را بردارید.
3. دامنه فروشگاه میکسین را در دامنه‌های مجاز ثبت کنید (با و بدون www).

۲. یک اسکریپت در قالب

در پنل میکسین، جایی که کد سفارشی فوتر قالب را می‌گذارید (قبل از </body>) فقط این تگ را اضافه کنید. data-api-key را با کلید عمومی خودتان عوض کنید:

• SDK جداگانه (sdk.js و Pooshino.init) لازم نیست؛ همین فایل هر دو را انجام می‌دهد.
• خارج از آدرس /product/... اسکریپت کاری نمی‌کند؛ صفحه اصلی و دسته‌بندی دکمه نمی‌گیرند.
• بعد از ذخیره قالب، کش میکسین را پاک کنید و صفحه محصول را یک‌بار رفرش کنید.

۳. دکمه و عکس محصول

• شناسه محصول از مسیر صفحه خوانده می‌شود (/product/شناسه).
• نام از عنوان h1 صفحه است.
• عکس از تگ og:image است؛ اگر نباشد، بزرگ‌ترین تصویر قابل‌دسترس همان صفحه فرستاده می‌شود.
• دسکتاپ: دکمه زیر «افزودن به سبد». موبایل: زیر عنوان محصول، تمام‌عرض.
• سوییچ «دکمه پرو در سایت مشتری» در داشبورد پوشینو این دکمه را هم نشان می‌دهد یا مخفی می‌کند.

۴. آزمایش

1. یک صفحه محصول واقعی میکسین را باز کنید (نه صفحه دسته).
2. دکمه «پرو مجازی با هوش مصنوعی» باید دیده شود.
3. کلیک کنید؛ مودال پوشینو با همان لباس باز شود.
4. اگر دکمه نیست: در Network وجود mixin.js و sdk.js را ببینید، و دامنه را در داشبورد چک کنید.

پشتیبانی

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

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