کیس استادی فروشگاه پوشاک پردیس مزون؛ یک فروشگاه اینترنتی واقعی

پاسخ کوتاه: پردیس مزون یک فروشگاه اینترنتی پوشاک زنانه و مردانه در ایران است که با لاراول و اینرسیا و ویو ساخته شده و همین حالا زنده است. در داده خود سایت ۶۱۹ کالا ثبت شده است: دو بخش اصلی زنانه و مردانه، ۱۴ زیردسته و بیست مطلب مجله. در این نوشته پشت صحنه همین نمونه کار طراحی سایت را با عدد نشان می دهم: چه انتخاب هایی شد، هر بخش چه چیزی دارد و از کجا می توانید خودتان راستی آزمایی کنید.

مشتری این پروژه و چیزی که می خواست

پردیس مزون یک فروشگاه پوشاک زنانه و مردانه است که کالکشن های خودش را می آورد و می فروشد. صاحب فروشگاه تا پیش از این پروژه بخش عمده فروش را در پیج و پیام انجام می داد و چیزی که لازم داشت این بود: یک جای مال خودش که هر کالا یک صفحه جداگانه داشته باشد، مشتری با گوشی وارد شود و لباس را با سایز و رنگ خودش پیدا کند، دسته بندی روشن باشد و ثبت سفارش تا آخر کار پیگیری شود.

درخواست ها در عمل این چهار مورد بود:

• هر کالا یک صفحه مستقل با تصویر، قیمت، سایز و توضیح داشته باشد
• کالا ها در دسته و زیردسته فهمیدنی مرتب شوند، نه یک لیست بی پایان
• جستجو و سبد خرید ساده، بدون سردرگمی
• یک بخش جدا برای نوشتن درباره مد و استایل، تا سایت فقط ویترین نباشد

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

پایه فنی: لاراول، اینرسیا و ویو

فروشگاه پوشاک دو نوع مشتری دارد: کسی که مارک و مدل مشخصی می خواهد و کسی که برای دیدن گشتن آمده است. برای هر دو، دو چیز مهم است: سریع باز شدن و پیدا شدن کالا در جستجو. به همین دلیل پایه این پروژه لاراول با اینرسیا و ویو است.

به زبان ساده، این ترکیب سه چیز به فروشگاه می دهد:

• یک کد برای همه جا. همان کدی که صفحه فروشگاه را می سازد، صفحه کالا و مجله و سبد خرید را هم می سازد؛ افزودن بخش تازه بعد از تحویل کار سنگینی نیست.
• کاتالوگ قابل گسترش. کالا، سایز، رنگ، برند و دسته از هم جدا نگه داشته می شوند؛ سایز یا رنگ تازه بدون دست بردن در ساختار اضافه می شود.
• اسکلت مشترک با پروژه های دیگر ما. این فروشگاه روی همان اسکلتی نشسته که پروژه های دیگر ما دارند؛ نگهداری و اضافه کردن امکانات برای صاحب فروشگاه ارزان تر تمام می شود.

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

ساختار فروشگاه: ۶۱۹ کالا در دو بخش و ۱۴ زیردسته

عدد های زیر را امروز از داده خود سایت بیرون کشیدم و شمردم؛ هیچ کدام تخمینی نیست:

بزرگ ترین زیردسته، «پیراهن مجلسی و اسپرت» با ۴۷۴ کالا است و بعد از آن «ست» با ۸۳ کالا. کراپ ۲۰ کالا، کفش ۱۴ کالا و اورال و دامن هر کدام ۸ کالا دارند. این تقسیم بندی تصادفی نیست: بیشترین تقاضای یک فروشگاه پوشاک در پیراهن و ست است و کاتالوگ هم باید همان جا بازتر باشد.

امکانات فروشگاه؛ از صفحه کالا تا سبد خرید

فهرست زیر را از داده خود صفحه های زنده بیرون کشیدم، نه از خاطره:

یک نکته که از بیرون دیده نمی شود ولی برای فروش پوشاک مهم است: هر سایز در این فروشگاه یک قلم مستقل با شناسه خودش است. یعنی اگر از یک بلوز فقط سایز بزرگ تمام شده باشد، همان سایز خاموش می شود و مشتری سراغ سایز های دیگر می رود؛ در فروشگاهی که همه سایز ها یک ردیف شمرده شوند، این تفاوت به سفارش لغوشده تبدیل می شود. اگر می خواهید بدانید همین ریزه کاری ها چطور به فروش می رسند، نوشته سئو سایت فروشگاهی مسیر کار را نشان می دهد.

مجله پردیس: بیست مطلب مد و استایل در پنج دسته

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

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

حجم و سرعت صفحه ها: عدد های اندازه گیری شده

حجم صفحه را با فشرده سازی سنجیدم؛ همان کاری که مرورگر واقعی انجام می دهد:

یعنی با یک بستهٔ حدود چهار کیلوبایتی، فهرست فروشگاه با همه کالا هایش می آید. برای کسی که با اینترنت موبایل وارد می شود، تفاوت بین چهار کیلوبایت و صد کیلوبایت، تفاوت بین ماندن و رفتن است. همه تصویر های کالا در این سایت با قالب WebP ذخیره شده اند و در همان صفحه فروشگاه ۵۵ ارجاع تصویر سبک به چشم می خورد.

یک نکته صداقتی هم بگویم: سرعت کل یک سایت فقط به کد آن وابسته نیست؛ سرور و پشتیبانی هم در آن سهیم اند. زمان پاسخ سرور در همین اندازه گیری برای صفحه اصلی ۲٫۱ ثانیه، صفحه فروشگاه ۳٫۲ ثانیه و مجله ۲٫۷ ثانیه بود و این عدد از روزی به روز دیگر و از ساعت به ساعت جابه جا می شود. عدد هایی که آوردم حجم خود صفحه است و در همین اجرا اندازه گیری شده؛ برای همین شما هم می توانید همان لحظه تکرارش کنید.

چطور خودتان راستی آزمایی کنید

نمی خواهم حرفم را باور کنید. دو دستور زیر را در خط فرمان اجرا کنید و خودتان ببینید:

curl -s -o /dev/null -m 30 \
  -w "%{http_code} %{size_download}\n" \
  https://mezonpardis.ir/shop

اگر جواب با ۲۰۰ شروع شد و حجمی چند ده کیلوبایتی آمد، یعنی سرور خودش فهرست فروشگاه را می دهد.

curl -s -m 30 https://mezonpardis.ir/shop \
  | grep -o "uploads/products" | wc -l

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

این پروژه برای چه کسب و کاری مناسب است

هر فروشگاهی به این ساختار نیاز ندارد. این پروژه برای این حالت ها مناسب است:

• موجودی خودتان را می فروشید، نه موجودی چند فروشنده دیگر
• چند صد قلم کالا دارید و هر کالا سایز و رنگ و تصویر خودش را لازم دارد
• کالا ها در دسته و زیردسته جای می گیرند و مشتری از دسته به کالا می رسد
• می خواهید بخش محتوایی هم داشته باشید تا پیش از خرید دیده شوید

و برای این دو حالت انتخاب دیگری بهتر است: اگر می خواهید ده ها فروشنده در یک سایت بفروشند، این ساختار پایه درستی نیست و از اول باید دنبال سامانه بازارچه رفت. اگر هنوز انتخاب کالا و قیمت گذاری خودتان روشن نیست، اول باید همان تصمیم گرفته شود؛ ساخت سایت، تصمیم های نگرفته را حل نمی کند. مرز فروش در پیج و در سایت هم در نوشته فروشگاه اینترنتی راه بیندازم یا در اینستاگرام بفروشم با عدد و شرط آمده است.

چک لیست تصمیم برای صاحب فروشگاه پوشاک

پیش از سفارش هر فروشگاه پوشاک، این شش مورد را از هر کسی که پیشنهاد می دهد بخواهید. هر شش مورد در همین پروژه قابل بررسی است:

1. صفحه کالا را با سایز و رنگ و موجودی جدا نشان بدهد. اگر سایز ها یک ردیف شمرده شوند، سفارش های لغوشده شروع می شود.
2. بگوید دسته و زیردسته چطور ساخته می شود و بعد از تحویل، افزودن زیردسته تازه چقدر کار می برد.
3. حجم صفحه فروشگاه را نشان بدهد، نه فقط ظاهر آن. ظاهر خوب با صفحه سنگین هم ممکن است؛ عدد حجم حقیقت را می گوید.
4. بگوید بخش مجله دارد یا نه. بیست مطلب درباره مد و پارچه، ارزان ترین راه آمدن مشتری تازه است.
5. بگوید چه کاری در دامنه کارش نیست. کسی که فهرست «چه کاری نمی کنیم» ندارد، بعدا همه چیز را گردن شما می اندازد.
6. معیار پذیرش بنویسد. یعنی وقتی کار تمام شد با چه آزمایشی قبول می شود؟ مثلا: صفحه فروشگاه با یک دستور ۲۰۰ می دهد و شمار کالا ها با فهرست شما می خواند.

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

گام بعدی

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

برای بررسی فروشگاه خودتان هم می توانید با ما گفتگو کنید و بگویید چند قلم کالا دارید و کدام بخش ها را لازم دارید.