أضف لمسة احترافية لمتجرك: تفعيل الحركة الذكية للبلوكات عند التمرير في قالب جورنال

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

في هذا المقال، سنشرح كيف يمكنك تطبيق تأثير "الظهور عند التمرير" على جميع البلوكات (Modules) في متجرك الأوبن كارت الذي يستخدم قالب جورنال (Journal). هذا التأثير سيجعل البلوكات تظهر بحركة انسيابية من الأسفل للأعلى فقط عندما يصل إليها الزائر، مما يحسن من أداء الصفحة وتجربة المستخدم بشكل ملحوظ.

لماذا تحتاج هذا التأثير في متجرك؟

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

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

3. زيادة تفاعل العملاء: التأثيرات البصرية الدقيقة تشجع الزوار على البقاء لفترة أطول والتمرير لاستكشاف المزيد من المنتجات والمحتوى.

4. تركيز على المحتوى: بدلاً من تحميل كل العناصر دفعة واحدة، يتم عرض المحتوى تدريجياً، مما يساعد الزائر على التركيز على ما يظهر أمامه في الشاشة.

الكود السحري: الحل النهائي

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

<!-- AOS Animation Library -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aos.css">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
// انتظر حتى يتم تحميل الصفحة بالكامل مع الصور والملفات الأخرى
window.addEventListener('load', function() {
  
  // دالة بسيطة للتحقق مما إذا كان العنصر داخل شاشة العرض
  function isElementInViewport(el) {
    if (!el || typeof el.getBoundingClientRect !== 'function') {
        return false;
    }
    var rect = el.getBoundingClientRect();
    return rect.top < window.innerHeight && rect.bottom >= 0;
  }
  // تحديد كل البلوكات المستهدفة في قالب جورنال
  var journalModules = document.querySelectorAll('.module, .module-item, .fm-item, .product-grid-item, .post-item, .box-content, .journal-carousel .swiper-slide');
  
  // قم بالمرور على كل بلوك
  journalModules.forEach(function(module) {
    // طبق الحركة فقط إذا كان البلوك "خارج" الشاشة
    if (!isElementInViewport(module)) {
      module.setAttribute('data-aos', 'fade-up');
    }
  });
  // الآن، وبعد أن تم تحديد البلوكات المستهدفة فقط، قم بتشغيل المكتبة
  AOS.init({
    duration: 700,      // مدة الحركة بالمللي ثانية
    once: true,         // تشغيل الحركة مرة واحدة فقط
    offset: 80,         // المسافة من أسفل الشاشة لبدء الحركة
  });
  // إعادة تحديث AOS بعد أي تغييرات قد تحدث في الصفحة (اختياري لكن مفيد)
  setTimeout(function() { AOS.refresh(); }, 500);
});
</script>

كيفية التطبيق (خطوات بسيطة)

1. من لوحة تحكم أوبن كارت، اذهب إلى Journal > System > Settings > Custom Code.

2. ابحث عن قسم Custom Footer.

3. انسخ الكود أعلاه بالكامل والصقه في هذا القسم.

4. اضغط على حفظ (Save).

5. خطوة مهمة: اذهب إلى Journal > System > Cache واضغط على Clear Cache، ثم اضغط على أيقونة الترس الأزرق في لوحة التحكم الرئيسية لمسح كاش الساس (SASS).

وهكذا، أصبح متجرك الآن يتمتع بتأثير حركة احترافي يعزز من تجربة عملائك.