مطالعه موردی مهندسی
سبد خرید کشویی A2
تا پیش از این، هر بار که مشتری محصولی به سبد اضافه می‌کرد صفحه‌ی سبد باز می‌شد و رشته‌ی گشتنش پاره می‌شد. این کشو جای آن پرش را گرفت: همان‌جا باز می‌شود، با سیستم فرگمنت خود ووکامرس به‌روز می‌شود و تا وقتی مشتری مشغول گشتن است مزاحمش نمی‌شود.
مسئله تجاری
مسیر پیش‌فرض افزودن به سبد یک بار کل صفحه را از نو بار می‌کند. روی موبایل و در یک کاتالوگ بلند، یعنی مشتری جای خودش را گم می‌کند. افزونه‌های آماده‌ی کشو این را حل می‌کنند، اما هرکدام وضعیت سبد خودشان را می‌آورند که کم‌کم با وضعیت ووکامرس فرق پیدا می‌کند، و زیر بهینه‌سازهای تهاجمی جاوااسکریپت هم می‌شکنند. من همین تعامل را می‌خواستم، بدون اینکه سبد یک منبع حقیقت دوم پیدا کند.
آنچه تحویل دادم
- a2-cart-offcanvas.php؛ یک MU-plugin مستقل، نسخه‌ی ۱.۰.۲۳، با شورت‌کدهای خودش برای دکمه، نشان و شمار اقلام.
- به‌روزرسانی از راه woocommerce_add_to_cart_fragments، تا کشو مستقیم از سبد ووکامرس رندر شود نه از کپی آن.
- باز شدن خودکار پس از افزودن، با یک کوکی کوتاه‌عمر که در هوک woocommerce_add_to_cart ست می‌شود؛ پس کشو فقط بعد از یک افزودن واقعی باز می‌شود، نه در هر بازدید صفحه.
- بستن ریدایرکت در دو سطح: آپشن ریدایرکت سبد با فیلتر خاموش می‌شود، و woocommerce_add_to_cart_redirect با اولویتی خیلی دیر به همان URL فعلی برمی‌گردد.
- اندپوینت‌های AJAX برای حذف قلم و تازه‌سازی فرگمنت، هم برای کاربر واردشده و هم برای مهمان.
- قالب‌بندی تومان که ارقام فارسی و عربی را پیش از پارس یکدست می‌کند، چون HTML قیمتی که از قالب می‌رسد همیشه با یک دستگاه عددی نوشته نشده.
- استثناهای صریح برای لایت‌اسپید، تا اسکریپت کشو هیچ‌وقت defer، delay یا combine نشود.
رویکرد فنی
- کشو هیچ وضعیتی از سبد نگه نمی‌دارد. هر رندر، همان خروجی فرگمنت ووکامرس است؛ پس نمی‌تواند با صفحه‌ی سبد اختلاف پیدا کند.
- درخواست‌های افزودن به سبد از نوع GET در wp_loaded و پیش از پردازش ووکامرس گرفته می‌شوند، تا یک لینک اشتراکی یا بوکمارک‌شده بی‌سروصدا قلم اضافه نکند.
- پارامترهای افزودن بعد از انجام کار از URL پاک می‌شوند، تا یک رفرش ساده افزودن را تکرار نکند.
- نسخه‌ی فایل‌های استاتیک از زمان تغییر فایل گرفته می‌شود، نه از یک رشته‌ی ثابت در کد؛ پس تغییر CSS هیچ‌وقت کهنه سرو نمی‌شود.
- برای استایل‌شیت و اسکریپت هر دو یک نسخه‌ی جایگزین چاپ می‌شود، تا اگر فایل‌ها در دسترس نبودند کشو باز هم کار کند.
نتیجه و شواهد
کشو روی فروشگاه زنده است و افزودن به سبد دیگر مشتری را از صفحه‌ای که در آن بود بیرون نمی‌برد. تست کنترل‌شده‌ای روی اثرش بر نرخ تبدیل نگرفتم، پس فقط پشت ادعای تعاملی می‌ایستم: مسیر خرید یک بارگذاری کامل صفحه کمتر شد، و کشو همیشه با صفحه‌ی سبد یکی مانده، چون هیچ‌وقت نسخه‌ی خودش را از سبد نداشت.
اهمیت برای کارفرما
بیشتر ترافیک این فروشگاه موبایل است، و بار شدن دوباره‌ی صفحه وسط گشتن گران‌ترین نوع اصطکاک است. اینکه این کشو روی فرگمنت‌های ووکامرس ساخته شده و نه دور آن، همان چیزی است که نگهداری‌اش را در آپدیت‌های بعدی ووکامرس ممکن می‌کند.
خلاصه اجرایی خوانا
خلاصه_اجرایی {
پروژه: "A2 Offcanvas Cart"
فایل: "mu-plugins/a2-cart-offcanvas.php (۶۵۳ خط، v1.0.23)"
وضعیت: "هیچ وضعیتی از خودش ندارد؛ فرگمنت ووکامرس را رندر می‌کند"
شرط_باز_شدن: "کوکی کوتاه‌عمر در woocommerce_add_to_cart"
ریدایرکت: "آپشن ریدایرکت سبد خاموش + فیلتر دیرهنگام
که URL فعلی را تحمیل می‌کند"
محافظ‌ها: "افزودن GET در wp_loaded گرفته می‌شود؛
پارامترهای افزودن از URL پاک می‌شوند"
ajax: "حذف قلم + تازه‌سازی فرگمنت، priv و nopriv"
فایل‌ها: "نسخه از filemtime، جایگزین درون‌خطی، لایت‌اسپید
از defer/delay/combine مستثنا"
پول: "ارقام فارسی/عربی پیش از پارس یکدست می‌شوند"
}ارزش حرفه‌ای این پروژه
اگر بخواهم جایی را نشان بدهم، استثناهای لایت‌اسپید و یکدست‌کردن ارقام است. هیچ‌کدام طراحی جذابی نیست، ولی همین دو تا فرق یک دمو با چیزی است که روی یک فروشگاه فارسی واقعی و پشت یک بهینه‌ساز تهاجمی دوام می‌آورد.
تصمیم به نگه‌نداشتن وضعیت سبد، بقیه‌ی کار را ارزان کرد. بیشتر باگ‌هایی که در این نوع کشو دیده‌ام، در اصل باگ همگام‌سازی‌اند.