# Parsian Shoppable Reels — پرامپت رایگان ساخت نسخهٔ آموزشی

این فایل از طرف **پارسیان آی‌تی** (parsianitco.com) به‌صورت رایگان منتشر شده است.
با آن می‌توانی یک نمونهٔ ساده و آموزشی از «ریلز قابل خرید» را با کمک یک دستیار هوش مصنوعی (Claude، ChatGPT و…) بسازی.

> این پرامپت برای یادگیری و آزمایش است. خروجی آن افزونهٔ تجاری Parsian Shoppable Reels نیست، مجوز تجاری ندارد و پشتیبانی فنی شامل آن نمی‌شود.

---

## راهنمای کوتاه

1. کل متن بخش «پرامپت» را کپی کن و در گفتگو با دستیار هوش مصنوعی بفرست.
2. اگر ویدئو و عکس محصول داری، مسیرشان را جایگزین نمونه‌ها کن.
3. خروجی یک فایل HTML است؛ آن را در مرورگر باز کن و روی موبایل هم امتحان کن.
4. برای اتصال واقعی به ووکامرس، آمار، چند چیدمان و پشتیبانی، نسخه‌های پایه و حرفه‌ای را در صفحهٔ محصول ببین:
   https://parsianitco.com/fa/plugins/shoppable-reels/

---

## پرامپت

```text
You are a senior front-end engineer. Build a single, self-contained HTML file (inline CSS and vanilla JavaScript, no frameworks, no build step) that demonstrates a "shoppable reels" widget for an online store.

Requirements:
1. Layout
   - A horizontal row of 4 vertical video cards (9:16 aspect ratio) on desktop; on mobile (< 640px) show one card at a time with horizontal swipe (CSS scroll-snap).
   - Support right-to-left (RTL) layout: set dir="rtl" on <html> and use logical CSS properties (margin-inline, padding-inline, inset-inline).
   - Use the Vazirmatn font from Google Fonts for Persian text.

2. Each reel card
   - A <video> element with muted, playsinline, loop, preload="none" and a poster image.
   - Play/pause button, mute/unmute button, and a thin progress bar at the top that follows video.currentTime.
   - A product chip at the bottom of the card with a small square thumbnail, product name and price (formatted with toLocaleString('fa-IR') + " تومان").

3. Behaviour
   - Use IntersectionObserver so only the card that is at least 60% visible plays; pause all others.
   - Tapping the product chip opens a bottom sheet with product name, price, an optional size selector and an "افزودن به سبد" (Add to cart) button.
   - Keep a simple cart in memory (an array). Show the item count in a cart badge in the page header and a short confirmation toast after adding.
   - Respect prefers-reduced-motion: no autoplay, no animated transitions.
   - All buttons must be real <button> elements with aria-labels and a visible focus outline. The bottom sheet must close with Escape and return focus to the chip.

4. Data
   - Define the products in one JavaScript array at the top of the script:
     { id, name, price, video, poster, thumb, sizes? }
   - Use placeholder paths like "media/reel-1.mp4" that I will replace with my own files.

5. Code quality
   - Clean, commented code; no external libraries.
   - Explain at the end, in Persian, how I could later connect the "Add to cart" button to a real WooCommerce store (just the idea; do not write the plugin).

Return only the complete HTML file, then the short Persian explanation.
```

---

## گام بعدی

نسخهٔ آموزشی برای فهم ایده کافی است. برای فروشگاه واقعی، این‌ها را در نسخه‌های آماده داری:

- افزونهٔ قابل نصب وردپرس با کلید مجوز
- اتصال مستقیم ریلز به محصولات و سبد خرید ووکامرس (نسخهٔ حرفه‌ای)
- چیدمان‌های مختلف، تنظیمات برندینگ و آمار پایهٔ تعامل (نسخهٔ حرفه‌ای)
- به‌روزرسانی و پشتیبانی

https://parsianitco.com/fa/plugins/shoppable-reels/#pricing

© Parsian IT — Quality is our business plan