شرح تفعيل وإعداد إضافة Coupon Box (صندوق الكوبونات) وتخصيصها بالكامل

القسم الثاني:  General Settings

يتحكم هذا القسم في الإعدادات العامة وسلوك نافذة الكوبون.

• Enable / Disable
  تفعيل أو تعطيل ظهور نافذة الكوبون.
• Disable for logged-in users
  منع ظهور نافذة الكوبون للمستخدمين المسجلين دخولهم.
• Popup trigger – After initial time
  تحديد أن تظهر النافذة بعد مرور وقت معين من دخول الزائر.
• Initial time
  تحديد وقت عشوائي لظهور النافذة بين حد أدنى وحد أقصى (بالثواني)، مثل 3 إلى 10 ثوانٍ.
• When visitors close coupon box without subscribing
  في حالة إغلاق الزائر للنافذة بدون اشتراك، يتم إخفاؤها.
• Never reminder if click “No, thanks”
  عدم إعادة عرض نافذة الكوبون إذا ضغط الزائر على زر “No, thanks”.
• Subscription reminder if not subscribe
  تحديد المدة الزمنية لإعادة عرض النافذة في حال عدم الاشتراك (بالساعات).
• Subscription reminder if subscribe
  تحديد المدة الزمنية لإعادة عرض النموذج مرة أخرى بعد الاشتراك (مثل 360 يومًا).
• Email campaign
  ربط الاشتراك بحملة بريدية معينة.

بعد الانتهاء، نقوم بالضغط على Save لحفظ الإعدادات.

القسم الثالث:  Coupon Settings

نقوم في هذا القسم بإعداد الكوبون الذي يحصل عليه المستخدم بعد الاشتراك.

• Select coupon
  اختيار نوع الكوبون:
  • Unique coupon
  • Existing coupon
  • Custom
  • Do not use coupon
• Email restriction
  تقييد استخدام الكوبون بالبريد الإلكتروني.
• Description
  وصف الكوبون.
• Discount type
  تحديد نوع الخصم:
  • Percentage discount
  • Fixed cart discount
  • Fixed product discount
• Coupon code prefix
  تحديد بادئة كود الكوبون.
• Coupon amount
  قيمة الخصم.
• Allow free shipping
  تفعيل الشحن المجاني مع الكوبون.
• Expires after (days)
  مدة صلاحية الكوبون بالأيام.
• Minimum spend / Maximum spend
  الحد الأدنى والأقصى لقيمة الطلب.
• Individual use only
  السماح باستخدام الكوبون مرة واحدة فقط.
• Exclude sale items
  استبعاد المنتجات المخفضة.
• Products / Exclude products
  تحديد المنتجات المشمولة أو المستبعدة.
• Categories / Exclude categories
  تحديد التصنيفات المشمولة أو المستبعدة.
• Usage limit per coupon
  عدد مرات استخدام الكوبون.
• Usage limit per user
  عدد مرات الاستخدام لكل مستخدم.

القسم الرابع Email Settings:

يُستخدم هذا القسم لتخصيص رسالة البريد الإلكتروني التي يتم إرسالها بعد الاشتراك.

• Email subject
  عنوان رسالة البريد.
• Email heading
  العنوان الرئيسي داخل الرسالة.
• Email content
  محتوى الرسالة، مع إمكانية استخدام المتغيرات الديناميكية مثل:
  • {coupon_value}
  • {coupon_code}
  • {last_valid_date}
• Button “Shop now” URL
  رابط زر “Shop now”.
• Button color / Background color
  تحديد ألوان زر الشراء.
• Button font size
  حجم خط الزر.

القسم الخامس:  Email API

يُستخدم لربط الإضافة مع خدمات التسويق عبر البريد الإلكتروني في حال الحاجة إلى ذلك.

القسم السادس:  Google reCAPTCHA

يتم من خلاله تفعيل reCAPTCHA لحماية النموذج من الرسائل غير المرغوب فيها والاشتراكات الوهمية.

القسم السابع:  Assign Settings

نحدد في هذا القسم الصفحات التي تظهر فيها نافذة الكوبون.

• Home Page
  عرض نافذة الكوبون في الصفحة الرئيسية فقط.
• Assign Page
  التحكم المتقدم في الصفحات باستخدام WP Conditional Tags مثل:
  • ()is_cart صفحة السلة
  • ()is_checkout صفحة الدفع
  • () is_productصفحة المنتج
  • () is_shopصفحة المتجر

يمكن دمج أكثر من شرط باستخدام ||.

القسم الثامن:  Design

من خلال خيار Go to design now يتم الانتقال إلى صفحة تخصيص التصميم، حيث يمكن تعديل شكل النافذة و الألوان، الخطوط، والتخطيط.

إعدادات تصميم صندوق الكوبون (Coupon Box Settings):

1. : General Settings الإعدادات العامة

تتحكم هذه الإعدادات في السلوك الأساسي لصندوق الكوبون وطريقة ظهوره:

• Select view mode to edit
  لاختيار وضع المعاينة، سواء قبل الاشتراك أو بعده، حتى تتمكن من رؤية شكل الصندوق في كل حالة.
• Before subscribe
  لعرض شكل صندوق الكوبون قبل أن يقوم الزائر بالاشتراك.
• Show coupon after subscribing
  عند تفعيل هذا الخيار، يتم عرض كود الخصم مباشرة داخل الصندوق بعد الاشتراك، بالإضافة إلى إرساله عبر البريد الإلكتروني.
• Coupon Box Rounded Corner (px)
  لتحديد درجة استدارة زوايا صندوق الكوبون بالبكسل.
• Popup Display Type
  لتحديد نوع حركة ظهور النافذة المنبثقة، مثل Fade in أو Scale.
  
  
• Overlay color
  لتحديد لون الخلفية الشفافة التي تظهر خلف نافذة الكوبون.
• GDPR checkbox
  لإظهار مربع موافقة الزائر على الشروط والأحكام قبل الاشتراك.
• Set checkbox state “checked” as default
  لجعل مربع الموافقة مُفعّل بشكل افتراضي.
• GDPR message
  لإدخال نص رسالة الموافقة، مثل
  I agree with the term and condition
• Button “No, thanks”
  لتخصيص زر الرفض الذي يسمح للزائر بإغلاق الصندوق دون اشتراك.
• Button title
  لتحديد النص الظاهر على زر الرفض، مثل
  No, thanks
• Rounded corner (px)
  لتحديد درجة استدارة زوايا زر الرفض.
• Button title color
  لتحديد لون نص زر الرفض.
• Button background color
  لتحديد لون خلفية زر الرفض.
• Footer Text
  النص الذي يظهر أسفل الصندوق قبل الاشتراك، مثل
  We will never spam you, unsubscribe anytime
• Footer Text After Subscribing
  النص الذي يظهر بعد إتمام الاشتراك، مثل
  Thank you for subscription

2. : Button Close زر الإغلاق

تُستخدم هذه الإعدادات للتحكم في شكل ومكان زر إغلاق نافذة الكوبون:

• Icons
  لاختيار شكل أيقونة زر الإغلاق.
• Color
  لتحديد لون أيقونة الإغلاق.
• Background Color
  لتحديد لون خلفية زر الإغلاق.
• Size (px)
  لتحديد حجم أيقونة الإغلاق بالبكسل.
• Width (px)
  لتحديد عرض زر الإغلاق بالبكسل.
  ملاحظة: عند ضبط القيمة على 0 يتم تعطيل الزر، مع بقاء إمكانية الإغلاق بالضغط خارج النافذة أو باستخدام زر Esc.
• Rounded Corner (px)
  لتحديد درجة استدارة زوايا زر الإغلاق.
• Position-x (px)
  لتحديد الموضع الأفقي للزر داخل الصندوق.
• Position-y (px)
  لتحديد الموضع الرأسي للزر داخل الصندوق.

3. : Header رأس الصندوق

يتحكم هذا القسم في عنوان صندوق الكوبون:

• Header Title
  عنوان الرأس قبل الاشتراك، مثل
  WANT COUPON
• Header Title After Subscribe
  النص الذي يظهر بعد الاشتراك بنجاح، مثل
  Subscribed successfully!
• Header Color
  لتحديد لون نص العنوان.
• Header Background Color
  لتحديد لون خلفية رأس الصندوق.
• Header Font Size (px)
  لتحديد حجم خط العنوان، ويمكن إخفاؤه تمامًا بجعل القيمة 0.
• Header Space (px)
  لتحديد المسافة أسفل العنوان.

4. : Body محتوى الصندوق

يُستخدم هذا القسم للتحكم في تصميم ونصوص محتوى الصندوق:

• Body Text Color
  لتحديد لون النص داخل الصندوق.
• Body Background Color
  لتحديد لون خلفية الصندوق.
• Body Background Image
  لاختيار صورة كخلفية للصندوق.
• Body Background Image Repeat
  لتحديد تكرار صورة الخلفية أو إيقاف التكرار.
• Body Background Image Size
  لتحديد طريقة عرض الصورة، مثل Cover.
• Body Background Image Position
  لتحديد موضع الصورة داخل الخلفية.
• Message
  النص الذي يظهر قبل الاشتراك، مثل
  Subscribe now to get free discount coupon code
• Message After Subscribing
  النص الذي يظهر بعد الاشتراك بنجاح، مثل
  Congratulation! You have subscribed successfully
• Message Size (px)
  لتحديد حجم خط الرسالة.
• Message Text Align
  لتحديد محاذاة النص (يمين، يسار، أو Center).
• Message Color
  لتحديد لون نص الرسالة.

5. : Social Media وسائل التواصل الاجتماعي

يتيح هذا القسم إضافة أيقونات حساباتك الاجتماعية داخل صندوق الكوبون:

• Text Follow Social Network
  النص الذي يظهر قبل الأيقونات، مثل
  Follow Us
• Follow Us Text Color
  لتحديد لون نص المتابعة.
• Icons size (px)
  لتحديد حجم أيقونات التواصل الاجتماعي.
• When click on social icons
  لتحديد سلوك الضغط على الأيقونات، مثل فتح الرابط في تبويب جديد.
• User Names & URLs
  إدخال أسماء المستخدمين أو الروابط الخاصة بكل منصة مثل Facebook، Twitter، Instagram، LinkedIn، YouTube وغيرها.
• Icon Color
  لتحديد لون كل أيقونة بشكل منفصل حسب المنصة.

6. : Button Subscribe زر الاشتراك

إعدادات حقل البريد الإلكتروني وزر الاشتراك:

• Email Input Rounded Corner (px)
  لتحديد استدارة زوايا حقل إدخال البريد.
• Space between email field & button SUBSCRIBE
  لتحديد المسافة بين حقل البريد وزر الاشتراك.
• Button Title
  النص الظاهر على زر الاشتراك، مثل
  SUBSCRIBE
• Button Text Color
  لتحديد لون نص زر الاشتراك.
• Button Background Color
  لتحديد لون خلفية زر الاشتراك.
• Button “SUBSCRIBE” Rounded Corner (px)
  لتحديد درجة استدارة زوايا زر الاشتراك.

7. : Pop up Icons أيقونة إعادة فتح الصندوق

تُستخدم هذه الإعدادات لإظهار أيقونة صغيرة تعيد فتح صندوق الكوبون بعد إغلاقه:

• Coupon box icon
  لتفعيل أيقونة إعادة فتح صندوق القسيمة.
• Coupon box icon on mobile
  لإخفاء الأيقونة على أجهزة الجوال عند إلغاء التفعيل.
• Icon position
  لتحديد مكان الأيقونة على الشاشة مثل Bottom Right.
• Icons size (px)
  لتحديد حجم الأيقونة.
• Icon wrap rounded corner (px)
  لتحديد استدارة خلفية الأيقونة.
• Icon color
  لتحديد لون الأيقونة.
• Icon background color
  لتحديد لون خلفية الأيقونة.

8. : Custom CSS

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

من خلاله يمكنك:

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

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