عرض صورة حسب اختيار العميل

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

أين تجد هذا الإعداد؟

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

الخطوات

1. جهّز صورة واحدة لكل خيار بنفس الأبعاد والنقطة المرجعية.
2. افتح المنتج في الاستوديو.
3. اضغط + إضافة خيار واحد.
4. اختر خيارات صور.
5. اكتب تسمية الحقل مثل اختر تسريحة الشعر.
6. أضف وصفًا قصيرًا إذا كان الحقل يحتاج شرحًا.
7. أضف كل خيار:
   • الاسم الظاهر للعميل.
   • صورة الخيار في قائمة الاختيار.
   • الصورة أو الهدف المستخدم في المعاينة.
8. اختر طريقة العرض:
   • صور مصغرة.
   • أزرار.
   • قائمة منسدلة.
9. حدد خيارًا افتراضيًا إذا كان الحقل مطلوبًا.
10. اضبط موضع الهدف الديناميكي في المعاينة.
11. افتح معاينة العميل وبدّل كل الخيارات.
12. راجع القيمة التي تصل إلى الطلب.
13. احفظ وافحص ثم انشر.

قاعدة الصور المتوافقة

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

طريقة العرض

الطريقة	مناسبة عندما
صور مصغرة	يحتاج العميل رؤية الشكل
أزرار	الخيارات قليلة ونصوصها واضحة
قائمة منسدلة	الخيارات كثيرة والمساحة ضيقة

الفحص قبل الحفظ

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

أخطاء شائعة

الخطأ	النتيجة	الحل
صور بأبعاد مختلفة	يقفز العنصر عند التبديل	وحّد الأبعاد أو اضبط الهدف
صورة غير مربوطة	لا يتغير شيء في المعاينة	اربط القيمة بالهدف الديناميكي
تسمية لا تطابق الصورة	يربك العميل	أعد تسمية الخيار
ترتيب طبقة خاطئ	يختفي العنصر خلف جزء آخر	أعد ترتيب الطبقات

ربط عدة صور بخيار واحد

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

1. حدد الخيار الذي يحتاج أكثر من هدف.
2. افتح أهداف الصور الديناميكية.
3. أضف هدفًا لكل جزء يتغير.
4. اربط قيمة الخيار بالصورة الصحيحة في كل هدف.
5. اختبر اختيار القيمة ثم اختيار قيمة أخرى.
6. تأكد أن الصور القديمة تختفي ولا تبقى فوق التصميم.

استخدام خيار "لا"

إذا كانت الإضافة اختيارية، أضف قيمة مثل لا أو لا أريد إضافة شيء.

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

اختبار مكتبة كبيرة

إذا كان السؤال يحتوي 20 أو 30 خيارًا:

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

مثال عملي من متجر كراسة

مجموعة «إضافات الرأس | ذكر» تعمل بهذا النمط تمامًا: 13 خيارًا (قبعة مهندس أصفر، قبعة شيف، تاج، نظارات، قبعة طيار...) كلها صور بنفس الأبعاد والنقطة المرجعية، مربوطة بهدف ديناميكي واحد فوق رأس الشخصية. الخيار الأول «لا» يخفي الإضافة — فيبقى اختيار الإكسسوار حرًا لا إجباريًا، وتبدل المعاينة فورًا مع كل نقرة.