WooCommerce: تعطيل السمة حدد ما لم يتم تحديد السابق (المنتجات المتغيرة)

في صفحة منتج واحد لمنتج متغير ، يتم عرض قوائم منسدلة متعددة بحيث يمكن للمستخدمين تحديد اختيار السمة الذي يرغبون فيه.

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

يظهر في الصورة بشكل أفضل مما يُقال ، لذا إليك ملف GIF ، ومعه مقتطف PHP / jQuery. يتمتع!

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

مقتطف PHP / JS: تعطيل القوائم المنسدلة للسمات التالية إذا لم يتم تحديد السمة @ صفحة منتج واحد متغير للمنتج

/**
 * @snippet       Toggle Attribute Selects @ Single Product
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
  
add_action( 'woocommerce_before_single_product', 'bbloomer_disable_variable_product_selects_unless_previous_selected' );
 
function bbloomer_disable_variable_product_selects_unless_previous_selected() {
   global $product;
   if ( ! $product->is_type( 'variable' ) ) return; // exit if not variable
   if ( count( $product->get_available_variations() ) < 2 ) return; // exit if only 1 attribute
   wc_enqueue_js( "
      function toggle_attributes() {
         $('table.variations tbody tr').each(function(){
            if ($(this).prev().find('td.value select').val()=='') {
               $(this).find('td.value select').attr('disabled',true).val(''); // if previous has no value, disable and reset
            } else $(this).find('td.value select').attr('disabled',false);
         });
      }
      toggle_attributes();
      $('table.variations select').change( function(){
         toggle_attributes();
      });
   " );
}

المنشورات ذات الصلة:

WooCommerce: أضف حقلًا مخصصًا إلى تنويعات المنتج

WooCommerce: احصل على معرف التباين المحدد حاليًا

WooCommerce: كيفية تقصير عناوين المنتج

WooCommerce: إزالة / تحرير رسالة “تمت الإضافة إلى عربة التسوق”

WooCommerce: أضف رمزًا إلى أزرار إضافة إلى عربة التسوق

WooCommerce: أعد تسمية زر “إضافة إلى عربة التسوق” إذا كان المنتج بالفعل @ سلة التسوق

WooCommerce: إعادة تسمية وصف المنتج Tab Label @ Single Product Page

WooCommerce: إعادة توجيه صفحة منتج واحد للعملاء المسجلين

WooCommerce: صورة مميزة بعرض كامل @ صفحة منتج واحدة

WooCommerce: تحقق مما إذا كانت المنتجات تنتمي إلى الفئة / العلامة

أين تضيف هذا المقتطف؟

يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”

هل هذا المقتطف (لا يزال) يعمل؟

يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.

إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂

هل تحتاج إلى مساعدة في WooCommerce؟

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