تحميل نموذج دفع WooCommerce في نافذة بوتستراب باستخدام AJAX

تعتبر تجربة المستخدم من أهم العناصر التي تؤثر على نجاح أي موقع تسوق إلكتروني. من ضمن الممارسات الشائعة في تصميم واجهات الاستخدام هو استخدام النوافذ المنبثقة (Modals) لعرض محتوى معين دون الحاجة للانتقال إلى صفحة جديدة. في هذا المقال، سنتناول كيفية تحميل نموذج الدفع في WooCommerce داخل نافذة منبثقة باستخدام Bootstrap عبر AJAX، مما يساهم في تحسين تجربة التسوق للمستخدم.

لماذا استخدام النافذة المنبثقة في WooCommerce؟

يعد استخدام النوافذ المنبثقة طريقة فعالة لتوفير تجربة سلسة للمستخدمين عند التسوق عبر الإنترنت. بدلاً من توجيههم إلى صفحة الدفع، يمكنك تقديم النموذج في إطار منبثق، مما يمنحهم القدرة على إتمام عملية الشراء بسرعة وسهولة. يعد دمج WooCommerce مع Bootstrap لجعل نموذج الدفع يظهر في نافذة منبثقة عبر AJAX طريقة مبتكرة لتحسين تجربة المستخدم.

خطوات تحميل نموذج الدفع في WooCommerce باستخدام Bootstrap Modal وAJAX

لنجاح هذه العملية، تحتاج إلى القيام بعدة خطوات. أولاً، يجب عليك إعداد قوالب WooCommerce الخاصة بك. في ملف shopping-bag.php، تأكد من أن لديك زر "المتابعة إلى الدفع" والذي سيفتح النافذة المنبثقة.

<button id="proceed-to-checkout" class="btn btn-primary">المتابعة إلى الدفع</button>

إعداد AJAX في ووردبريس

قبل أن تتمكن من تحميل نموذج الدفع، تحتاج إلى إعداد AJAX في ووردبريس. يمكنك استخدام الكود التالي في ملف functions.php الخاص بقالبك:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('custom-ajax', get_template_directory_uri() . '/js/custom-ajax.js', array('jquery'), null, true);
    wp_localize_script('custom-ajax', 'myAjax', array('ajaxurl' => admin_url('admin-ajax.php')));
});
add_action('wp_ajax_load_checkout', 'load_checkout_function');
add_action('wp_ajax_nopriv_load_checkout', 'load_checkout_function');
function load_checkout_function() {
    ob_start();
    woocommerce_checkout_order_review();
    $content = ob_get_clean();
    echo $content;
    wp_die();
}

هذا الكود يقوم بتخصيص AJAX الخاص بك، بحيث يستطيع استدعاء نموذج الدفع عند الحاجة.

إنشاء ملف JavaScript لجلب محتوى نموذج الدفع

بعد إعداد AJAX، تحتاج إلى كتابة كود JavaScript لجلب محتوى نموذج الدفع عند النقر على زر "المتابعة إلى الدفع". أنشئ ملف JavaScript جديد (مثل custom-ajax.js) وأضف الكود التالي:

jQuery(document).ready(function($) {
    $('#proceed-to-checkout').on('click', function(e) {
        e.preventDefault();
        $.ajax({
            url: myAjax.ajaxurl,
            type: 'POST',
            data: {
                action: 'load_checkout'
            },
            success: function(response) {
                $('#modal-body').html(response);
                $('#checkout-modal').modal('show');
            }
        });
    });
});

هذا الكود يقوم بإرسال طلب AJAX عند النقر على الزر، ويقوم بتحميل نموذج الدفع إلى جسم النافذة المنبثقة.

تنسيق وإظهار النافذة المنبثقة

ستحتاج أيضاً إلى إعداد هيكل النافذة المنبثقة. هنا نموذج بسيط يستخدم Bootstrap:

<div class="modal fade" id="checkout-modal" tabindex="-1" role="dialog" aria-labelledby="checkoutModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="checkoutModalLabel">نموذج الدفع</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modal-body">
                <!-- سيتم تحميل نموذج الدفع هنا -->
            </div>
        </div>
    </div>
</div>

الاختبار والتحسين

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

بهذا الشكل، تكون قد تعلمت كيفية تحميل نموذج الدفع في WooCommerce داخل نافذة Bootstrap باستخدام AJAX. تعتبر هذه الطريقة مثالية لتحسين تجربة المستخدم وتقليل الوقت الذي يستغرقه العملاء لإكمال عملية الشراء. من المهم الاهتمام بتجربة المستخدم لتوفير موقع تسوق ناجح وفعال.