طريقة اضافة شريط المنتجات الأكثر مبيعا لمتجر يوكان

في عالم التجارة الإلكترونية سريع التطور، لم يعد امتلاك متجر إلكتروني كافياً لتحقيق النجاح. التحدي الحقيقي يكمن في كيفية لفت انتباه الزائر في الثواني الأولى من دخوله للمتجر، وتحويله من مجرد متصفح عابر إلى عميل فعلي. هنا تبرز أهمية الإضافات البرمجية الذكية (Scripts) التي تعزز تجربة المستخدم (UX) وتخلق نوعاً من الحركية والاحترافية.

من بين أقوى هذه الأدوات هو “شريط المنتجات الأكثر مبيعاً” أو ما يُعرف بالـ News Ticker. في هذا المقال، سنغوص في تفاصيل سكريبت حصري لمنصة يوكان (YouCan.shop)، ونشرح كيفية تركيبه وأهميته الاستراتيجية لنمو تجارتك

الجزء الأول: لماذا يحتاج متجرك على يوكان إلى شريط المنتجات الأكثر مبيعاً؟

قبل أن ننتقل إلى الجانب التقني، يجب أن نفهم “السيكولوجية” وراء هذه الإضافة. لماذا تضع المتاجر الكبرى مثل أمازون وعلي إكسبريس أشرطة متحركة للعروض والمنتجات؟

1. خلق شعور بالإلحاح و “فومو” (FOMO)

مصطلح FOMO أو (Fear Of Missing Out) يعني الخوف من ضياع الفرصة. عندما يرى الزائر شريطاً يتحرك أمام عينيه يحتوي على “حقيبة الظهر الذكية – الأكثر مبيعاً”، يتولد لديه انطباع تلقائي بأن هذا المنتج عليه طلب كبير، مما يحفزه على النقر واكتشاف السبب قبل نفاد الكمية.

2. الدليل الاجتماعي (Social Proof)

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

3. تحسين التنقل وتقليل معدل الارتداد (Bounce Rate)

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

الجزء الثاني: تحليل تقني للسكريبت (كيف يعمل؟)

السكريبت الذي سنستخدمه اليوم هو مزيج متناغم بين JavaScript لإدارة البيانات و CSS للجمالية والحركة. إليك شرح مبسط لمكوناته:

1. مصفوفة المنتجات (The Data Array)

يبدأ السكريبت بتعريف قائمة المنتجات التي تود عرضها. يمكنك تخصيص الأسماء والروابط بسهولة تامة.

JavaScript

const products = [
    { name: "حقيبة الظهر الذكية - الأكثر مبيعاً", link: "/products/1" },
    { name: "ساعة الترا الجديدة - عرض خاص", link: "/products/2" },
    ...
];

2. آلية العرض المستمر (Seamless Loop)

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

3. التوافق مع اللغة العربية (RTL Support)

تم تصميم السكريبت ليدعم الاتجاه من اليمين إلى اليسار (Right-to-Left)، وهو أمر حيوي جداً للمتاجر التي تستهدف السوق الخليجي والمغربي وبقية الدول العربية.

الجزء الثالث: كود السكريبت الكامل (جاهز للنسخ)

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

<script>
document.addEventListener("DOMContentLoaded", function() {
    
    const products = [
        { name: "حقيبة الظهر الذكية - الأكثر مبيعاً", link: "/products/1" },
        { name: "ساعة الترا الجديدة - عرض خاص", link: "/products/2" },
        { name: "سماعات بلوتوث عازلة للضوضاء", link: "/products/3" },
        { name: "توصيل مجاني لجميع الطلبات فوق 500 درهم", link: "#" }
    ];


    const tickerWrapper = document.createElement('div');
    tickerWrapper.id = 'seamless-ticker-container';
    
    let itemsHtml = products.map(p => `<a href="${p.link}" class="ticker-item"><span>🔥</span> ${p.name}</a>`).join('');
    
    tickerWrapper.innerHTML = `
        <div class="ticker-label">أحدث العروض</div>
        <div class="ticker-content">
            <div class="ticker-track" id="ticker-track">
                ${itemsHtml} ${itemsHtml} </div>
        </div>
    `;


    const styles = `
        <style>
            #seamless-ticker-container {
                width: 100%;
                height: 45px;
                background: #111;
                display: flex;
                align-items: center;
                overflow: hidden;
                direction: rtl;
                position: relative;
                z-index: 1000;
                border-bottom: 2px solid #e61e2a;
            }

            .ticker-label {
                background: #e61e2a;
                color: white;
                padding: 0 20px;
                height: 100%;
                display: flex;
                align-items: center;
                font-weight: bold;
                white-space: nowrap;
                z-index: 10;
                font-family: cairo;
                box-shadow: 10px 0 15px rgba(0,0,0,0.5);
            }

            .ticker-content {
                flex: 1;
                overflow: hidden;
                display: flex;
            }

            .ticker-track {
                display: flex;
                white-space: nowrap;
                will-change: transform;
                animation: scroll-loop 20s linear infinite; 
            }

            .ticker-item {
                color: #ffffff;
                text-decoration: none;
                padding: 0 40px;
                font-size: 15px;
                font-family: cairo;
                display: flex;
                align-items: center;
                transition: color 0.3s;
            }

            .ticker-item span { margin-left: 8px; }
            .ticker-item:hover { color: #ffcc00; }

            @keyframes scroll-loop {
                0% { transform: translateX(0); }
                100% { transform: translateX(50%); } 
            }

          
            [direction="rtl"] .ticker-track {
                animation: scroll-loop-rtl 25s linear infinite;
            }

            @keyframes scroll-loop-rtl {
                0% { transform: translateX(0); }
                100% { transform: translateX(50%); }
            }

           
            .ticker-track:hover {
                animation-play-state: paused;
            }
        </style>
    `;

   
    document.body.insertAdjacentHTML('afterbegin', styles);
    document.body.prepend(tickerWrapper);
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    
    const products = [
        { name: "حقيبة الظهر الذكية - الأكثر مبيعاً", link: "/products/1" },
        { name: "ساعة الترا الجديدة - عرض خاص", link: "/products/2" },
        { name: "سماعات بلوتوث عازلة للضوضاء", link: "/products/3" },
        { name: "توصيل مجاني لجميع الطلبات فوق 500 درهم", link: "#" }
    ];


    const tickerWrapper = document.createElement('div');
    tickerWrapper.id = 'seamless-ticker-container';
    
    let itemsHtml = products.map(p => `<a href="${p.link}" class="ticker-item"><span>🔥</span> ${p.name}</a>`).join('');
    
    tickerWrapper.innerHTML = `
        <div class="ticker-label">أحدث العروض</div>
        <div class="ticker-content">
            <div class="ticker-track" id="ticker-track">
                ${itemsHtml} ${itemsHtml} </div>
        </div>
    `;


    const styles = `
        <style>
            #seamless-ticker-container {
                width: 100%;
                height: 45px;
                background: #111;
                display: flex;
                align-items: center;
                overflow: hidden;
                direction: rtl;
                position: relative;
                z-index: 1000;
                border-bottom: 2px solid #e61e2a;
            }

            .ticker-label {
                background: #e61e2a;
                color: white;
                padding: 0 20px;
                height: 100%;
                display: flex;
                align-items: center;
                font-weight: bold;
                white-space: nowrap;
                z-index: 10;
                font-family: cairo;
                box-shadow: 10px 0 15px rgba(0,0,0,0.5);
            }

            .ticker-content {
                flex: 1;
                overflow: hidden;
                display: flex;
            }

            .ticker-track {
                display: flex;
                white-space: nowrap;
                will-change: transform;
                animation: scroll-loop 20s linear infinite; 
            }

            .ticker-item {
                color: #ffffff;
                text-decoration: none;
                padding: 0 40px;
                font-size: 15px;
                font-family: cairo;
                display: flex;
                align-items: center;
                transition: color 0.3s;
            }

            .ticker-item span { margin-left: 8px; }
            .ticker-item:hover { color: #ffcc00; }

            @keyframes scroll-loop {
                0% { transform: translateX(0); }
                100% { transform: translateX(50%); } 
            }

          
            [direction="rtl"] .ticker-track {
                animation: scroll-loop-rtl 25s linear infinite;
            }

            @keyframes scroll-loop-rtl {
                0% { transform: translateX(0); }
                100% { transform: translateX(50%); }
            }

           
            .ticker-track:hover {
                animation-play-state: paused;
            }
        </style>
    `;

   
    document.body.insertAdjacentHTML('afterbegin', styles);
    document.body.prepend(tickerWrapper);
});
</script>

الجزء الرابع: كيفية تركيب السكريبت على منصة يوكان (خطوة بخطوة)

منصة يوكان تتميز بمرونتها العالية في قبول الأكواد المخصصة. اتبع الخطوات التالية بدقة:

1. تسجيل الدخول: قم بالدخول إلى لوحة تحكم متجرك على YouCan.shop.
2. الإعدادات العامة: من القائمة الجانبية، اذهب إلى “المتجر أونلاين” (Online Store) ثم اختر “الإعدادات” (Configuration).
3. إضافة الكود: ابحث عن خانة “CSS/JavaScript المخصص” أو “Header Code”.
   • نصيحة: يفضل وضعه في خانة الـ Footer Code لضمان عدم تأثر سرعة تحميل الصفحة الأولى، أو في الـ Header إذا كنت تريده أن يظهر كأول عنصر فوراً.
4. اللصق والحفظ: قم بلصق الكود بالكامل كما هو، ثم اضغط على زر “حفظ” (Save).
5. المعاينة: اذهب لزيارة متجرك من المتصفح (يفضل وضع التصفح الخفي) لترى الشريط في أبهى حلة.

الجزء الخامس: نصائح احترافية لتخصيص السكريبت لعلامتك التجارية

لتحقيق أقصى استفادة من هذا السكريبت، لا تكتفِ بالإعدادات الافتراضية. إليك كيف تجعله “يتحدث” بلغة براندك:

1. تنسيق الألوان

في قسم الـ CSS داخل الكود، يمكنك تغيير لون الخلفية ولون الشريط الأحمر الافتراضي.

• لتغيير لون الخلفية: ابحث عن background: #111; وغير الكود السداسي (#111) إلى لون متجرك.
• لتغيير لون “أحدث العروض”: ابحث عن background: #e61e2a; وغيره للونك الأساسي.

2. سرعة الحركة

إذا وجدت أن الشريط يتحرك بسرعة كبيرة أو بطيئة:

• ابحث عن animation: scroll-loop-rtl 25s linear infinite;.
• قم بتغيير 25s؛ فزيادة الرقم تجعل الحركة أبطأ (أكثر راحة للعين)، وتقليل الرقم يجعلها أسرع (أكثر حيوية).

3. نوع الخط

السكريبت يستخدم خط Cairo بشكل افتراضي لأنه الخط المفضل للمتاجر العربية. إذا كان متجرك يستخدم خطاً مختلفاً، تأكد من تعديل font-family ليتناسب معه.

الجزء السادس: الأخطاء الشائعة وكيفية تجنبها

أثناء تركيب السكريبت، قد تواجه بعض التحديات. إليك الحلول السريعة:

• الشريط لا يظهر: تأكد من أنك نسخت الكود كاملاً بما في ذلك وسوم <script>.
• التداخل مع الهيدر: إذا كان متجرك يحتوي على هيدر مثبت (Sticky Header)، قد يغطي الشريطُ جزءاً منه. في هذه الحالة، يمكن تعديل قيمة z-index في الكود ليكون أقل من قيمة الهيدر.
• الروابط لا تعمل: تأكد من وضع المسار الصحيح للمنتج مثل /products/smart-watch بدلاً من الرابط الكامل إذا كان المنتج داخل نفس المتجر.

الجزء السابع: تحسين السيو (SEO) من خلال هذا السكريبت

قد تتساءل: هل يؤثر هذا السكريبت على أرشفة متجري؟ الإجابة هي نعم، وبشكل إيجابي إذا استخدمته بذكاء:

1. الكلمات المفتاحية: استخدم كلمات مفتاحية في أسماء المنتجات داخل الشريط. محركات البحث تستطيع قراءة النصوص داخل روابط الـ <a>.
2. الروابط الداخلية: الشريط يعتبر وسيلة ممتازة لتعزيز Internal Linking، مما يساعد زواحف جوجل على اكتشاف منتجاتك وتصنيفها بشكل أسرع.
3. تجربة المستخدم: جوجل تعطي أولوية للمواقع التي يقضي فيها المستخدم وقتاً أطول. الشريط الجذاب يقلل من خروج الزائر السريع، مما يعطي إشارة إيجابية لمحركات البحث.

الخلاصة: ابدأ اليوم في تحويل متجرك إلى احترافي

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

تذكر دائماً أن التجارة الإلكترونية هي علم وفن؛ العلم في جودة المنتج واللوجستيك، والفن في كيفية عرض ذلك المنتج للجمهور.

الأسئلة الشائعة حول سكريبت يوكان

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

ج: لا، السكريبت خفيف جداً ويعتمد على تقنيات CSS الحديثة التي لا تستهلك موارد الجهاز.

س: هل يمكنني إضافة أكثر من 4 منتجات؟

ج: طبعاً، يمكنك إضافة أي عدد تريده في مصفوفة products وسيتكيف الشريط تلقائياً.

س: هل يعمل هذا السكريبت على منصات أخرى مثل شوبيفاي؟

ج: نعم، الفكرة البرمجية واحدة، ولكن قد تحتاج لتعديل بسيط في طريقة “حقن” الكود حسب بيئة المنصة.