استخدام Selectize في ووردبريس بطريقة بسيطة

تُعتبر إضافة Selectize من الأدوات المفيدة لتحسين تجربة المستخدم في مواقع ووردبريس، حيث تعمل على تسريع عملية البحث والاختيار من بين قائمة عناصر كبيرة. في هذا المقال، سوف نتناول كيفية استخدام Selectize في ووردبريس من خلال AJAX، مما يتيح للمستخدمين بحث العناصر واختيارها بسهولة.

مقدمة عن Selectize في ووردبريس

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

إعداد الوظائف في ووردبريس

لاستخدام Selectize بشكل فعال في ووردبريس، يتطلب أولًا إعداد وظيفة PHP تتولى استعلامات البحث. يمكن تنفيذ ذلك عن طريق إضافة الكود التالي إلى ملف functions.php الخاص بقالبك:

add_action('wp_ajax_search_terms', function () {
    $terms = get_terms([
        'taxonomy' => 'pa_colors',
        'hide_empty' => false,
        'search' => $_POST['search']
    ]);
    foreach ($terms as $term) {
        $return[] = array($term->term_id, $term->name);
    }
    echo json_encode($return);
    wp_die();
});

شرح الكود

هذا الكود يقوم بالتالي:

1. ربط الوظيفة بالعملية: يتم استخدام add_action لربط عملية AJAX التي ستقوم بإرجاع النتائج.
2. استعلام عن المصطلحات: يتم استخدام دالة get_terms لاسترجاع المصطلحات من تصنيف محدد، والذي هنا هو pa_colors.
3. إرجاع النتائج: يتم إرجاع النتائج في صورة JSON لتكون جاهزة للاستخدام في JavaScript.

إعداد JavaScript مع Selectize

بعد إعداد الكود PHP، يجب إعداد JavaScript لتهيئة Selectize واستخدام AJAX لجلب البيانات. إليك الكود الذي يمكنك إضافته:

$('.variation-input').selectize({
    plugins: ["clear_button", "remove_button"],
    valueField: 'id',
    labelField: 'name',
    searchField: 'name',
    options: [],
    delimiter: ',',
    preload: true,
    persist: false,
    create: false,
    load: function (query, callback) {
        if (!query.length) return callback();
        $.ajax({
            type: 'post',
            url: sudJs.ajax_url,
            dataType: 'json',
            data: {
                action: 'search_terms',
                search: query,
            },
            error: function () {
                console.log('error');
                callback();
            },
            success: function (result) {
                console.log(result);
                callback(result);
            }
        });
    },
});

توضيح الكود

يتضمن هذا الكود إعدادات Selectize:

• مزامنة المتغيرات: يتم إعداد متغيرات valueField, labelField, و searchField لتهيئة كيفية التعامل مع البيانات.
• استدعاء AJAX: عند كتابة المستخدم لأي شيء في مربع البحث، يتم استدعاء AJAX لجلب النتائج المتعلقة بالاستفسار من الخادم.

التأكد من عرض النتائج

في بعض الأحيان، يمكن أن تظهر النتائج في وحدة التحكم (Console) ولكن لا تظهر في شاشة Selectize. إليك بعض الأسباب وكيفية معالجتها:

1. تأكد من التنسيق: تأكد من أن البيانات المُرجعة في التنسيق الصحيح، حيث يجب أن تتكون النتائج من كائنات تحتوي على الخصائص المعينة في Selectize.

2. إعدادات خيارات Selectize: تحقق من أن جميع الخيارات معدة بشكل سليم، وأنه تم تعريف valueField, labelField, و searchField بما يتناسب مع البيانات المُرجعة.

3. غلق الاستعلامات بشكل صحيح: تأكد من استدعاء callback(result) بشكل صحيح عند استلام البيانات، لضمان تحميل النتائج في قائمة الاختيار.

استنتاج

إضافة Selectize إلى ووردبريس باستخدام AJAX يعتبر خطوة هامة لتحسين تجربة المستخدم. من خلال إعداد الوظائف المناسبة في PHP وتنسيق JavaScript بشكل صحيح، يمكن للمستخدمين الاستفادة من بحث ديناميكي وسريع. عبر متابعة التوجيهات المذكورة أعلاه، يمكنك بسهولة دمج Selectize في موقع ووردبريس الخاص بك. تعتبر هذه العملية جزءاً من تطوير واجهات مستخدم صديقة وفعالة، مما يسهل على الزوار التعامل مع المحتوى بشكل أفضل.