توسيع نافذة معاينة طلبات WooCommerce بتعديل الحالة مباشرة

تحتوي قائمة الطلبات في WooCommerce على نافذة معاينة سريعة: انقر أيقونة العين في أي صف فتفتح نافذة تعرض بيانات الفوترة وبيانات الشحن وعناصر الطلب. إنها مفيدة فعلًا، لكنها للقراءة فقط افتراضيًا: تغيير الحالة أو الاطلاع على ملاحظات الطلب ما زال يعني ترك النافذة وفتح شاشة تعديل الطلب الكاملة.

توسيع النواة بالطريقة الصحيحة

بدلًا من استبدال قالب النافذة في WooCommerce (وهو ما يتعطل مع التحديث التالي)، استخدمنا نقطتي التوسيع الرسميتين الموجودتين أصلًا: المرشح woocommerce_admin_order_preview_get_order_details الذي يتيح حقن بيانات إضافية فيما تستقبله النافذة، وwoocommerce_admin_order_preview_end، وهو إجراء يُنفَّذ في نهاية قالب Underscore.js الخاص بالنافذة، ويتيح إضافة ترميز يستطيع الوصول إلى البيانات نفسها.

باستخدام هذين الخطافين معًا أضفنا:

• قائمة منسدلة للحالة مع زر حفظ، مرتبطة بمعالج AJAX صغير يحدّث الطلب، والأهم أنه يحدّث صف القائمة أيضًا وليس النافذة فقط، حتى لا تعرض القائمة حالة قديمة بعد إغلاقها.
• عرضًا قابلًا للتمرير لملاحظات الطلب الداخلية، مجلوبة عبر wc_get_order_notes() ومعروضة من الأحدث إلى الأقدم تمامًا كما في شاشة الطلب الكاملة.
• زر تسليم الطلب لشركة الشحن عبر WhatsApp الموصوف في مقال منفصل، والموجود في النافذة نفسها.

جعله يبدو أصليًا

أصعب جزء لم يكن الوظيفة، بل مطابقة الإيقاع البصري لـ WooCommerce بدقة كافية حتى لا تبدو الإضافات مُلصقة. طابقنا الحشوات ونمط العناوين والمسافات التي يستخدمها WooCommerce بالفعل في لوحة «Billing details»، بدلًا من اختراع لغة بصرية جديدة لهذه النافذة وحدها. والنتيجة تبدو امتدادًا للنافذة، لا إضافة مثبتة أسفلها.

أهم الدروس

• نقاط الربط الرسمية في WooCommerce لهذه النافذة موجودة تحديدًا لكي لا تضطر إلى استبدال قالبها؛ واستخدامها يجعل التخصيص آمنًا مع التحديثات.
• أي تحديث AJAX في لوحة الإدارة يجب أن يلمس كل مكان تُعرض فيه البيانات المتغيرة، لا عنصر التحكم الذي تفاعل معه المستخدم فقط، وإلا أصبحت الواجهة قديمة دون أن يلاحظ أحد.
• الاتساق البصري مع مكونات المنصة نفسها قرار تصميم حقيقي وليس ترفًا؛ فهو ما يجعل الإضافة المخصصة جديرة بالثقة.

اقرأ أيضًا: التحكم في الأعمدة الظاهرة على الهاتف، تغيير متغير المنتج بعد إتمام الطلب.

هل تواجه قيدًا مشابهًا في لوحة إدارة WooCommerce أو WordPress لديك؟ لنتحدث؛ فـ ArtinTech Solution تبني هذا النوع تحديدًا من أدوات المتاجر المخصصة.