فروشگاه اینترنتی لباس؛ ویترین، پرداخت آنلاین و پنل مدیریت کامل

معرفی

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

ظاهر سایت شیشه‌ای و نرم است (طراحی glass، با رنگ‌های صورتی و بنفش)، مناسب موبایل و با نوار پایینی مخصوص گوشی، چون بیشتر مشتری‌ها از موبایل می‌آیند.

امکانات فروشگاه (برای مشتری)

• صفحه‌ی اصلی: اسلایدر «پیشنهاد ویژه» با محصولات منتخب، فهرست دایره‌ای دسته‌بندی‌ها، جدیدترین محصولات و نشان‌های اعتماد (پرداخت امن، ارسال سریع، ارسال محرمانه).

• فروشگاه: جست‌وجوی محصول، دسته‌بندی چندسطحی (مثلا دسته و زیردسته)، فیلتر برند، مرتب‌سازی (جدیدترین، ارزان‌ترین، گران‌ترین)، صفحه‌بندی و دکمه‌ی علاقه‌مندی روی هر کارت. صفحه‌ی جدا برای هر دسته و هر برند.

• صفحه‌ی محصول: گالری تصویر با تصویر بندانگشتی، انتخاب ویژگی‌ها (مثل سایز و رنگ) که قیمت و موجودی هر ترکیب را جدا نشان می‌دهد، قیمت با تخفیف، انتخاب تعداد، مشخصات، توضیح کامل با تصویر، محصولات مرتبط و مسیر صفحه (breadcrumb).

• سبد خرید: برای مهمان در مرورگر ذخیره می‌شود و بعد از ورود با حساب کاربری هم‌گام می‌شود، پس از هر دستگاهی در دسترس است. کد تخفیف و هزینه‌ی ارسال هم اعمال می‌شود.

• پرداخت: پرداخت آنلاین با درگاه زرین‌پال، کارت‌به‌کارت، و لینک پرداخت که برای سفارش‌های دستی ساخته می‌شود. قیمت‌ها هنگام ثبت سفارش دوباره در سرور محاسبه می‌شوند، تا کسی نتواند قیمت را دستکاری کند.

• حساب کاربری: ثبت‌نام و ورود با شماره‌ی موبایل یا ایمیل، فراموشی رمز با ایمیل، داشبورد سفارش‌ها و جزئیات هر سفارش (وضعیت، پرداخت، کد رهگیری)، آدرس‌های ذخیره‌شده، علاقه‌مندی‌ها و ویرایش اطلاعات.

• تماس با ما و درباره‌ی ما: فرم پیام که در پنل مدیریت دیده می‌شود، شماره‌ی پشتیبانی، اینستاگرام، آدرس و ساعت پاسخگویی که همه از تنظیمات پنل عوض می‌شوند.

پنل مدیریت

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

• داشبورد و آمار: فروش امروز، ماه و سال، میانگین هر سبد خرید و نمودار فروش.

• محصولات: افزودن و ویرایش با ویرایشگر متن غنی، چند تصویر برای محصول و برای توضیح، ویژگی‌ها و ترکیب‌های آن‌ها (سایز، رنگ) با قیمت و موجودی و تصویر هر ترکیب، قیمت با تخفیف، محصولات مرتبط، برند، کد محصول، سئو و فعال یا غیرفعال‌کردن، و انتخاب محصولات اسلایدر صفحه‌ی اصلی.

• دسته‌بندی و برند: دسته‌بندی چندسطحی با تصویر، و مدیریت برندها.

• سفارش‌ها: فهرست و جزئیات، تغییر وضعیت (در انتظار، در حال پردازش، ارسال‌شده، تحویل‌شده، لغو)، وضعیت پرداخت، کد رهگیری، و ثبت سفارش دستی برای مشتریانی که از راه اینستاگرام سفارش می‌دهند، همراه با لینک پرداخت برای آن‌ها.

• کد تخفیف: درصدی یا مبلغ ثابت، حداقل خرید، سقف تعداد استفاده و فعال یا غیرفعال.

• کاربران: فهرست مشتری‌ها و نقش‌ها (کاربر، ادمین، مدیر)، افزودن و ویرایش.

• پیام‌ها: صندوق پیام‌های فرم تماس.

• تنظیمات: هزینه‌ی ارسال، عنوان و توضیح سایت، آدرس، تلفن، اینستاگرام، ساعت پاسخگویی و متن «درباره‌ی ما».

فنی و سئو

• Next.js و React با رندر سمت سرور، برای سرعت و دیده‌شدن در گوگل. نقشه‌ی سایت (sitemap)، robots، آدرس canonical، داده‌ی ساختاریافته (schema.org برای وب‌سایت و محصول)، عنوان و توضیح اختصاصی برای هر محصول، و جست‌وجوی داخل سایت برای گوگل.

• پایگاه داده‌ی MongoDB با Mongoose. ذخیره‌ی تصاویر روی فضای ابری S3 سازگار، همراه با ساخت خودکار تصویر بندانگشتی و سبک‌کردن عکس‌ها با sharp.

• امنیت: ورود با JWT در کوکی، رمز با bcrypt، محافظت مسیرهای مدیریتی در لایه‌ی سرور، و محاسبه‌ی دوباره‌ی قیمت سفارش در سرور.

• پرداخت و ارتباط: درگاه زرین‌پال، ایمیل برای بازیابی رمز.

• ترب: یک API استاندارد برای ترب (مقایسه‌ی قیمت)، با احراز هویت امضاشده، تا محصولات سایت در ترب نمایش داده شوند.

• PWA و تحلیل: مانیفست برنامه‌ی وب برای نصب روی گوشی، Google Analytics و نماد اعتماد الکترونیکی.

• کش و سرعت: صفحه‌ها با ISR کش می‌شوند و با هر تغییر در پنل، همان صفحه‌ها تازه می‌شوند.

ابزار

• Next.js، React، TypeScript، Tailwind CSS

• MongoDB و Mongoose، JWT، bcrypt

• زرین‌پال، Brevo، آروان‌کلود (S3)، sharp، Recharts، ویرایشگر Quill

نتیجه

یک فروشگاه اینترنتی کامل و زنده، از ویترین و پرداخت تا پنل مدیریت، آمار، سئو و اتصال به ترب؛ با ظاهری اختصاصی و سازگار با موبایل.