إضافة سلة شراء متعددة الخيارات باستخدام JQuery وAjax في ووكوميرس

في عالم التجارة الإلكترونية، أصبحت الخيارات المتعددة للمنتجات ضرورية لجذب الزبائن وتلبية احتياجاتهم. ومن بين هذه الخيارات، يوفر WooCommerce، الهاتف المفضل لمتاجر ووردبريس، طريقة سهلة لإضافة المنتجات إلى سلة التسوق. في هذه المقالة، سنتناول كيفية استخدام JQuery و Ajax لتنفيذ وظيفة "إضافة إلى السلة" لمتغيرات متعددة في WooCommerce.

فهم مفهوم “إضافة إلى السلة” المتعددة في WooCommerce

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

تنفيذ الوظيفة باستخدام PHP و JQuery

لتنفيذ وظيفة "إضافة إلى السلة" لمتغيرات متعددة، ستحتاج إلى إنشاء دالة مخصصة في ملف functions.php. يتطلب الأمر تعريف البيانات المتعلقة بالمنتجات التي ترغب في إضافتها، سواء كانت معرفات المنتجات أو المتغيرات. باستخدام الفلتر wc_multi_add_to_cart_products_data، يمكنك ضبط البيانات بمرونة لتناسب احتياجات متجرك.

add_filter('wc_multi_add_to_cart_products_data', 'define_products_data_to_be_added', 10, 1);
function define_products_data_to_be_added($products_data) {
    $products_data = array(
        ['id' => 98, 'qty' => 1],
        ['id' => 99, 'qty' => 2],
        ['id' => 100, 'qty' => 1],
    );
    return $products_data;
}

تحضير السكريبتات لعملية الإضافة

بعد إعداد بيانات المنتجات، يجب عليك تحميل السكريبت الخاص بمعالجة Ajax. هذا السكريبت سيساعد على إرسال بيانات المنتجات إلى الخادم. يجب عليك استخدام دالة wp_enqueue_scripts لتحميل السكربت الخاص بك وضمان أن يتم تحميل مكتبة JQuery.

add_action('wp_enqueue_scripts', 'enqueue_multi_add_to_cart_scripts');
function enqueue_multi_add_to_cart_scripts() {
    $products_data = apply_filters('wc_multi_add_to_cart_products_data', array());
    if ($products_data) {
        wp_enqueue_script('multi-add-to-cart', get_stylesheet_directory_uri() . '/js/multi-add-to-cart.js', array('jquery'), '1.0', true);
        wp_localize_script('multi-add-to-cart', 'wc_multi_atc', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'action' => 'multi_add_to_cart',
            'products' => $products_data,
            'nonce' => wp_create_nonce('multi_atc'),
        ));
    }
}

التعامل مع طلبات Ajax

بعد الانتهاء من تحميل السكريبت، يجب عليك إعداد دالة للتعامل مع طلبات Ajax. يمكنك استخدام الدالة wp_ajax_multi_add_to_cart لمتابعة الطلبات التي تم إرسالها من جانب العميل وإضافة المنتجات المحددة إلى سلة التسوق.

add_action('wp_ajax_multi_add_to_cart', 'multi_add_to_cart');
add_action('wp_ajax_nopriv_multi_add_to_cart', 'multi_add_to_cart');
function multi_add_to_cart() {
    if (isset($_POST['nonce']) && wp_verify_nonce($_POST['nonce'], 'multi_atc') && isset($_POST['products']) && is_array($_POST['products'])) {
        // معالجة البيانات وإضافتها إلى السلة
    }
    wp_die('حدث خطأ ما.');
}

تحريك المستخدم نحو الإجراء المطلوب

بعد إعداد كل شيء، يمكنك استخدام JQuery للتحكم في الأحداث. يجب أن تسمح للمستخدم بالنقر على زر لإضافة المنتجات عن طريق Ajax. هنا نستخدم JQuery لتنفيذ العملية عند النقر على الزر.

jQuery(function($) {
    if (typeof wc_multi_atc === 'undefined') {
        console.log('خطأ: "wc_multi_atc" غير معرف.');
        return false;
    }
    $(document.body).on('click', '#button', function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: wc_multi_atc.ajax_url,
            data: {
                'action': wc_multi_atc.action,
                'nonce': wc_multi_atc.nonce,
                'products': wc_multi_atc.products
            },
            success: function(response) {
                $(document.body).trigger('wc_fragment_refresh');
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

خاتمة

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