لقد رأينا الكثير من PHP حتى الآن في Business Bloomer – WooCommerce بعد كل شيء مجموعة من ملفات PHP! ومع ذلك ، في بعض الأحيان لا تكفي PHP ، غالبًا عندما تحتاج إلى العمل مع منتجات متغيرة و “الشكل المحدد حاليًا”.
في الواقع ، يستخدم WooCommerce jQuery (مكتبة JavaScript) للتعامل مع الاختلافات في الواجهة الأمامية وإظهار المحتوى الشرطي (سعر الاختلاف ، الوصف ، الإضافة إلى عربة التسوق) بناءً على التحديد المنسدلة. لذلك ، لاكتشاف معرف التباين الحالي ، يجب علينا استخدام JQuery أيضًا. وإليك الطريقة!
WooCommerce: كشف معرف التباين المحدد
لن أخوض في الكثير من التفاصيل ، ولكن من أجل “الحصول على” معرف التباين ، فكرت في حل بديل لطيف. عند تحديد أحد الأشكال ، يقوم WooCommerce بتعيين معرف التباين لمدخل مخفي في الواجهة الأمامية:
<input type="hidden" name="variation_id" class="variation_id" value="293">لذلك ، ليست هناك حاجة إلى “إعادة” العمل – فلنستفيد من هذا البرنامج النصي الحالي و “نقرأ” ببساطة قيمة الإدخال عندما يتغير الإدخال
في المقتطف الخاص بي ، سينبثق تنبيه (انظر لقطة الشاشة أعلاه) عند تحديد أحد خيارات القائمة المنسدلة للتباين – ولكن بالطبع يمكنك فعل المزيد مع هذا ، مثل تحميل المحتوى الشرطي وتنفيذ PHP وتشغيل الأحداث وما إلى ذلك.
/**
* @snippet Get Currently Selected Variation ID @ WooCommerce Single Product Page
* @how-to Get CustomizeWoo.com FREE
* @sourcecode https://businessbloomer.com/?p=76782
* @author Rodolfo Melogli
* @compatible WooCommerce 3.4.3
*/
add_action( 'woocommerce_before_add_to_cart_quantity', 'bbloomer_display_dropdown_variation_add_cart' );
function bbloomer_display_dropdown_variation_add_cart() {
global $product;
if ( $product->is_type('variable') ) {
?>
<script>
jQuery(document).ready(function($) {
$('input.variation_id').change( function(){
if( '' != $('input.variation_id').val() ) {
var var_id = $('input.variation_id').val();
alert('You just selected variation #' + var_id);
}
});
});
</script>
<?php
}
}WooCommerce: أضف حقلًا مخصصًا إلى تنويعات المنتج
WooCommerce: كيفية تقصير عناوين المنتج
WooCommerce: عرض معرض المنتجات عموديًا (صفحة منتج واحدة)
WooCommerce: نموذج الاستفسار عن المنتج @ صفحة منتج واحد (CF7)
WooCommerce: أضف ملصق “كمية” أمام زر إضافة إلى عربة التسوق
WooCommerce: أضف رمزًا إلى أزرار إضافة إلى عربة التسوق
WooCommerce: أعد تسمية زر “إضافة إلى عربة التسوق” إذا كان المنتج بالفعل @ سلة التسوق
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 في حالة حدوث خطأ!
