Add To Cartv1.0.0
دکمهٔ «افزودن به سبد» که بعد از اولین لمس سرِ جایش به شمارنده تبدیل می‌شود: + برای یکی دیگر، تعدادِ فعلی، و − برای کم‌کردن. وقتی تعداد ۱ است − جایش را به سطل می‌دهد تا حذف از سبد صریح باشد. کاربر بی‌آنکه به سبد برود می‌بیند چند تا برداشته و همان‌جا عوضش می‌کند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/add-to-cart.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/add-to-cart.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/add-to-cart.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/add-to-cart.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { AddToCart } from "@/components/ui/add-to-cart"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
دو حالت دارد که data-state نشانشان می‌دهد: empty یک Button با آیکونِ سبد است و in-cart گروهی با زمینهٔ primary-subtle و حاشیهٔ کم‌رنگِ primary. ارتفاع از ControlSizeProvider می‌آید و پهنا در دو حالت یکی است، پس کارتِ محصول هنگامِ تبدیل نمی‌پرد.
بدونِ quantity خودش تعداد را نگه می‌دارد؛ وقتی جمعِ سبد یا شمارِ آیکونِ سبد را در صفحه نشان می‌دهید، آن را کنترل‌شده کنید و تعداد را در state خودتان نگه دارید.
دسترس‌پذیری
- شمارنده یک group با برچسبِ «تعدادِ گلدان در سبد» است و هر دکمه نامِ کالا را در برچسبش دارد («افزایشِ گلدان»، «حذفِ گلدان از سبد»).
- عدد با aria-live اعلام می‌شود؛ صفحه‌خوان بعد از هر لمس تعدادِ تازه را می‌خواند.
- فوکوس دنبالِ کاربر می‌رود: بعد از افزودن روی + و بعد از حذفِ آخرین عدد دوباره روی دکمهٔ افزودن می‌نشیند.
- دکمه‌ها هم‌اندازهٔ ارتفاعِ کنترل‌اند (۴۴ پیکسل در xl) و در سقفِ موجودی + غیرفعال می‌شود و «حداکثر» زیرِ عدد می‌آید.
مرجع API
AddToCart
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| quantity | number | — | تعدادِ کنترل‌شده؛ صفر یعنی هنوز در سبد نیست. |
| defaultQuantity | number | 0 | تعدادِ اولیه در حالتِ کنترل‌نشده. |
| onQuantityChange | (quantity: number) => void | — | با هر +، − یا حذف صدا زده می‌شود. |
| max | number | Infinity | سقفِ تعداد (موجودی). صفر یعنی ناموجود و دکمه غیرفعال. |
| label | React.ReactNode | "افزودن به سبد" | متنِ دکمه پیش از افزودن؛ در کارتِ کوچک «افزودن». |
| itemName | string | — | نامِ کالا برای برچسب‌های صفحه‌خوان. |
| variant | "default" | "outline" | "outline" | ظاهرِ دکمه پیش از افزودن؛ default برای اقدامِ اصلیِ صفحه. |
| fullWidth | boolean | false | تمام‌عرضِ والد؛ برای پایینِ کارتِ محصول. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
سقفِ موجودی
max که برسد + غیرفعال می‌شود و «حداکثر» زیرِ عدد می‌آید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کنترل‌شده با جمعِ سبد
تعدادها در state صفحه‌اند؛ جمع و شمارِ کالاها هم‌زمان به‌روز می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| سقفِ موجودی | کالای کم‌موجود یا محدودیتِ هر سفارش |
| کنترل‌شده با جمعِ سبد | فهرستِ کالا با جمعِ زنده |
دستورالعمل استفاده
شمارنده سرِ جای دکمه، نه toast
انجام بده
بعد از افزودن، همان دکمه شمارنده شود تا کاربر ببیند چند تا برداشته و بتواند کم یا زیادش کند.
انجام نده
فقط toastِ «به سبد اضافه شد» و دکمه‌ای که عوض نمی‌شود؛ لمسِ دوباره بی‌صدا یکی دیگر اضافه می‌کند.