في إطار مسيرتنا لتعلم تطوير إضافات ووردبرس وتمديدات ووكمرس، يبدو لنا كتمرين جيد أن نحاول حفظ معلومات إضافية تخص الطلبيات، وقد اخترنا أن نحفظ رقم تتبع الطلبية نظرا لعدم وجود خاصية كهذه على ووكمرس (دون احتساب التمديدات). وسيخولنا هذا أن نتعلم أشياء عديدة ككيفية إضافة مشهد على صفحة الطلبية لإدخال رقم التتبع، ثم حفظ هذا الأخير على قاعدة البيانات، وسننتطرّق أيضا لكيفية عرضه ضمن الطلبية.

اصطلاح

نحن نستخدم مصطلحَي إضافة وتمديدة بشكل تبادلي، لكن إن شئت التدقيق فإن الإضافة هي إضافةٌ تعمل بشكل مستقل على منصة ووردبرس، أما التمديدة فهي إضافةٌ تقوم بتمديد إضافة أخرى موجودة بالفعل، وهي لا تعمل من دون توافرها. وفي حالتنا هذه فنحن سنطوّر تمديدة لإضافة ووكومرس، ولا تنسى أن تطوير التمديدة لا يختلف عن تطوير الإضافة إلا في أن الأولى تتفاعل مع الثانية ولا تتفعّل إلا بشرط وجودها.

خطوات العمل

دعنا نرسم الخطوط العريضة التي سنتبعها قصد بلوغنا للهدف الذي حددناه. الخطوات هي كالتالي:

  • إنشاء ملفات وهيكل التمديدة (الإضافة) واشتراط عدم تشغيلها إلا بوجود ووكمرس منصبة على المنصة.
  • إنشاء أشتمل لمشهد التمديدة (view) وإيجاد وسيلة لعرضه على واجهة تحرير الطلبية. يضم المشهد حقل إدخالٍ لرمز التتبع وزر حفظ. وقد نضيف حقول أخرى مثل وكيل الشحن…
  • ‏حفظ القيمة المدخلة على قاعدة البيانات عند النقر على حفظ. يستحسن عدم التعديل على شيمة القاب (قاعدة البيانات) وحفظ القيمة بوسيلة أكثر تركيبية.
  • جلب القيمة وعرضها على مشهد التمديدة مع إمكانية تعديلها.

أوف، يبدو ذلك كعمل كثير، لكن هذا هو حال البرمجة، تبدو لك الفكرة صغيرة وسهلة، لكن عندما تحللها بشكل أعمق، تظهر لك الصعوبات والمنعرجات الواحد تلو الآخر، فصبر جميل.

ملفات وهيكل التمديدة

بادئ ذي بدء، نقوم بتجهيز بيئة التطوير، اتّبع نفس الخطوات التي شرحناها في المقالة: كيفية تطوير إضافات ووردبرس. بعدها قم بتنصيب ووكمرس من خلال قائمة الإضافات.

ثم كما سبقت الإشارة إليه أعلاه فإن هيكل التمديدة لن يختلف عن هيكل أي إضافة أخرى من إضافات ووردبرس، لذلك إذا كنت لا تعلم، فانظر مقالتنا الآنف ذكرها لتعرف كيف تتم هيكلة الإضافات. لقد أطلقنا على التمديدة اسم order tracking، ثم أنشأنا المجلد oss_order_tracking وفيه ملف التمديدة الرئيسي oss_order_tracking.php، ثم استبدأناه بما يلي:

<?php
/**
 * Plugin Name: Order Tracking
 * Description: Add tracking number to orders
 * Author: Ossostech
*/

defined( 'ABSPATH' ) or die( 'Access Denied!' );

إذا لم تفهم الغرض من الرماز أعلاه فأنت لم تقرأ مقالتنا السابقة وما زلت تكابر، إلى متى؟ 🙂

بعد ذلك نضع الشرطية الرئيسية التي تتحقق من أن إضافة ووكمرس مفعّلة، بحيث لا يتم تنفيذ أرمزة (أكواد) التمديدة إلا بتحقق الشرط.

/**
 * تحقق من أن ووكمرس مفعّلة
 **/
if (in_array('woocommerce/woocommerce.php', apply_filters('active_plugins', get_option('active_plugins')))) {
  
    // هنا نضع رماز التمديدة
    
}

إدراج مشهد التمديدة

قم أوّلا بإنشاء طلبية تجريبية، وذلك لأن مشهد التمديدة سيتم إدراجه على صفحة الطلبية، لدى قم بذلك حتى تستطيع اختبار عملك. يمكنك إنشاء طلبية جديدة بشكل يدوي من لوحة التحكم عبر قائمة الطلبيات.

بعدها، ومن أجل عرض مشهدنا على صفحة الطلبية فإننا سنستخدم الهوك add_meta_boxes، وهذا ليس بجديد علينا فقد سبق لنا رؤيته بالتفصيل في مقالتنا: تطوير إضافة ووردبرس تعدّل لوحة التحكم وواجهة المدونة. وسنسجل هذا الهوك ضمن شرطية التحقق من ووكمرس أعلاه:

/**
 * تحقق من أن ووكمرس مفعّلة
 **/
if (in_array('woocommerce/woocommerce.php', apply_filters('active_plugins', get_option('active_plugins')))) {

  add_action('add_meta_boxes', 'oss_register_otview');

}

وفي وظيفة الاستدعاء العائد (callback) التي سميتها oss_register_otview، استعملت وظيفة ووردبرس add_meta_box كما يلي:

function oss_register_otview() {
  add_meta_box(
       'oss_otview', // Unique ID
       'Order Tracking & Sync', // Box title
       'oss_otview_cb', // Content callback, must be of type callable
       'shop_order', // Post type
       'side', // context
       'high' // priority
   );
}

إذا ما قارنتَ استعمالنا لهذه الوظيفة مع المقالة السابقة، فستلاحظ 3 اختلافات: المعطى Post Type جعلناه shop_order وذلك لعرض المشهد فقط على واجهة تحكم الطلبيات وليس على الواجهات الأخرى من المنتجات وغيرها. والمعطى context جعلناه side كي يتم عرض المشهد على الجانب حيث توجد الـ order actions والـ order notes. وأخيرا المعطى priority جعلناه high كي يتم عرض مشهدنا فوق جميع المشاهد الأخرى الجانبية. لم يبق الآن سوى إنجاز وظيفة الاستدعاء العائد oss_otview_cb حيث سنحدد عناصر واجهتنا.

function oss_otview_cb() { ?>
  <p class="form-field form-field-wide">
    <label for="oss_tracking_number_input">Tracking Number:</label>
    <input type="text" name="oss_tracking_number_input" id="oss_tracking_number_input" value="" />
  </p>
  <p class="form-field form-field-wide">
    <label for="oss_tracking_link_input">Tracking Link:</label>
    <input type="text" name="oss_tracking_link_input" id="oss_tracking_link_input" value="" />
  </p>
  <?php submit_button('Save & Sync');
}

ستسألني لماذا جعلت الواجهة بهذا الشكل حيث وضعت كلّ عنصر ضمن وسم p مع صنف form-field إلى آخره.. أجيبك قائلًا أن هذه هي الصيغة التي وجدتها مستخدمة على استمارات (forms) التحكم في ووكمرس، وقد حذوت حذوهم لأنني أريد الحفاظ على تناسق الواجهة حتى تكون تمديدتنا مندمجة تمام الإندماج مع ووكمرس.

حفظ المعطيات

سوف تبدأ الآن في ملاحظة التسلسل المتعمّد بين مقالاتنا، فحيث نصحتك بمراجعة المقالة: تطوير إضافة ووردبرس تعدّل لوحة التحكم وواجهة المدونة في الشطر الآوّل فها أنا ذا أكرر ذلك في هذا الشطر، لأننا سنستخدم نفس طريقة حفظ البيانات التي استخدمناها سابقًا، وهي بالاعتماد على post_meta، ولن أكرّر الخوض في تفاصيل هذا الموضوع فانظره هناك.

/**
 * تحقق من أن ووكمرس مفعّلة
 **/
if (in_array('woocommerce/woocommerce.php', apply_filters('active_plugins', get_option('active_plugins')))) {

  add_action('add_meta_boxes', 'oss_register_otview');
  add_action('save_post', 'oss_ot_save_settings');

}

سجّلنا الوظيفة oss_ot_save_settings على الهوك save_post، وفي ما يلي تعريفها:

function oss_ot_save_settings($post_id) {
  if (array_key_exists('oss_tracking_number_input', $_POST)) {
      update_post_meta(
          $post_id,
          'oss_tracking_number_input',
          $_POST['oss_tracking_number_input']
      );
  }
  if (array_key_exists('oss_tracking_link_input', $_POST)) {
      update_post_meta(
          $post_id,
          'oss_tracking_link_input',
          $_POST['oss_tracking_link_input']
      );
  }
}

جلب المعطيات

ولجلب البيانات المحفوظة وعرضها على المشهد فإننا دائمًا نتّبع نفس الطريقة الموضّحة في المقالة السابقة، أي باستخدام الوظيفة get_post_meta، وفيما يلي رِماز المشهد مع عرض القيَم:

function oss_otview_cb() { ?>
  <p class="form-field form-field-wide">
    <label for="oss_tracking_number_input">Tracking Number:</label>
    <input type="text" name="oss_tracking_number_input" id="oss_tracking_number_input" value="<?php echo get_post_meta(get_the_ID(), 'oss_tracking_number_input', true) ?>" />
  </p>
  <p class="form-field form-field-wide">
    <label for="oss_tracking_link_input">Tracking Link:</label>
    <input type="text" name="oss_tracking_link_input" id="oss_tracking_link_input" value=<?php echo get_option('oss_tracking_link_input') ?>"" placeholder="https://" />
  </p>
  <?php submit_button('Save & Sync');
}

خاتمة

لقد قمنا حقًا بإنشاء تمديدة تقوم بعمل ذا أهمية كبيرة تفتقر إليه منصّة ووكمرس (دون احتساب التمديدات المدفوعة المتوفرة)، لكن مع ذلك، لم يكن هذا سوى الحد الأنى من الخيارات. أتركك تطوّر الفكرة كي تصبح أكثر استخدامية وفيما يلي بعض الأفكار:

  • خيار إرسال بريد إلى الزبون يُعلِمُه بحالة الشحن ورمز ورابط التتبّع.
  • إضافة قائمة وكلاء الشحن إلى المشهد كي يختار منها المستخدم وكيل الشحن المعتمد.
  • خيار تغيير حالة الطلبية إلى Completed بعد حفظ رمز التتبّع.