مطالعه موردی مهندسی
سبد خرید کشویی A2
افزودن یک محصول قبلاً مشتری را به صفحهی سبد میفرستاد و از جریان مرور بیرون میانداخت. این همان کشویی است که جای آن پرش را گرفت: در همان صفحه باز میشود، از طریق سیستم فرگمنت خود ووکامرس بهروز میشود و وقتی مشتری هنوز دارد میگردد سر راهش نیست.
مسئله تجاری
مسیر پیشفرض افزودن به سبد یک بارگذاری صفحه است، که روی موبایل یعنی گمکردن جایت در یک کاتالوگ بلند. افزونههای کشوی معمول این را حل میکنند اما وضعیت سبد خودشان را میآورند که از وضعیت ووکامرس منحرف میشود، و زیر بهینهسازی تهاجمی جاوااسکریپت میشکنند. این تعامل را میخواستم بدون یک منبع حقیقت دوم برای سبد.
آنچه تحویل دادم
- a2-cart-offcanvas.php، یک افزونهی MU خودبسنده نسخهی ۱.۰.۲۳ با شورتکدهای خودش برای دکمه، نشان و شمارندهی اقلام.
- بهروزرسانی مبتنی بر فرگمنت از طریق woocommerce_add_to_cart_fragments، تا کشو از خود سبد ووکامرس رندر شود نه از یک کپیاش.
- رفتار باز-شدن-هنگام-افزودن که با یک کوکی کوتاهعمر در هوک woocommerce_add_to_cart تنظیم میشود، تا کشو بعد از یک افزودن واقعی باز شود نه در هر بازدید صفحه.
- سرکوب ریدایرکت در دو سطح: آپشن ریدایرکت سبد فیلتر و خاموش میشود، و woocommerce_add_to_cart_redirect با اولویت بسیار دیر به URL فعلی برگردانده میشود.
- اندپوینتهای AJAX برای حذف قلم و تازهسازی فرگمنت، ثبتشده برای هر دو حالت کاربر لاگینشده و مهمان.
- قالببندی تومان که رقمهای فارسی و عربی را قبل از پارس نرمال میکند، چون HTML قیمتی که از قالب میآید بهطور یکدست در یک سیستم عددی نیست.
- استثناهای صریح لایتاسپید تا اسکریپت کشو هیچوقت defer، delay یا combine نشود.
رویکرد فنی
- کشو هیچ وضعیت سبدی نگه نمیدارد. هر رندر خروجی فرگمنت خود ووکامرس است، یعنی نمیتواند با صفحهی سبد اختلاف پیدا کند.
- درخواستهای افزودن به سبد از نوع GET در wp_loaded قبل از پردازش ووکامرس رهگیری میشوند، تا یک URL اشتراکی یا بوکمارکشده نتواند بیصدا قلم اضافه کند.
- پارامترهای افزودن بعدش از 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 مستثنا"
پول: "رقمهای فارسی/عربی قبل از پارس نرمال میشوند"
}ارزش حرفهای این پروژه
استثناهای لایتاسپید و نرمالسازی رقمها آن چیزی است که به آن اشاره میکنم. هیچکدام کار طراحی جالبی نیستند و هر دو تفاوت بین یک دمو و چیزی هستند که روی یک فروشگاه فارسی واقعی پشت یک بهینهساز تهاجمی دوام میآورد.
انتخاب نگهنداشتن وضعیت سبد همان تصمیمی بود که بقیه را ارزان کرد. بیشتر باگهای کشویی که دیدهام در واقع باگ همگامسازیاند.