كيفية ربط خاصية التنزيل المتغير مع إضافة السلة باستخدام Ajax

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

تحسين واجهة المستخدم مع خيارات المنتجات المتغيرة

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

كيف يمكن ربط الزر بخصائص (Dropdowns) الخيارات؟

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

إليك كيفية تنفيذ ذلك. في الكود الخاص بك، يجب أن يتضمن كل عنصر للمنتج زراً لإضافة إلى السلة مع تحديد معرف المنتج. بعد ذلك، نكتب بعض الأكواد JavaScript للتعامل مع التحديدات وزر الإضافة:

    document.getElementById('add-to-cart').addEventListener('click', function (e) {
        e.preventDefault(); // لمنع التحميل الافتراضي للصفحة
        const productId = this.getAttribute('data-product-id');
        const selectedColor = document.querySelector('.color-dropdown .dropdown-toggle .color-circle').getAttribute('data-color');
        const selectedSize = document.querySelector('.size-dropdown .dropdown-toggle').textContent.trim();
        const quantity = document.getElementById('quantity').value;
        // إعداد البيانات لـ AJAX
        const data = {
            product_id: productId,
            quantity: quantity,
            color: selectedColor,
            size: selectedSize,
            action: 'add_to_cart',
        };
        // استخدام AJAX لإضافة المنتج إلى السلة
        jQuery.ajax({
            type: "POST",
            url: woocommerce_params.wc_ajax_url.toString().replace("%%endpoint%%", "add_to_cart"),
            data: data,
            success: function (response) {
                if (response.error && response.product_url) {
                    window.location = response.product_url; // إعادة توجيه في حالة وجود خطأ
                } else {
                    // تحديث الكارت
                    document.getElementById('cart-count').innerText = response.cart_count; 
                    alert('تمت إضافة المنتج إلى السلة بنجاح!');
                }
            },
            error: function (xhr, status, error) {
                console.error('خطأ:', error);
            }
        });
    });

الاستفادة من AJAX لتحديث السلة دون تحديث الصفحة

تكمن إحدى المزايا الكبيرة لاستخدام AJAX في سرعة تفاعل المستخدم مع الموقع. من خلال إضافة المنتج إلى السلة دون الحاجة إلى تحميل الصفحة، يتمكن العملاء من رؤية التحديثات بشكل فوري. مما يحسن من تجربتهم ويزيد من احتمالية إتمام عملية الشراء.

خلاصة

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