طراحی سایت فروشگاهی دوربین مدار بسته سینداد | مهندسی معکوس ووکامرس

نوع پروژه: طراحی سایت فروشگاهی تخصصی با شخصی‌سازی‌های عمیق
حوزه فعالیت: فروش آنلاین دوربین‌های مدار بسته، تجهیزات نظارتی و امنیتی
آدرس سایت: sindad.ir

وقتی یک فروشگاه اینترنتی باید از چارچوب‌های معمول خارج شود

در بازار تخصصی تجهیزات امنیتی و دوربین‌های مدار بسته، وب‌سایت یک فروشگاه صرفاً محلی برای نمایش محصولات و کلیک روی دکمه “خرید” نیست. این وب‌سایت باید به‌طور هم‌زمان یک کاتالوگ فنی قدرتمند، یک پلتفرم ثبت سفارش سازمان‌یافته، و یک ویترین حرفه‌ای باشد که پیچیدگی‌های محصولات نظارتی را به زبانی ساده به مشتریان انتقال دهد. 

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

تحلیل نیازمندی‌ها: وقتی کارفرما می‌خواهد همه چیز متفاوت باشد

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

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

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

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

فرآیند طراحی و پیاده‌سازی تخصصی

۱. مهندسی معکوس مسیر خرید (Checkout Hijacking)

برای پیاده‌سازی خواسته اصلی کارفرما، نمی‌توانستم صرفاً از تنظیمات ووکامرس استفاده کنم. باید وارد قلب فرآیند خرید می‌شدم و آن را بازنویسی می‌کردم. با استفاده از Hookها و Filterهای ووکامرس، یک صفحه سفارشی (Custom Endpoint) طراحی کردم. هنگامی که کاربر روی دکمه “ثبت سفارش” کلیک می‌کند، به‌جای checkout استاندارد، به این صفحه اختصاصی منتقل می‌شود. در این صفحه، یک فرم زیبا و حرفه‌ای به کاربر نشان داده می‌شود. در پشت صحنه، اطلاعات سفارش به طور کامل در دیتابیس ووکامرس ذخیره می‌شود، اما به دلیل تغییر مسیر، کاربر هرگز صفحه پرداخت را نمی‌بیند. کارفرما نیز از طریق ایمیل و پنل مدیریت از ثبت سفارش جدید مطلع می‌شود.

۲. آرشیو سفارشی و تجربه بصری متفاوت

برای صفحه‌بندی دسته‌ها، یک قالب اختصاصی برای taxonomy-product_cat ساختم. در این قالب، به‌جای نمایش محصولات، یک سری کارت‌های تصویری بزرگ با لینک‌های مشخص نمایش داده می‌شود که حس یک کاتالوگ حرفه‌ای را به کاربر القا می‌کند.

۳. جداول داینامیک و ایمپورت هوشمند

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

نتیجه‌گیری: یک فروشگاه اینترنتی در لباسی کاملاً اختصاصی

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

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