إنشاء زر إضافة إلى السلة مخصص للمنتجات المتغيرة في WooCommerce
إن إنشاء زر "أضف إلى السلة" مخصص للمنتجات المتغيرة مع الاختلافات في ووكومرس يعد فكرة جذابة للمتاجر الإلكترونية التي ترغب في تحسين تجربة المستخدم. فعلى الرغم من أن ووكومرس يوفر خيارات عديدة للمستخدمين، إلا أن تخصيص زر إضافة إلى السلة يمكن أن يسهل عمليات الشراء ويسهم في زيادة معدلات التحويل. في هذا المقال، سنستعرض كيفية عمل زر مخصص لجعل تجربة التسوق أكثر سلاسة وفاعلية، بدءًا من اختيار نوع الترخيص وحتى إضافة المنتج المتغير إلى سلة الشراء.
تصميم الزر المخصص
للبدء، نحن بحاجة إلى تصميم الزر المخصص ليعمل وفق متطلبات المنتج المحدد. سنفترض أن لدينا منتجًا يحمل معرف (ID) خاص به، الذي يحتوي على متغيرات تقوم بتحديد نوع الترخيص، مثل "رخصة موقع واحد" و"رخصة مواقع متعددة". لذلك، يجب أن يكون الزر قادرًا على معرفة المنتج المتنوع الذي يريده المستخدم بناءً على اختياره من القائمة المنسدلة.
إنشاء القائمة المنسدلة
يمكنك إضافة قائمة منسدلة في ملف القالب مثل content-single.product.php
، حيث تمكن المستخدم من اختيار نوع الترخيص المرغوب. من المهم أن تتضمن كل خيار في القائمة معرف المتغير المنتج الذي يتوافق معه. وذلك يمكن أن يتم عبر استخدام خاصية data-variation-id
لتحديد كل ترخيص.
<select id="pa_license_type">
<option value="single-site" data-variation-id="variation_id_1">رخصة موقع واحد</option>
<option value="multi-site" data-variation-id="variation_id_2">رخصة مواقع متعددة</option>
</select>
برمجة الزر للوظيفة المطلوبة
بمجرد إنشاء عنصر القائمة المنسدلة، نحتاج لكتابة JavaScript لجعل الزر يتفاعل مع الاختيارات المختلفة. يمكن استخدام code snippet الخاص بنا لتحديث رابط الزر بناءً على الاختيار:
document.addEventListener('DOMContentLoaded', function() {
const variationBtn = document.getElementById('variationBtn');
const licenseTypeSelect = document.getElementById('pa_license_type');
function updateAddToCartUrl() {
const selectedOption = licenseTypeSelect.options[licenseTypeSelect.selectedIndex];
const selectedLicenseType = selectedOption.value;
const variationId = selectedOption.getAttribute('data-variation-id');
const addToCartUrl = `?add-to-cart=&variation_id=${variationId}&attribute_pa_license-type=${selectedLicenseType}&redirect_to_cart=1`;
variationBtn.setAttribute('href', addToCartUrl);
}
// Init on page load with default values
updateAddToCartUrl();
// Update the URL when the license type changes
licenseTypeSelect.addEventListener('change', updateAddToCartUrl);
});
التفاعل مع الزر
يجب أن يضمن الكود أعلاه أنه بمجرد اختيار المستخدم لنوع الترخيص، يتم تحديث رابط الزر ليتضمن معرف المتغير والاختيار الذي تم اختياره. لكن، قد تواجه بعض المشكلات في مرحلة عدم إضافة المنتج إلى السلة. لذا، تأكد من أن الرابط النهائي للزر يعمل بكفاءة عند النقر عليه، مما يؤدي إلى إضافة المنتج إلى سلة الشراء.
الاختبار والتحقق
بعد تنفيذ الكود، من الضروري إجراء الاختبارات اللازمة للتحقق من أن كافة الوظائف تعمل كما هو متوقع. يجب عليك التأكد من أن النظام يتعرف على أي متغير تم اختياره من القائمة المنسدلة وأن المنتج يتم إضافته بشكل صحيح إلى عربة التسوق.
في الختام، يمكن القول إن إنشاء زر مخصص لإضافة المنتجات المتغيرة مع الاختلافات في ووكومرس يمكن أن يعزز من تجربة المستخدم ويسهم في زيادة المبيعات. باتباع الخطوات المذكورة أعلاه، يمكنك تحسين متجرك بطريقة فعّالة ومبتكرة، مما يسهل على الزبائن عملية الشراء ويساهم في تعزيز علامتك التجارية.