إضافة WooCommerce AJAX إلى عربة التسوق - البرنامج التعليمي خطوة بخطوة

نشرت: 2019-11-20

منذ بضعة أسابيع تحدثنا عن كيفية إضافة وظيفة عربة التسوق برمجيًا لزيادة مبيعاتك. اليوم ، سنلقي نظرة على كيفية تنفيذ AJAX في الزر Add to cart في منتجات WooCommerce . سيؤدي ذلك إلى تحسين تجربة المستخدم وعملية البيع الشاملة ، مما سيساعدك أيضًا على تحسين متجرك وزيادة إيراداتك.

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

في هذا الدليل ، سنوضح لك كيفية القيام بذلك خطوة بخطوة.

فوائد AJAX في WooCommerce

باختصار ، فوائد استخدام AJAX في متجرك هي:

  • تقليل تحميل الخادم وعرض النطاق الترددي
  • تسريع عملية الشراء
  • تحسين تجربة العملاء
  • تقليل التخلي عن عربة التسوق
  • زيادة معدلات التحويل

البرنامج التعليمي: WooCommerce AJAX إضافة إلى عربة التسوق

لتطبيق وظيفة AJAX add to cart في WooCommerce ، هناك خياران:

  1. مع البرنامج المساعد
  2. ترميزها بنفسك

دعونا نلقي نظرة على كل طريقة.

1) إضافة AJAX إلى عربة التسوق مع البرنامج المساعد

إذا لم تكن لديك خبرة في الترميز أو كنت تفضل حلاً سهلاً ، فإن استخدام مكون إضافي يعد اختيارًا ممتازًا. ما عليك سوى تنزيل AJAX add to cart WooCommerce plugin ، وتثبيته وسيقوم البرنامج بالباقي.

Ajax إضافة إلى عربة التسوق لـ WooCommerce

AJAX add to cart for WooCommerce هو أحد أفضل المكونات الإضافية لإضافة AJAX إلى زر الإضافة إلى عربة التسوق WooCommerce. تتيح هذه الأداة للمتسوقين تضمين منتجات فردية أو متغيرة في عرباتهم دون الحاجة إلى إعادة تحميل الموقع في كل مرة. والأفضل من ذلك أنه يعمل بسلاسة في 99٪ من سمات WordPress ولا يتطلب أي إعداد أولي. بمجرد تثبيته ، سيكون جاهزًا للعمل.

2) قم بتشفيرها بنفسك

هل لديك بعض مهارات الترميز وتفضل تخصيص زر الإضافة إلى عربة التسوق WooCommerce AJAX؟ في هذا الدليل ، سنوضح لك كيفية القيام بذلك خطوة بخطوة.

أ) تثبيت موضوع فرعي

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

ب) تضمين ملف JavaScript (JS)

في ملف jobs.php للقالب الفرعي ، قم بتضمين ملف JavaScript باستخدام ربط wp_enqueue_script . هذا هو أحد أكثر الخطافات شيوعًا التي يقدمها WordPress لتخصيص مواقع الويب. دعنا نلقي نظرة على البرنامج النصي الذي يتضمن ملف ajax_add_to_cart.js أدناه:

 الوظيفة ql_woocommerce_ajax_add_to_cart_js () {
    إذا (function_exists ('is_product') && is_product ()) {  
       wp_enqueue_script ('custom_script'، get_bloginfo ('stylesheet_directory'). '/js/ajax_add_to_cart.js'، array ('jquery')، '1.0')؛
    }
}
add_action ('wp_enqueue_scripts'، 'ql_woocommerce_ajax_add_to_cart_js') ؛

باستخدام الشرط if (function_exists ('is_product') && is_product ()) في السطر 2 ، فإنك تتأكد من تطبيق JQuery على صفحة منتج فقط.

ج) قم بإنشاء ملف JS

بمجرد القيام بذلك ، قم بإنشاء الملف الذي قمت بتضمينه في الخطوة السابقة. ما عليك سوى الانتقال إلى cPanel ثم إلى مجلد السمات الفرعية . بعد ذلك ، اتبع المسار wp_content / theme / folder . هناك ، قم بإنشاء مجلد جديد في السمة الفرعية تسمى js ، ثم ملف بداخله يحمل نفس الاسم الذي استخدمته في hook ajax-add-to-cart.js . ضع في اعتبارك أن هذه الخطوة تعمل أيضًا حتى إذا كنت تستخدم عميل FTP. إذا كان المظهر الفرعي الخاص بك يحتوي بالفعل على مجلد JS ، فيمكنك استخدامه دون إنشاء مجلد جديد.

د) ملف JQuery / JS

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

 $ ('. single_add_to_cart_button'). on ('click' ، الوظيفة (e) { 
    e.preventDefault () ؛
}) ؛

يرجى ملاحظة أننا نستخدم المحدد $ ('. single_add_to_cart_button') لتشغيل مكالمة AJAX عند النقر فوق الزر. يجب أن تفهم هذا لأن جميع البرامج النصية التالية ستدخل داخل هذه الوظيفة.

هـ) إضافة JQuery WooCommerce AJAX إلى عربة التسوق على المنتجات الفردية

إذن ، نص JQuery الكامل لإضافة AJAX إلى عربة التسوق على المنتجات الفردية هو:

 jQuery (مستند). جاهز (الوظيفة ($) {
    $ ('. single_add_to_cart_button'). on ('click' ، الوظيفة (e) { 
    e.preventDefault () ؛
    هذا الزر $ = $ (هذا) ،
                النموذج $ = $ thisbutton.closest ('form.cart') ،
                معرف = $ thisbutton.val () ،
                product_qty = $ form.find ('إدخال [الاسم = الكمية]'). val () || 1 ،
                product_id = $ form.find ('input [name = product_id]'). val () || بطاقة تعريف،
                variation_id = $ form.find ('input [name = variation_id]'). val () || 0 ؛
    فار البيانات = {
            الإجراء: "ql_woocommerce_ajax_add_to_cart" ،
            معرّف_المنتج: معرّف_المنتج ،
            product_sku: "،
            الكمية: product_qty ،
            variation_id: variation_id ،
        } ؛
    .ajax $ ({
            اكتب: "post"،
            url: wc_add_to_cart_params.ajax_url ،
            البيانات: البيانات ،
            قبل الإرسال: وظيفة (استجابة) {
                $ thisbutton.removeClass ("مضاف"). addClass ("تحميل")؛
            } ،
            مكتمل: الوظيفة (الاستجابة) {
                thisbutton.addClass $ ("مضاف"). removeClass ("تحميل")؛
            } ، 
            النجاح: الوظيفة (الاستجابة) { 
                إذا (response.error & response.product_url) {
                    window.location = response.product_url ؛
                    إرجاع؛
                } آخر { 
                    $ (document.body) .trigger ('added_to_cart'، [response.fragments، response.cart_hash، $ thisbutton])؛
                } 
            } ، 
        }) ؛ 
     }) ؛ 
}) ؛

و) نص PHP

بعد ذلك ، تحتاج إلى معالج PHP. أفضل طريقة هي استخدام بعض أدوات ترشيح WooCommerce لإنشاء وظيفة الإضافة إلى عربة التسوق . هذه المرة ستفعل ذلك باستخدام AJAX. ما عليك سوى نسخ البرنامج النصي التالي ولصقه في ملف function.php الخاص بالقالب الفرعي أسفل النص البرمجي السابق الذي استخدمناه لتضمين ملف JS.

 add_action ('wp_ajax_ql_woocommerce_ajax_add_to_cart'، 'ql_woocommerce_ajax_add_to_cart') ؛ 
add_action ('wp_ajax_nopriv_ql_woocommerce_ajax_add_to_cart'، 'ql_woocommerce_ajax_add_to_cart') ؛          
الوظيفة ql_woocommerce_ajax_add_to_cart () {  
    $ product_id = apply_filters ('ql_woocommerce_add_to_cart_product_id'، absint ($ _ POST ['product_id'])) ؛
    الكمية بالدولار = فارغة ($ _ POST ['الكمية'])؟ 1: wc_stock_amount ($ _ POST ['quantity']) ؛
    variation_id = absint ($ _ POST ['variation_id']) ؛
    $ pass_validation = apply_filters ('ql_woocommerce_add_to_cart_validation'، true، $ product_id، $ quantity)؛
    $ product_status = get_post_status ($ product_id) ؛ 
    if ($ pass_validation && WC () -> cart-> add_to_cart ($ product_id، $ quantity، $ variation_id) && 'publish' === $ product_status) { 
        do_action ('ql_woocommerce_ajax_added_to_cart'، $ product_id) ؛
            إذا ('yes' === get_option ('ql_woocommerce_cart_redirect_after_add')) { 
                wc_add_to_cart_message (المصفوفة ($ product_id => $ quantity) ، true) ؛ 
            } 
            WC_AJAX :: get_refreshed_fragments () ، 
            } آخر { 
                بيانات دولار = مصفوفة ( 
                    "خطأ" => صحيح ،
                    'product_url' => application_filters ('ql_woocommerce_cart_redirect_after_error'، get_permalink ($ product_id)، $ product_id)) ؛
                echo wp_send_json ($ data) ؛
            }
            wp_die () ،
        }

هذا هو! لقد أنشأت للتو زر الإضافة إلى عربة التسوق WooCommerce AJAX ! لكن كيف تعرف أنك فعلت كل شيء بشكل صحيح؟ يمكنك التحقق من ذلك بسهولة. عند النقر فوق الزر " إضافة إلى عربة التسوق " ، يجب إضافة المنتج إلى سلة التسوق دون إعادة تحميل الصفحة.

استنتاج

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

كلا الخيارين ممتازان لذا اختر الخيار الذي يناسب احتياجاتك ومهاراتك بشكل أفضل. سيساعدك هذا على تحسين تجربة المستخدم وزيادة معدلات التحويل. يرجى إخبارنا بأفكارك في قسم التعليقات أدناه.

أخيرًا ، لمزيد من الإرشادات حول WooCommerce ، نوصيك بمراجعة أدلةنا حول كيفية إضافة منتجات WooCommerce وكيفية إنشاء سمات المنتج الافتراضية في WooCommerce.