مرجع: Blue Ocean

توحيد المتجر، المحتوى والاشتراكات على منصة واحدة

Blue Ocean وحّدت منظومة أنظمتها اللي تطورت عبر السنين والمكوّنة من Shopware 5 وTYPO3 ضمن بنية Headless حديثة — باستخدام Shopware 6 وNuxt/Vue وStrapi، مع تحسينات للـ SEO والأداء والتتبع.

مرجع: Blue Ocean
  • العميل

    Blue Ocean

  • الموقع

    https://www.blue-ocean.de
  • النطاق

    التطويرالترحيلHeadless / الواجهة الأماميةCMS (Strapi)SEO تقنيالتتبعتحسين الأداء

المشكلة

جاءت Blue Ocean إلينا برغبة واضحة: تحديث مشهد الأنظمة الحالي وتبسيطه. في ذلك الوقت كان الحضور الرقمي مكوّنًا من عدة أنظمة منفصلة عن بعضها: متجر Shopware-5-Shop قديم للتجارة الإلكترونية، بالإضافة إلى TYPO3-Website مستقلة للمحتوى مثل المجلات، المقالات الصحفية، الاشتراكات، الملصقات، وعروض أخرى — موزعة على نطاقين مختلفين.

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

ومن الناحية التقنية أيضًا كان هناك مجال للتحسين: إعداد SEO-Setup لم يكن نظيفًا بشكل متّسق، والبيانات المنظمة (schema.org) كانت موجودة جزئيًا فقط، والأداء لم يكن مثاليًا، ولم تتمكن Core Web Vitals من استغلال كامل إمكاناتها. إضافة إلى ذلك، كان كل من Shopware 5 وTYPO3 على المدى البعيد لا يقدمان قاعدة مستقبلية آمنة — مع End of Life واقتراب نهاية الدعم.

بالتالي كانت نقطة البداية واضحة: محتوى قيّم جدًا، ونموذج قوي للمنتجات والاشتراكات — لكن موزّع على عدة أنظمة، مع تعقيد غير ضروري للمستخدمين وقابلية محدودة للتوسع تقنيًا.

قبل

الحل

بالتعاون مع فريق Blue Ocean اتخذنا قرارًا استراتيجيًا واضحًا: لازم نوحّد كل الأنظمة، نحدّثها، وننقلها لبنية مستقبلية آمنة.

الأساس كان ترحيل Shopware 5 إلى Shopware 6. وبنفس الوقت اخترنا عن قصد نهج Headless مع Shopware Frontends. الـ Backend يظل يعمل عبر Shopware، بينما تم تنفيذ الـ Frontend باستخدام Nuxt وVue — سريع، مرن، ومصمم حسب الحاجة.

جزء محوري كان دمج كل المحتوى. بدل موقع TYPO3 منفصل، صرنا نستخدم Headless-CMS باسم Strapi، ومن خلاله يمكن إدارة المجلات، المقالات الصحفية، بطاقات الملصقات ومحتويات أخرى بشكل منظم. وبفضل إعداد الـ Headless صار كل شيء يبدو متكاملًا — على نطاق واحد وبدون انقطاعات في تجربة المستخدم.

وبناءً على ذلك قمنا بـ:

  • تطوير تصميم جديد للصفحة الرئيسية، الفئات، صفحات المنتجات، الاشتراكات وCheckout
  • تطبيق الهوية البصرية، مفهوم الألوان وعالم العلامة التجارية الخاص بـ Blue Ocean بشكل متّسق
  • إعادة بناء مسار الاشتراك بالكامل
  • دمج نظام إعلانات داخلي لعملاء E2B (مساحات إعلانية على صفحات مختلفة)

بالإضافة إلى ذلك تم تنفيذ SEO التقني، وschema.org، وتحسينات الأداء، وإعداد Tracking كامل عبر Google Tag Manager — بما في ذلك Cookie-Consent وGoogle Analytics وShopware Analytics.

بعد

النتيجة

اليوم تمتلك Blue Ocean منصة حديثة ومركزية تربط المتجر والمحتوى والتسويق مع بعض بشكل مثالي.

الظهور الجديد يوفّر:

  • تبسيطًا واضحًا لرحلة العميل
  • كل المحتوى والمنتجات على نطاق واحد
  • أوقات تحميل أفضل وCore Web Vitals محسّنة
  • بنية SEO نظيفة تشمل schema.org بالكامل
  • نماذج اشتراك مرنة وإمكانيات إعلانية داخلية

بعد وقت قصير من إعادة الإطلاق بدأت تظهر في Google Search Console أول مؤشرات إيجابية: أخطاء تقنية أقل، ترتيب أفضل، وزيادة في عدد النقرات.

الأكثر قيمة هو الأساس التقني الجديد: بفضل نهج Headless مع Shopware وNuxt وVue وStrapi صارت Blue Ocean اليوم أكثر مرونة بكثير. المحتوى الجديد، الميزات أو نماذج الأعمال يمكن تنفيذها بسرعة أكبر — بدون قيود هياكل CMS أو المتاجر التقليدية.

كان التعاون على مدى عدة أشهر مكثفًا، منظمًا، وشراكيًا. لذلك يسعدنا أكثر أن نعرض اليوم متجرًا يشكّل أساسًا قويًا لنمو Blue Ocean القادم تقنيًا، بصريًا واستراتيجيًا.

تبغى أنت كمان تحقق أهدافك؟

إذًا احجز موعد أول معنا عشان نكتشف سوا إذا نقدر نساعدك في مشروعك!