شكل تجربة التخصيص
الودجت بضيوفه أو بهويتك أنت. هذا القسم يجعل تجربة التخصيص تظهر بألوان متجرك وأسلوبه: من اللون الأساسي وحجم عينات الألوان، إلى الأزرار والظلال والزوايا — وصولًا إلى تنسيق CSS مخصص لمن يريد تحكمًا كاملًا.
أين تجده؟ اضبط تجربة التخصيص ← شكل تجربة التخصيص.
1. إظهار فروقات السعر داخل الخيارات
خياران: إخفاء الفروقات / إظهار الفروقات. كما يشرحه التطبيق:
يعرض للعميل فرق السعر مقارنة بالخيار الحالي. الخيار المحدد لا يعرض سعرًا، والخيارات الأرخص تظهر بقيمة سالبة. لا يغيّر تسعير سلة المتجر.
| متى تُظهرها؟ | متى تخفيها؟ |
|---|---|
| فروق السعر منطقية وتشجع على الترقية (+5 ريال للأفضل) | فروق مربية مربكة أو سالبة تثير أسئلة |
| منتجات مقارنة (خامات، أحجام) | تجربة إهداء عاطفية لا تريد ذكر المال فيها |
راجع التفاصيل في إظهار فروقات السعر.
2. ألوان الهوية (6 منتقيات)
كل لون بحقل منتقي + قيمة HEX بجانبه:
| اللون | يضبط | مثال قيمة |
|---|---|---|
| اللون الأساسي | الأزرار المحددة والعناصر النشطة | #72daad |
| اللون الثانوي | عناصر الإسناد والتدرجات | #4167b9 |
| لون النص | نصوص الأسئلة والخيارات | #111827 |
| لون الحدود | إطارات البطاقات والحقول | #d1d5db |
| الخلفية | خلفية مساحة التخصيص | #ffffff |
| سطح البطاقات | خلفية بطاقات الخيارات | #ffffff |
انسخها من دليل هوية متجرك حتى يبدو الودجت قطعة من المتجر لا إضافة فوقه.
3. عناصر التحكم في الشكل
| الإعداد | خياراته | أثره |
|---|---|---|
| نوع الخط | اسم خط أو inherit (يرث خط المتجر) | inherit الأفضل للاتساق |
| نمط الزر | ممتلئ / حدود فقط / هادئ | قوة أزرار الاختيار والشراء |
| كثافة تجربة التخصيص | مضغوطة / متوازنة / واسعة | المسافات بين الأسئلة — مضغوطة لتجارب طويلة |
| كثافة بطاقات الخيارات | مضغوطة / متوازنة / واسعة | تباعد بطاقات الاختيارات نفسها |
| عمق الظل | بدون ظل / خفيف / متوسط / بارز | إبراز البطاقات عن الخلفية |
| استدارة الزوايا | رقم 0–40 | 0 = حواف حادة، 40 = دائري جدًا |
| سماكة الحدود | 0–8 بخطوة 0.5 | وضوح إطارات البطاقات |
| حجم السواتش | 12–44 بكسل | حجم دوائر عينات الألوان |
| عرض شبكة الصور | 64–180 بكسل | عرض مصغرات خيارات الصور |
كثافة متوازنة + ظل خفيف + استدارة 8–12 = مظهر عصري مريح لا يشتت. والمضغوطة تنقذ التجارب ذات 10+ أسئلة.
4. التنسيق المخصص: CSS وJavaScript
لمن يحتاج تحكمًا يتجاوز الخيارات الجاهزة — بطاقة متقدمة في آخر القسم:
تفعيل CSS مخصص + محرر CSS scoped
- قائمة غير مفعّل / مفعّل ثم محرر أكواد.
- الـ CSS يعمل داخل نطاق الودجت فقط (scoped) فلا يمس باقي صفحة المتجر.
- استهدف عناصر التخصيص بمعرفاتها مثل
[data-pc-field-container]وbutton[data-pc-field-id="..."]لتعديل شكل حقل بعينه: حدود أزرار المقاسات، حالة الاختيار[aria-pressed="true"]، منطقة رفع الملف، وشبكات الصور.
تفعيل JavaScript مخصص + محرر JS scoped
- قائمة تفعيل، ثم محرر — مع ملاحظة التطبيق: يعمل على هذا الحساب فقط بعد تحميل واجهة التخصيص.
- يوفر واجهة برمجية مصغرة داخل نطاق الودجت:
| الدالة | وظيفتها |
|---|---|
api.ready(callback) | ينفذ كودك بعد جاهزية الواجهة |
api.roots() | جذور عناصر التخصيص في الصفحة |
api.query(selector) | بحث عن عنصر داخل الودجت |
api.on(selector, event, handler) | ربط حدث (كتابة، فقدان تركيز...) |
api.observe(callback) | إعادة تنفيذ عند تغير الواجهة |
- مثال واقعي: كود يفحص عرض الاسم حرفًا حرفًا أثناء الكتابة ويقصّ ما يتجاوز مساحة الطباعة مع رسالة «الاسم طويل على مساحة الطباعة. تم اختصاره تلقائيًا».
الـ CSS الآمن نسبيًا ويرجع بحذف الكود. الـ JavaScript منطق تشغيلي: اختبره على الجوال وعلى متصفحات مختلفة، واحتفظ بنسخة من كودك خارج التطبيق، وتذكر أنه مرتبط بحسابك الحالي.
مثال من متجر كراسة
ضبط المتجر: لون أساسي أخضر فاتح #72daad يطابق هوية علامته، نمط زر هادئ، كثافة متوازنة، وسواتش 20px — ثم جسّر الفجوة الباقية بـ CSS مخصص جعل أزرار المقاسات حادة الزوايا ومنطقة الرفع ممرات منقطة عريضة. النتيجة: ودجت يبدو مصممًا خصيصًا للمتجر.
أسئلة سريعة
كيف أرجع الشكل الافتراضي؟
أعد القيم الافتراضية يدويًا، أو عطّل CSS/JavaScript المخصص — الأكواد لا تُحذف بتعطيلها فتعود بتفعيلها.
لماذا لا يظهر تغييري في المتجر؟
احفظ ثم انشر — شكل الودجت جزء من النسخة المنشورة — وامسح الكاش.
الفرق بين هذا القسم وتنسيق الودجت في قسم الودجت والمتجر؟
هذا القسم يضبط شكل تجربة التخصيص نفسها داخل الاستوديو، وتنسيقات الودجت الأوسع (الثيمات وموضع العرض في المتجر) في قسم الودجت والمتجر.
أدلة مرتبطة
هل أجاب هذا المقال على سؤالك؟