إنتقل إلى المحتوى الرئيسي

تجربة العميل مع الودجت

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

ما يراه العميل عند فتح صفحة المنتج​

أول ظهور للودجت​

حسب وضع العرض الذي اخترته (راجع أوضاع عرض الودجت):

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

حارس الإضافة إلى السلة​

⚠️ مهم: الودجت "يحرس" زر الإضافة إلى السلة

  • يمنع إضافة المنتج قبل تحميل الودجت بالكامل
  • يمنع إضافة المنتج إذا كانت هناك حقول مطلوبة غير مكتملة
  • يسمح بالإضافة فقط عندما يكون الودجت جاهزًا والحقول المطلوبة مكتملة

هذا يضمن عدم وصول طلبات غير مكتملة إلى نظامك.

رحلة العميل خطوة بخطوة​

الخطوة ١: مشاهدة الودجت​

يفتح العميل صفحة المنتج على متجرك. يرى إحدى هذه الحالات:

  • الودجت المباشر مع الحقول
  • زر "خصص منتجك"
  • زر يفتح النافذة المنبثقة

📸 Screenshot Needed

Dashboard Section: متجر سلة > صفحة المنتج > أول ظهور للودجت UI State: صفحة المنتج كما يراها العميل لأول مرة. الودجت المباشر ظاهر مع القيم الافتراضية: "الاسم على الكوب" فارغ (نص توضيحي: أدخل اسمك)، "لون البشرة" محدد افتراضيًا على "قمحي". What to Capture: صفحة المنتج الكاملة مع الودجت. RTL Note: RTL. Size: 800×700px

الخطوة ٢: إدخال النص​

العميل يبدأ بكتابة اسمه:

  1. ينقر على حقل "الاسم على الكوب"
  2. يكتب اسمه (مثلاً: "أحمد")
  3. فورًا — يظهر الاسم على معاينة الكوب

الخطوة ٣: اختيار الصور​

العميل يختار خيارًا من خيارات الصور:

  1. ينقر على صورة "داكن" في حقل "لون البشرة"
  2. فورًا — تتغير معاينة الكوب لتعكس لون البشرة المختار
  3. الخيار المحدد يظهر بإطار ملون

📸 Screenshot Needed

Dashboard Section: متجر سلة > صفحة المنتج > الودجت مع خيارات محددة UI State: الودجت بعد تفاعل العميل. "الاسم على الكوب": أحمد (مكتوب). "لون البشرة": داكن (محدد بإطار). المعاينة تظهر الكوب محدثًا. السعر تحدث (إذا كان هناك فرق). What to Capture: الودجت الممتلئ مع المعاينة المحدثة. RTL Note: RTL. Size: 800×700px

الخطوة ٤: المعاينة المباشرة​

طوال الوقت، المعاينة على يسار (أو يمين) الودجت تتحدث لحظيًا:

  • النص: يظهر في موضعه على المنتج
  • الصور: تظهر في الأهداف الديناميكية
  • الألوان: تطبق على الطبقات المرتبطة

الخطوة ٥: إضافة إلى السلة​

عندما يكتمل التخصيص:

  1. زر "أضف إلى السلة" يصبح نشطًا (إذا كانت الحقول المطلوبة مكتملة)
  2. يضغط العميل على الزر
  3. يتأخر قليلاً — الودجت يحضر ملفات الطباعة (إذا كانت مفعلة)
  4. يُضاف المنتج إلى السلة مع جميع خيارات التخصيص

📸 Screenshot Needed

Dashboard Section: متجر سلة > السلة > منتج مخصص مضاف UI State: سلة المشتريات تظهر "كوب أفاتار" مع تفاصيل: "الاسم: أحمد"، "لون البشرة: داكن". السعر النهائي. صورة مصغرة للكوب المخصص. What to Capture: المنتج المخصص في السلة. RTL Note: RTL. Size: 600×300px

تحديث السعر أثناء التخصيص​

إذا كان المنتج يستخدم ربط سلة (وليس ودجت فقط):

  • السعر في الودجت يتحدث فورًا عند تغيير الخيارات
  • إذا اختار العميل خيارًا يضيف ١٠ ر.س، يرى السعر يتغير من "٥٠ ر.س" إلى "٦٠ ر.س"
  • رسالة توضح: "السعر يشمل ١٠ ر.س إضافية للون الذهبي"

هذه الشفافية مهمة — العميل لا يتفاجأ بالسعر في السلة.

استمرارية الجلسة (Session Persistence)​

ماذا يحدث إذا تنقل العميل بين الصفحات​

  • داخل نفس الجلسة: اختيارات العميل تُحفظ مؤقتًا. إذا فتح صفحة المنتج، خرج، ثم عاد — اختياراته ما زالت موجودة
  • بعد إغلاق المتصفح: تختفي الاختيارات المؤقتة
  • بعد إضافة المنتج للسلة: الاختيارات تُحفظ مع السلة

هذا يمنع إحباط العميل إذا تنقل بين المنتجات أو الصفحات.

تجربة الجوال مقابل الحاسب​

الجوال​

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

الحاسب​

  • الودجت يظهر بتخطيط جانبي (المعاينة يسار/يمين، الحقول يمين/يسار)
  • مساحة أكبر للصور المصغرة
  • النوافذ المنبثقة في المنتصف

📸 Screenshot Needed

Dashboard Section: متجر سلة > صفحة المنتج > الودجت على الجوال UI State: نفس صفحة المنتج على شاشة جوال (375×812px). الودجت عمودي. الحقول كبيرة. المعاينة في الأعلى، الحقول أسفلها. What to Capture: تجربة الجوال الكاملة. RTL Note: RTL. Size: 375×700px

نصائح لتحسين تجربة العميل​

  1. القيم الافتراضية: عيّن قيمًا افتراضية للحقول المطلوبة — تسهل على العميل
  2. النصوص التوضيحية: استخدمها لتوجيه العميل — "أدخل اسمك" أفضل من حقل فارغ
  3. لا تفرض التخصيص: إلا إذا كان ضروريًا (الوضع الحصري)
  4. اختبر على جوال حقيقي: ليس فقط في المعاينة
  5. سرعة التحميل: الودجت يجب أن يظهر بسرعة — راجع الأداء والحدود
  6. وضح التسعير: العميل يجب أن يعرف فورًا إذا كان اختياره يغير السعر

مقالات ذات صلة​

آخر تحديث: 2026-05-17

آخر تحديث في