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

ليرة تركية؛ د

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

أولاً، افهم ما تفعله العربة الصغيرة

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

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

الخطوة 1: التحقق من تحميل أجزاء سلة التسوق

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

1. افتح موقع الويب الخاص بك في Chrome.
2. انقر بزر الماوس الأيمن > فحص لفتح DevTools.
3. انقر على شبكة علامة التبويب وتحديث الصفحة.
4. بحث عن cart-fragments. إذا رأيته، فهو جاري التحميل. ياي!

إذا لم يكن موجودًا، فستحتاج إلى إدراجه يدويًا.

كيفية وضع أجزاء سلة التسوق في قائمة الانتظار JS

في موضوعك functions.php، أضف هذا المقتطف:

function load_woocommerce_scripts() {
  if (function_exists('is_woocommerce') && is_woocommerce()) {
    wp_enqueue_script( 'wc-cart-fragments' );
  }
}
add_action( 'wp_enqueue_scripts', 'load_woocommerce_scripts', 20 );

سيؤدي هذا إلى التأكد من تحميل ميزات WooCommerce AJAX بشكل صحيح.

الخطوة 2: تأكد من وجود علامة WooCommerce Mini-Cart

يقوم البرنامج النصي لأجزاء سلة التسوق بتحديث حاويات HTML محددة عبر AJAX. وهذا يعني أن العلامات المتوقعة يجب أن تكون موجودة في موضوعك.

يبحث WooCommerce عن هذا الترميز:

<div class="widget_shopping_cart_content">
  ... the mini-cart HTML ...
</div>

إذا كان ذلك widget_shopping_cart_content الحاوية مفقودة أو تمت إعادة تسميتها، فلن تعمل التحديثات.

لإصلاح هذا:

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

النهج الأفضل؟ انسخ قالب سلة التسوق الصغيرة من مكون WooCommerce الإضافي إلى قالبك وقم بتعديله بعناية.

الخطوة 3: تحديث Mini-Cart يدويًا باستخدام JavaScript

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

إليك مقتطف جافا سكريبت بسيط يؤدي إلى تحديث أجزاء سلة التسوق:

jQuery( document.body ).trigger( 'wc_fragment_refresh' );

استخدم هذا بعد وظيفة الإضافة إلى سلة التسوق المخصصة الخاصة بك في أي من:

• ملف نصي مخصص
• مكالمة WooCommerce AJAX
• نص مضمّن بعد نجاح AJAX

هذا يخبر WooCommerce: “مرحبًا! لقد تغير شيء ما! قم بتحديث تلك العربة الصغيرة من فضلك!”

الخطوة 4: تحقق مرة أخرى من AJAX “إضافة إلى سلة التسوق”

يقوم WooCommerce بتشغيل تحديث عربة التسوق الصغيرة فقط إذا تمت إضافة المنتجات عبر اياكس. إذا كان المظهر المخصص الخاص بك يستخدم روابط مباشرة مثل ?add-to-cart=123، فلن يقوم بتشغيل الأحداث الصحيحة.

تأكد من أنك تستخدم ترميز نموذج AJAX المناسب، مثل هذا:

<form class="cart">
  <input type="hidden" name="add-to-cart" value="123" />
  <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>
</form>

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

الخطوة 5: استمع للإجراءات المخصصة

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

jQuery( document.body ).on( 'added_to_cart', function(){
  jQuery( document.body ).trigger( 'wc_fragment_refresh' );
});

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

الخطوة 6: مسح ملحقات التخزين المؤقت الخاصة بك

في بعض الأحيان، لا يكون هذا هو الرمز الخاص بك. إنه البرنامج المساعد للتخزين المؤقت الخاص بك. يمكن لأدوات مثل WP Rocket أو W3 Total Cache أو LiteSpeed ​​Cache أن تمنع الأجزاء الديناميكية مثل العربة الصغيرة من التحديث بشكل صحيح.

جرب هذا:

1. امسح كل ذاكرة التخزين المؤقت الخاصة بك
2. تعطيل التصغير (فقط للاختبار!)
3. قم بتمكين “عدم تخزين الأجزاء الديناميكية مؤقتًا” لـ WooCommerce

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

نصيحة إضافية: قم بتصحيح الأخطاء مثل المحترفين

لا تزال عالقة؟ أضف بعض سجلات وحدة التحكم لمعرفة ما إذا كان يتم تشغيل الأحداث:

jQuery( document.body ).on( 'added_to_cart', function(){ 
  console.log('Product added! Refreshing mini-cart.');
});

حاول أيضًا:

• قم بتعطيل المكونات الإضافية الأخرى لاستبعاد التعارضات
• قم بالتبديل لفترة وجيزة إلى سمة Storefront لمقارنة السلوك
• أعد تمكين الميزات واحدة تلو الأخرى للعثور على الجاني

تصحيح الأخطاء يمكن أن يكون لعبة الصبر. لكن ثق بنا، لقد حصلت على هذا!

الخلاصة: أنت الآن خبير في Mini-Cart

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

إذا كنت:

• تأكد من تحميل البرامج النصية لعربة WooCommerce
• حافظ على بنية HTML المتوقعة
• يتم تحديث عربة الزناد يدويًا عند الحاجة

… فأنت ذهبي. ستواكب العربة الصغيرة متجرك الأنيق في الوقت الفعلي.

برمجة سعيدة، وعملاء أكثر سعادة!