الصفحة الرئيسية ليست مجرد واجهة تجميلية لمتجرك 🏬

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

هنا تتجلى الأهمية المحورية لتصميم الصفحة الرئيسية (Homepage). فالصورة الرئيسية أو البانر الإعلاني، وأيقونات الأقسام، وطريقة عرض المنتجات، وأزرار التواصل التفاعلية ليست مجرد عناصر جمالية تزيينية، بل هي ركائز جوهرية تبني تجربة المستخدم الكاملة (User Experience – UX) وتتحكم بمعدلات التحويل التجاري (CRO).

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

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

أهمية تدعيم الصفحة الرئيسية بالصور والأيقونات الاحترافية 💎

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

دور الصور في إبراز المنتجات وتحريك الرغبة الشرائية 🖼️

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

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

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

كيف تختصر الأيقونات مسافات التصفح للعميل؟ 🧭

الأيقونات (Icons) هي لغة بصرية كونية تختزل الأفكار المعقدة في رموز فورية الإدراك دون إجبار الزائر على قراءة أسطر نصية طويلة. يستوعب العقل البشري الرموز أسرع بآلاف المرات من النصوص المكتوبة، مما يقلل الجهد الإدراكي للزائر ويسرع قراراته.

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

• تصنيفات المنتجات وأقسام الكتالوج لتسريع الفرز.
• شروط الشحن ومناطق التغطية الجغرافية ومواعيد الوصول.
• خيارات الدفع عند الاستلام (COD) والدفع بالبطاقات المصرفية.
• سياسات الضمان والاستبدال والاسترجاع المرنة.
• أزرار الدعم الفني الفوري ومحادثة خدمة العملاء.

العلاقة العضوية بين التصميم البصري وتجربة المستخدم UX 🧠

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

أنواع العناصر البصرية التي تتطلبها واجهة متجرك 🎨

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

البانر الرئيسي البارز Hero Banner 🎯

هو المساحة البصرية الاستراتيجية الأولى التي تقع عليها عين العميل في الجزء العلوي من الصفحة فوق خط التمرير (Above the Fold). يحدد هذا البانر نبرة المتجر ويعلن عن أقوى الصفقات الحالية مثل:

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

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

صور تصنيفات وأقسام المنتجات 📂

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

صور بطاقات المنتجات والعروض الترويجية 📦

يجب أن تنقل صورة المنتج أبعاده وخاماته الواقعية بأمانة فائقة للحد من معدلات الإرجاع. راعِ تطبيق المعايير الاحترافية التالية:

• إبراز تفاصيل خامات المنتج وملمسه بحيادية تامة.
• تثبيت خلفية صور المنتجات (يُفضل اللون الأبيض النقي أو الرمادي الفاتح جداً).
• الابتعاد التام عن الصور منخفضة الدقة أو التي يظهر فيها تشويش أو بكسلة.
• الامتناع عن وضع ملصقات وعبارات تسويقية تملأ واجهة صورة المنتج وتشوش عليها.
• إتاحة صور متعددة من زوايا مختلفة داخل صفحة المنتج الفرعية مع معاينة سريعة.

شريط أيقونات الخدمات ومحفزات الثقة 🛡️

يُستحسن وضع شريط أفقي منظم ومكون من أيقونات أنيقة وموجزة مباشرة أسفل البانر الرئيسي لطمأنة العميل حول بنود التوصيل والتعامل التجاري:

دليل إضافة صور البانر للواجهة وضبط مواضعها 🛠️

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

الوصول إلى لوحة إدارة القالب وتخصيص الواجهة 🖥️

سجل دخولك إلى لوحة تحكم WordPress، وانتقل مباشرة إلى محرر التصميم المعتمد في متجرك. يتوقف المسار على القالب والإضافات النشطة لديك:

• محرر المظهر القياسي: المظهر (Appearance) ← تخصيص (Customize).
• محرر القوالب الحديث الكامل: المظهر (Appearance) ← محرر الموقع (Site Editor).
• منشئات الصفحات البصرية: التحرير المباشر بواسطة Elementor أو WPBakery.
• المنصات السحابية: محرر الواجهة المدمج في منصات المتاجر الأخرى مثل Toggaar أو غيرها من بيئات المتاجر الإلكترونية العربية.

تحديد التموضع المنطقي للبانر في تسلسل الصفحة 📐

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

1. ترويسة الموقع العلوية: الشعار، شريط البحث السريع، وسلة المشتريات.
2. البانر الرئيسي العريض (Hero Section) الحامل للعرض الترويجي الأساسي.
3. شريط أيقونات الثقة والخدمات السريعة (الشحن، الضمان، السداد).
4. شبكة تصنيفات المنتجات لتسهيل التوجيه.
5. قسم المنتجات الأكثر مبيعاً أو العروض الأكثر جذباً.
6. بانر إعلاني وسيط أو مراجعات العملاء وتجاربهم السابقة.
7. أزرار وروابط التواصل وخدمة العملاء وخاتمة المتجر (Footer).

رفع ملف البانر ومعايرة خواص التغطية (Cover vs Contain) 🖼️

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

• خاصية التغطية Cover: تجعل الصورة تتمدد لتغطي أبعاد الصندوق بالكامل. هذه الخاصية ممتازة لمنع الفراغات الجانبية، لكنها قد تقص أطراف الصورة في الشاشات الطولية.
• خاصية الاحتواء Contain: تجبر المتصفح على إظهار أبعاد الصورة كاملة دون قص، إلا أنها قد تخلف هوامش ومساحات فارغة ملونة على جانبي البانر.

صياغة النصوص التوجيهية وتفعيل زر الدعوة للإجراء (CTA) 🎯

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

تقييم استخدام البانرات المنزلقة المتعددة (Sliders) 🎠

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

• عدم تجاوز 3 شرائح كحد أقصى مطلق في الواجهة.
• توفير أزرار وأسهم للتنقل اليدوي وإيقاف الحركة التلقائية عند وضع المؤشر على الشريحة.
• ضبط سرعة الانتقال لتكون متوازنة تسمح بقراءة النص كاملاً دون مباغتة القارئ.
• تجنب تشغيل مؤثرات حركية برمجية ثلاثية الأبعاد ترهق معالج الهاتف المحمول.

المقاسات والمعايير الحسابية لأبعاد صور المتاجر 📏

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

معضلة الصورة الواحدة لشاشات الكمبيوتر والموبايل 📱💻

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

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

المقارنة التقنية بين صيغ الصور (WebP, SVG, PNG, JPG) ⚙️

يعد اختيار امتداد الملف المناسب العامل الحاسم في تحديد حجم البيانات المنقولة عبر الشبكة، وجودة العرض على شاشات Retina فائقة الكثافة، ومدى استجابة المتجر للتحميل السريع.

إدارة الأيقونات وتوحيد النمط البصري للواجهة 🎨

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

اختيار الرموز المعبرة ذات الدلالة الفورية 🛒

انتقِ الأيقونات ذات الدلالات البصرية الراسخة في الأذهان لتفادي أي التباس لدى المتسوق:

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

قواعد توحيد الطابع البصري للأيقونات 🖌️

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

• حجم موحد ومدروس: ثبت أبعاد صناديق الأيقونات (مثل 24×24 أو 32×32 بكسل) لكل فئة وظيفية.
• سماكة الخطوط (Stroke Width): تأكد من تساوي سماكة الخطوط المرسومة في جميع أيقونات الشريط الواحد.
• الزوايا والانحناءات: حافظ على تطابق شكل الأركان (إما دائرية ناعمة Rounded بالكامل أو حادة Sharp بالكامل).
• لوحة الألوان: اعتمد ألواناً مشتقة من الهوية البصرية الرئيسية للمتجر وتجنب التلوين العشوائي.
• المسافات الفاصلة (Padding & Margin): اضبط الهوامش المحيطة بكل أيقونة بدقة لتبدو مصفوفة بتوازن معماري أنيق.

تحسين تجربة تصفح المتجر على الهواتف الذكية (Mobile UX) 📱

تشير الإحصائيات الميدانية لحركة التجارة الإلكترونية إلى أن أكثر من 75% من طلبات الشراء في المنطقة العربية تتم عبر الهواتف المحمولة. لذا، فإن الاكتفاء بمظهر المتجر على شاشة الحاسوب المكتبي هو مغامرة تؤدي لخسارة مبيعات مؤكدة، ما يفرض تبني نهج (Mobile-First) في كافة تفاصيل الواجهة.

إعادة ترتيب العناصر حسب الأولوية الذهنية للعميل 🪜

نظراً لمحدودية مساحة الشاشة الرأسية للموبايل، يجب إعادة توزيع المكونات بذكاء:

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

مراعاة مناطق النقر الطبيعية لإبهام اليد (Touch Targets) 👆

لا تجعل الروابط والأيقونات بالغة الصغر بحيث يتعذر النقر عليها بدقة بأصبع اليد. توصي معايير Google بتوفير مساحة نقر لا تقل عن 48×48 بكسل لكل زر أو أيقونة تفاعلية.

احرص تماماً على ترك مسافة آمنة بين زر واتساب العائم وزر «إضافة إلى السلة» وزر إتمام الطلب، حتى لا يتفاجأ العميل بفتح تطبيق واتساب رغماً عنه وهو يحاول النقر على سلة المشتريات.

التخلص من مصادر التشتت والنوافذ المنبثقة المتزامنة 🚫

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

تسريع أداء المتجر وضبط مؤشرات Core Web Vitals ⚡

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

خطة العمل التطبيقية لمعالجة وتحسين الوسائط 🚀

لضمان وصول متجرك إلى أعلى معدلات السرعة، طبق الإجراءات التقنية المعتمدة التالية:

قياس المؤشرات الأساسية عبر Google PageSpeed Insights 📊

استخدم الأداة الرسمية من Google لمعاينة أداء متجرك ومعالجة القصور البرمجي، وركز على المؤشرات الحيوية الثلاثة الآتية:

إضافة أيقونة واتساب العائمة وضبط معايير التشغيل 💬

بعد ضبط البنية البصرية للواجهة، نصل إلى حلقة الوصل الحيوية مع العميل: أيقونة واتساب العائمة (Floating WhatsApp Button)، التي تتيح للمتسوق فتح حوار مباشر مع متجرك بلمسة زر واحدة من أي صفحة أثناء تصفحه للمنتجات.

الفرق الجوهري بين الزر الموضعي والزر العائم المستمر 🔘

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

توليد رابط المحادثة المباشرة (WhatsApp Click to Chat) 🔗

تعتمد الآلية الأساسية لمحادثة واتساب الفورية على بروتوكول الرابط القياسي wa.me. يتطلب هذا الرابط كتابة رقم هاتفك بالصيغة الدولية المعتمدة دون أي أصفار في البداية ودون علامة (+) أو مسافات أو فواصل.

https://wa.me/201030741766

لإضفاء طابع احترافي، يمكنك إضافة معامل نصي مشفر (URL-Encoded Text Parameter) بحيث تظهر رسالة افتتاحية مقترحة في صندوق كتابة العميل بمجرد نقره على الزر، مما يسهل عليه بدء المحادثة:

https://wa.me/201030741766?text=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7%D8%8C%20%D8%A3%D8%B1%D9%8A%D8%AF%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%81%D8%B3%D8%A7%D8%B1%20%D8%B9%D9%86%20%D8%A3%D8%AD%D8%AF%20%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA

المقارنة التقنية بين الربط المباشر وأتمتة واتساب عبر API 🔄

تختلط المفاهيم لدى كثير من التجار بين وضع رابط واتساب عادي على المتجر وبين ربط المتجر بنظام أتمتة عبر واجهات البرمجة التطبيقية (API) وآليات الاستماع للأحداث (Webhooks). يوضح الجدول التالي الفوارق التشغيلية والبرمجية بين النموذجين:

ما هو الـ API وما هو الـ Webhook تقنياً؟ 🧩

واجهة برمجة التطبيقات (API): هي جسر برمجي يسمح لمتجرك بالتواصل مع خوادم Whats360 لتنفيذ أمر محدد (مثل: “أرسل رسالة نصية بالصيغة X إلى رقم الهاتف Y عبر الجهاز المتصل Z”).

خطاف الويب (Webhook): هو آلية استماع ورصد لحظية ترسل إشعاراً آلياً وفورياً حاملاً تفاصيل الحدث إلى رابط مخصص بمجرد وقوعه في المتجر (مثل: “قام العميل أحمد بإنشاء طلب جديد رقم #1234 بقيمة 500 ريال”).

بالتالي، فإن Webhook ينقل تفاصيل الحدث وبياناته فور وقوعه، بينما يقوم الـ API بتنفيذ عملية إرسال رسالة الواتساب إلى هاتف العميل استجابة لهذا الحدث، مشكّلين معاً منظومة الأتمتة الكاملة.

ربط WooCommerce مع Whats360 لإرسال إشعارات الطلبات تلقائياً 🤖

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

المخطط المعماري لدورة حياة التكامل المؤتمت 🔄

يوضح المخطط التالي تدفق البيانات منذ لحظة اعتماد الطلب وحتى وصول التنبيه إلى هاتف العميل:

        WooCommerce Store (متجر ووكومرس)
                     │
                     ▼
             تغير حالة الطلب
      (Order Created / Status Changed)
                     │
                     ▼
          آلية الرصد والالتقاط
       (Webhook Trigger / Hook Action)
                     │
                     ▼
          معالجة وتصفية البيانات
        (JSON Parsing & Sanitization)
                     │
                     ▼
          توليد نص الرسالة المخصصة
      (Template & Dynamic Variables)
                     │
                     ▼
             طلب الإرسال البرمجي
         Whats360 API (POST Request)
                     │
                     ▼
          شبكة وخوادم واتساب الرسمية
                     │
                     ▼
      هاتف العميل: استلام الإشعار فوراً 📱

نماذج الرسائل المخصصة لكل مرحلة تشغيلية ✉️

يمكنك تخصيص قالب رسالة محدد لكل تغير في حالة الطلب داخل WooCommerce، ومن أبرز الحالات التي يفضل أتمتتها:

الفرق البرمجي بين تحديث الطلب وتغير الحالة الفعلية ⚠️

من الأخطاء البرمجية الشائعة برمجة الكود ليعمل مع كل إشعار تحديث للطلب order.updated. في WooCommerce، يتم إطلاق هذا الحدث عند أي تعديل بسيط في الطلب (مثل إضافة ملاحظة إدارية داخلية، تغيير عنوان فرعي، أو تعديل بسيط في السعر) دون أن تتغير حالة الطلب الفعلية.

إذا لم يتحقق الكود من الحالة السابقة للطلب ومقارنتها بالحالة الجديدة، فقد يتلقى العميل 5 رسائل متطابقة خلال دقائق معدودة لمجرد أن الموظف أضاف ملاحظات في لوحة الإدارة! لذا، يجب قصر الإرسال على تغير الحالة فقط (مثل التحول من pending إلى processing).

دليل إعداد تكامل WooCommerce مع Whats360 خطوة بخطوة ⚙️

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

تحميل ملف التكوين القياسي (Whats360 Pro) 📥

قم بتنزيل ملف الإعداد التكاملي واحتفظ به في مجلد آمن:

تحميل ملف Whats360 Pro Configuration

قبل تطبيق أي إعداد، تأكد من إجراء فحص وقائي للمحتوى والتأكد من ملاءمته لإصدار WordPress وWooCommerce العامل في بيئتك البرمجية.

تجهيز بيئة العمل وإنشاء نسخة احتياطية 🗄️

تأكد من تفعيل الإضافات الأساسية وتحديث بيئة الخادم قبل المتابعة:

• استقرار نسخة WordPress وتحديث إضافة WooCommerce إلى أحدث إصدار مستقر.
• أخذ نسخة احتياطية كاملة (قاعدة البيانات والملفات) لتفادي أي توقف مفاجئ.
• التحقق من عدم وجود إضافات واتساب سابقة تسبب تضارباً في اعتراض هوكات الطلبات (Order Action Hooks).
• يُفضل دائماً تجربة الإعداد على بيئة تجريبية (Staging Site) قبل النشر في المتجر الحي.

تثبيت الكود التكاملي باستخدام إضافة Code Snippets 💻

يتم دمج كود المعالجة والربط في موقعك من خلال إضافة Code Snippets لتجنب تعديل ملف functions.php مباشرة، مما يحمي التعديلات من الضياع عند تحديث القالب.

يوضح الكود التالي البنية البرمجية النموذجية للاستماع لتغير حالة الطلب وإرسال التنبيه عبر واجهة Whats360:

add_action('woocommerce_order_status_changed', 'whats360_send_order_status_notification', 10, 4);

function whats360_send_order_status_notification($order_id, $old_status, $new_status, $order) {
    // التحقق من وجود الطلب والبيانات الأساسية
    if (!$order) {
        return;
    }

    // استخراج وتنسيق رقم هاتف العميل بالصيغة الدولية المعتمدة
    $phone = $order->get_billing_phone();
    $phone = preg_replace('/[^0-9]/', '', $phone);
    
    // تصحيح مفتاح الدولة وإزالة الأصفار البادئة
    if (substr($phone, 0, 1) === '0') {
        $phone = '20' . substr($phone, 1); // تعديل بادئة الدولة حسب الحاجة
    }
    
    $customer_name = $order->get_billing_first_name();
    $order_total   = $order->get_total();

    // صياغة الرسالة بحسب الحالة الجديدة
    $message = '';
    switch ($new_status) {
        case 'processing':
            $message = "مرحباً {$customer_name}، تم تأكيد طلبك #{$order_id} بإجمالي {$order_total} وهو قيد التجهيز الآن.";
            break;
        case 'completed':
            $message = "عزيزنا {$customer_name}، تم إتمام وشحن طلبك #{$order_id} بنجاح. شكراً لثقتك بنا!";
            break;
        case 'cancelled':
            $message = "نحيطك علماً يا {$customer_name} بأنه تم إلغاء طلبك #{$order_id}. تواصل معنا إذا كان لديك أي استفسار.";
            break;
        default:
            return; // تجاهل الحالات غير المخصصة
    }

    // إعداد معلمات الاتصال بالـ API
    $api_token   = 'WHATS360_API_TOKEN'; // مفتاح الوصول الخاص بحسابك
    $instance_id = 'DEVICE_INSTANCE_ID'; // معرف جهاز الواتساب النشط
    $target_jid  = $phone . '@s.whatsapp.net';

    $endpoint = 'https://whats360.live/api/v1/send-text';
    
    $request_url = add_query_arg(array(
        'token'       => $api_token,
        'instance_id' => $instance_id,
        'jid'         => $target_jid,
        'msg'         => $message
    ), $endpoint);

    // تنفيذ طلب الإرسال بطريقة آمنة
    $response = wp_remote_get($request_url, array('timeout' => 15));

    if (is_wp_error($response)) {
        error_log('Whats360 Notification Error: ' . $response->get_error_message());
    }
}

ضبط المتغيرات ومفاتيح الأمان والرسائل 🔑

بعد لصق الكود وتفعيله في Code Snippets، عدّل المتغيرات المخصصة التالية بدقة:

• استبدل WHATS360_API_TOKEN بالرمز الحقيقي المستخرج من تبويب (المطورين / API) في لوحة Whats360.
• استبدل DEVICE_INSTANCE_ID بالمعرف المميز لجهاز الواتساب المتصل في حسابك.
• راجع قواعد صياغة رقم الهاتف لضمان ملاءمتها لكافة أرقام الهواتف داخل دولتك ودول عملائك.
• احفظ المفاتيح في مكان آمن ولا تنشرها في مستودعات عامة أو ملفات مكشوفة.

اختبار دورة الطلب وتأكيد استلام الإشعار 🧪

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

1. قم بتغيير حالة الطلب من لوحة تحكم WooCommerce إلى «قيد المعالجة Processing».
2. تحقق من سجل أخطاء الخادم للتأكد من عدم وجود رسائل تعطل أو أخطاء استجابة.
3. راقب هاتفك الشخصي للتأكد من وصول رسالة الواتساب بالصيغة المحددة واسمك ورقم الطلب.
4. كرر الاختبار بتغيير الحالة إلى «مكتمل Completed» و«ملغي Cancelled» للتأكد من تغطية كافة الحالات.

معالجة أخطاء التكامل ومنع تكرار الرسائل للعميل 🛡️

من أهم متطلبات أنظمة الإشعارات التجارية الموثوقة تفادي إرسال الرسالة ذاتها عدة مرات للعميل بسبب تكرار إشارات Webhook أو إعادة المحاولة عند بطء الاستجابة، إذ يؤدي ذلك إلى استياء المتسوق وربما حظر رقم المتجر.

آلية منع التكرار (Idempotency Key Architecture) 🔒

لمنع إرسال الإشعار أكثر من مرة لنفس الحالة، اعتمد آلية فحص السجل السابق عبر حفظ مفتاح منطقي مركب في بيانات الطلب (Order Meta Data). يتكون هذا المفتاح من:

Order_ID + "_" + New_Status

قبل تنفيذ طلب الإرسال إلى الـ API، يتحقق الكود مما إذا كان هذا المفتاح مسجلاً مسبقاً في بيانات الطلب؛ فإذا وجده، يوقف العملية فوراً. وإذا لم يجده، ينفذ الإرسال ويسجل المفتاح في الحال لمنع أي تكرار لاحق.

استكشاف أخطاء واجهة البرمجة ومعالجتها (Error Codes) 🔍

عندما يفشل وصول الرسالة، توفر لوحة مطوري Whats360 إشارات تشخيصية محددة تساعدك في تحديد السبب بدقة:

تأمين اتصالات Webhooks بتوقيع HMAC-SHA256 🔐

إذا كنت تستقبل بيانات من المتجر عبر Webhook خارجي مخصص، فتحقق دائماً من توقيع البيانات عبر الترويسة القياسية (Signature Header). يتيح توقيع البيانات بخوارزمية HMAC-SHA256 التأكد من أن حزم البيانات الواردة مرسلة بالفعل من متجرك الإلكتروني ولم تتعرض للتعديل أو التزييف أثناء انتقالها عبر الشبكة.

كيف تختار الحل الأمثل والمناسب لاحتياجات متجرك؟ 🧭

ليس كل متجر بحاجة فورية إلى بنية أتمتة معقدة من اليوم الأول؛ إذ يعتمد الحل الأنسب على حجم مبيعاتك اليومية، عدد موظفي خدمة العملاء، وميزانية التشغيل المتاحة لديك:

قائمة المراجعة والتدقيق النهائي للواجهة والأتمتة ✅

قبل الإعلان عن إطلاق التحديثات لجمهور المتجر، استخدم قائمة التدقيق الفنية التالية للتأكد من اكتمال كافة الجوانب:

مكتبة الفيديو الإرشادية لتطوير تجربة العملاء 🎬

لتوسيع إمكانات متجرك والاستفادة من خصائص الوسائط والبوتات وإدارة المحادثات الاحترافية، إليك مجموعة شروحات مرئية تفصيلية تغطي مختلف جوانب المنصة:

استعراض قائمة الشروحات التعليمية الكاملة على YouTube

الأسئلة الشائعة حول الواجهة وأتمتة واتساب ❓

إليك إجابات شاملة ومباشرة عن أبرز الأسئلة التقنية والتنظيمية المتكررة لدى التجار وأصحاب المتاجر:

الخلاصة: بناء متجر متكامل من الزيارة الأولى حتى ما بعد البيع 🎯

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

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

<?php
// استقبال محتوى الطلب الخام وترويسة التوقيع من WooCommerce
$payload   = file_get_contents('php://input');
$signature = isset($_SERVER['HTTP_X_WC_WEBHOOK_SIGNATURE']) ? $_SERVER['HTTP_X_WC_WEBHOOK_SIGNATURE'] : '';

// المفتاح السري الذي تم تعيينه في إعدادات Webhook داخل المتجر
$secret_key = 'YOUR_SHARED_SECRET_KEY';

// توليد التوقيع المتوقع باستخدام خوارزمية HMAC-SHA256
$calculated_signature = base64_encode(hash_hmac('sha256', $payload, $secret_key, true));

// التحقق من تطابق التوقيع بدقة وبطريقة تقاوم هجمات التوقيت
if (!hash_equals($calculated_signature, $signature)) {
    http_response_code(401);
    die('Unauthorized Request: Signature Verification Failed');
}

// بعد تأكيد المصدر: فك تشفير البيانات ومعالجة تفاصيل الطلب
$data = json_decode($payload, true);
$order_id = $data['id'];
$status   = $data['status'];
$phone    = $data['billing']['phone'];

// استكمال تمرير البيانات لمعالج إرسال Whats360 API
?>

{
  "id": 10452,
  "status": "processing",
  "currency": "SAR",
  "total": "450.00",
  "billing": {
    "first_name": "سعود",
    "last_name": "العتيبي",
    "phone": "+966501234567",
    "city": "الرياض"
  },
  "shipping": {
    "first_name": "سعود",
    "city": "الرياض"
  },
  "line_items": [
    {
      "id": 142,
      "name": "سماعة رأس لاسلكية احترافية",
      "quantity": 1,
      "total": "450.00"
    }
  ]
}