طريقة إضافة قائمة الولايات والجهات في صفحة الدفع Checkout لمتجر يوكان باحترافية

في عالم التجارة الإلكترونية المتسارع، تعتبر تجربة المستخدم (User Experience) هي الفاصل بين إتمام عملية البيع أو سلة متروكة. منصة يوكان (YouCan.shop) أحدثت ثورة في تمكين التجار الشباب، ولكن التميز الحقيقي يكمن في التفاصيل الصغيرة، مثل تحويل حقل “المدينة” التقليدي إلى قائمة منسدلة (Dropdown List) تضم الولايات أو الجهات بشكل منظم.

في هذا المقال، سنغوص في تفاصيل استخدام كود JavaScript مخصص لتحسين صفحة Checkout الخاصة بك، مما يقلل من أخطاء الشحن ويزيد من ثقة العميل.

مقدمة: لماذا تحتاج إلى تخصيص قائمة الولايات في متجر يوكان؟

عندما يقوم العميل بملء بيانات الشحن، يواجه أحياناً صعوبة في كتابة اسم المدينة أو الجهة بشكل صحيح (مثلاً: “الدار البيضاء” قد تُكتب “كازا” أو “الدارالبيضاء”). هذه الاختلافات تسبب مشاكل تقنية عند ربط المتجر مع شركات الشحن أو عند تحليل البيانات.

إليك الفوائد الرئيسية لإضافة هذا الكود:

1. دقة البيانات: ضمان استلام أسماء الجهات بتنسيق موحد لا يقبل الخطأ.
2. تسريع عملية الدفع: العميل يفضل الاختيار من قائمة بدلاً من الكتابة اليدوية، خاصة مستخدمي الهواتف.
3. احترافية المظهر: تعطي انطباعاً بأن المتجر متكامل ومنظم تقنياً.
4. تسهيل اللوجستيات: شركات الشحن في المغرب أو أي دولة أخرى تعتمد على تقسيمات إدارية واضحة، وهذا الكود يوفرها لك.

شرح الكود البرمجي: كيف يعمل هذا السحر؟

الكود الذي سنستخدمه يعتمد على لغة JavaScript، وهي اللغة المحركة لكل التفاعلات في الويب. دعونا نحلل الأجزاء الرئيسية للكود الذي قدمته لتعرف ماذا تفعل كل سطر فيه:

1. إعدادات التصميم (Styling Variables)

JavaScript

const borderThickness = "2px"; 
const borderColor = "#000000"; 
const borderRadius = "15px"; 

هذا الجزء يسمح لك بالتحكم في شكل القائمة لتناسب هوية متجرك البصرية. يمكنك تغيير اللون الأسود (#000000) إلى لون شعارك، وتعديل انحناء الزوايا (15px) ليكون أكثر حدة أو نعومة.

2. مصفوفة الجهات (The Data Array)

JavaScript

const states = [
    "الدار البيضاء - سطات",
    "الرباط - سلا - القنيطرة",
    // ... باقي الجهات
];

هنا تضع قائمة المدن أو الولايات التي تريدها. الكود الحالي مخصص لجهات المغرب الـ 12، ولكن يمكنك استبدالها بمدن السعودية، الإمارات، الجزائر، أو أي تقسيم تريده.

3. استبدال حقل الإدخال (The Injection Logic)

يقوم الكود بالبحث عن الحقل الأصلي الذي يحمل اسم city في صفحة يوكان، ثم يقوم بـ “إخفائه” وبناء عنصر select (قائمة منسدلة) مكانه. الأهم من ذلك، هو الجزء الأخير من الكود:

JavaScript

select.addEventListener('change', function() {
    cityInput.value = this.value;
    cityInput.dispatchEvent(new Event('input', { bubbles: true }));
});

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

خطوات تركيب الكود في متجر يوكان (YouCan)

لا تقلق، لا تحتاج لأن تكون مبرمجاً لتطبيق هذا. اتبع الخطوات التالية بدقة:

الخطوة الأولى: الدخول إلى الإعدادات

1. سجل الدخول إلى لوحة تحكم متجرك في YouCan.
2. من القائمة الجانبية، اضغط على “الإعدادات” (Settings).
3. اختر “المتجر عبر الإنترنت” (Online Store).

الخطوة الثانية: الوصول إلى قسم JavaScript

1. ابحث عن خيار “CSS و JavaScript مخصص” (CSS/JavaScript Config).
2. ستجد عدة مربعات نصية، ما يهمنا هو المربع الخاص بـ “JavaScript بصفحة الدفع” (Checkout Config) أو “تذييل الصفحة” (Footer Snippet).

الخطوة الثالثة: لصق الكود وحفظ التغييرات

1. قم بنسخ الكود كاملاً (الذي يبدأ بـ <script> وينتهي بـ </script>).
2. الصقه داخل المربع المخصص.
3. اضغط على زر “حفظ” (Save) في أعلى الصفحة.

كيفية تخصيص الكود ليناسب احتياجاتك الخاصة

الميزة في هذا الكود هي مرونته العالية. إليك كيف يمكنك تعديله:

تغيير الدول أو المدن

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

JavaScript

const states = [
    "الرياض",
    "مكة المكرمة",
    "المدينة المنورة",
    "القصيم",
    "المنطقة الشرقية"
];

تعديل الألوان لتناسب الهوية (Branding)

إذا كان لون متجرك الأساسي هو الأزرق، قم بتغيير قيمة borderColor:

• الأزرق: const borderColor = "#0000FF";
• الأخضر: const borderColor = "#28a745";

التحكم في عرض القائمة

الكود مضبوط ليكون العرض 100% ليتناسب مع الهواتف الذكية بشكل ممتاز، وهو أمر ضروري لأن أكثر من 80% من تسوق يوكان يتم عبر الموبايل.

نسخ الكود كاملا

<script>

document.addEventListener('DOMContentLoaded', function() {
    const borderThickness = "2px"; 
    const borderColor = "#000000"; 
    const borderRadius = "15px"; 

    // قائمة الولايات والجهات

    const states = [

        "الدار البيضاء - سطات",
        "الرباط - سلا - القنيطرة",
        "طنجة - تطوان - الحسيمة",
        "فاس - مكناس",
        "مراكش - آسفي",
        "درعة - تافيلالت",
        "بني ملال - خنيفرة",
        "الشرق",
        "سوس - ماسة",
        "كلميم - واد نون",
        "العيون - الساقية الحمراء",
        "الداخلة - وادي الذهب"

    ];
    const cityInput = document.querySelector('input[name="city"]');
    if (cityInput) {
        const select = document.createElement('select');
        select.name = "city_select";
        select.className = "form-control"; 
        select.style.width = "100%";
        select.style.height = "48px"; 
        select.style.marginBottom = "10px";
        select.style.borderStyle = "solid";
        select.style.borderColor = borderColor;
        select.style.borderWidth = borderThickness;
        select.style.borderRadius = borderRadius;
        select.style.padding = "0 15px";
        select.style.outline = "none"; 

        // ---------------------------------

        const defaultOption = document.createElement('option');
        defaultOption.text = "اختر الولاية أو الجهة";
        defaultOption.value = "";
        select.appendChild(defaultOption);
        states.forEach(function(state) {
            const option = document.createElement('option');
            option.text = state;
            option.value = state;
            select.appendChild(option);
        });
        cityInput.style.display = 'none';
        cityInput.parentNode.insertBefore(select, cityInput);
        select.addEventListener('change', function() {
            cityInput.value = this.value;
            cityInput.dispatchEvent(new Event('input', { bubbles: true }));

        });
    }
});
</script>

<script>

document.addEventListener('DOMContentLoaded', function() {
    const borderThickness = "2px"; 
    const borderColor = "#000000"; 
    const borderRadius = "15px"; 

    // قائمة الولايات والجهات

    const states = [

        "الدار البيضاء - سطات",
        "الرباط - سلا - القنيطرة",
        "طنجة - تطوان - الحسيمة",
        "فاس - مكناس",
        "مراكش - آسفي",
        "درعة - تافيلالت",
        "بني ملال - خنيفرة",
        "الشرق",
        "سوس - ماسة",
        "كلميم - واد نون",
        "العيون - الساقية الحمراء",
        "الداخلة - وادي الذهب"

    ];
    const cityInput = document.querySelector('input[name="city"]');
    if (cityInput) {
        const select = document.createElement('select');
        select.name = "city_select";
        select.className = "form-control"; 
        select.style.width = "100%";
        select.style.height = "48px"; 
        select.style.marginBottom = "10px";
        select.style.borderStyle = "solid";
        select.style.borderColor = borderColor;
        select.style.borderWidth = borderThickness;
        select.style.borderRadius = borderRadius;
        select.style.padding = "0 15px";
        select.style.outline = "none"; 

        // ---------------------------------

        const defaultOption = document.createElement('option');
        defaultOption.text = "اختر الولاية أو الجهة";
        defaultOption.value = "";
        select.appendChild(defaultOption);
        states.forEach(function(state) {
            const option = document.createElement('option');
            option.text = state;
            option.value = state;
            select.appendChild(option);
        });
        cityInput.style.display = 'none';
        cityInput.parentNode.insertBefore(select, cityInput);
        select.addEventListener('change', function() {
            cityInput.value = this.value;
            cityInput.dispatchEvent(new Event('input', { bubbles: true }));

        });
    }
});
</script>

أهمية هذا التعديل لتحسين محركات البحث (SEO) وتجربة المستخدم

قد تتساءل: ما علاقة كود في صفحة الدفع بـ SEO؟

الإجابة تكمن في مقاييس الأداء (User Signals). عندما يجد العميل سهولة في إتمام الطلب، تنخفض نسبة “ارتداد السلة” (Cart Abandonment). جوجل والمحركات الأخرى تراقب سلوك المستخدم بشكل غير مباشر من خلال سرعة الموقع وتوافقية واجهة المستخدم.

القواعد الذهبية لصفحة دفع ناجحة:

• البساطة: لا تطلب معلومات لا تحتاجها.
• الوضوح: القوائم المنسدلة تمنع تشتت العميل في التفكير “ماذا أكتب هنا؟”.
• السرعة: الكود الذي نستخدمه خفيف جداً ولا يؤثر على سرعة تحميل الصفحة.

نصائح إضافية لزيادة المبيعات في متجر يوكان

بعد إضافة قائمة الولايات، إليك خطوات أخرى لتعزيز صفحة Checkout:

1. تقليل الحقول: في إعدادات يوكان، قم بإخفاء الحقول غير الضرورية مثل “العنوان 2” أو “الرمز البريدي” إذا لم يكن ضرورياً في بلدك.
2. إضافة “Trust Badges”: ضع صوراً صغيرة لشركات الشحن الموثوقة أو شعار “الدفع عند الاستلام”.
3. التعديل اللغوي: تأكد من أن جميع الكلمات في صفحة الدفع مكتوبة بلغة عربية فصيحة وبسيطة.

الأسئلة الشائعة حول إضافة القائمة المنسدلة ليوكان

هل يؤثر هذا الكود على سرعة المتجر؟

لا، الكود مكتوب بلغة JavaScript نظيفة (Vanilla JS) ولا يعتمد على مكتبات خارجية مثل jQuery، مما يجعله ينفذ في أجزاء من الثانية.

هل يعمل الكود على جميع القوالب؟

نعم، طالما أن قالب يوكان يستخدم اسم الحقل القياسي city (وهو الافتراضي في المنصة)، فإن الكود سيتعرف عليه تلقائياً.

ماذا لو أردت إضافة مدن فرعية تحت كل جهة؟

هذا يتطلب كوداً أكثر تعقيداً (Conditional Logic). الكود الحالي يركز على المستوى الأول (الولايات/الجهات) وهو الأكثر طلباً لتنظيم عمليات الشحن الكبرى.

الخلاصة: خطوة بسيطة لنتائج كبيرة

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

تذكر دائماً أن النجاح في التجارة الإلكترونية يكمن في إزالة “العقبات” من طريق العميل، وهذا الكود هو أحد أفضل الطرق لإزالة عقبة إدخال البيانات يدوياً.