الرأس والتذييل وعناصر الموقع

العناصر هي كل ما يلف واجهتك الأمامية — شريط الإعلان، والرأس (الشعار، التنقل، البحث، الحساب، السلة)، وشريط ترحيب B2B الذي يظهر تلقائيًا للمشترين من الشركات المسجل دخولهم، والتذييل. في Vertex، كل قطعة من هذه العناصر هي مدركة لـ B2B خارج الصندوق: تظهر المبدّلات والشارات وشارات المندوب تلقائيًا عند تسجيل دخول مشتري من شركة، وتتدهور بأناقة إلى تخطيط B2C مصقول عندما لا يكونون كذلك.

تخطيطان للرأس، يُطبَّقان تلقائيًا

ليس عليك الاختيار بين "رأس B2B" و"رأس B2C". يعرض Vertex رأسًا واحدًا — ويطبّق شريط ترحيب B2B الأزرق الكوبالتي فوقه في اللحظة التي يسجل فيها مشتري من شركة الدخول. يحصل الضيوف على الرأس الأبيض النظيف؛ ويحصل المشترون المسجل دخولهم على نفس الرأس بالإضافة إلى شارات شركتهم، وشارة شروط NET، ومؤشر الإعفاء الضريبي، ومبدّل الشحن إلى.

---

شريط الإعلان

ملف القسم: sections/announcement-bar.liquid

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

الإعدادات

الإعداد	النوع	ملاحظات
النص	Rich text	رسالة قيمة قصيرة — "شحن مجاني على الطلبات فوق $500"، "NET-30 متاح للمشترين المؤهلين". يدعم الروابط المضمنة.
الأيقونة اليسرى	اختيار	truck · lightning · lock · none. يقرن رمز SVG مع النص.
رقم الهاتف	نص	شارة هاتف محاذية لليمين. اضغط للاتصال على الجوال (رابط tel:).
عنوان Instagram URL	URL	أيقونة اجتماعية للعلامة التجارية. يُعرض فقط إذا تم تعبئته.
عنوان LinkedIn URL	URL	أيقونة LinkedIn.
عنوان X (Twitter) URL	URL	أيقونة X.
عنوان YouTube URL	URL	أيقونة YouTube.
نظام الألوان	اختيار	اختر داكن (الافتراضي)، أو التمييز (العلامة التجارية)، أو فاتح.

كتل الروابط

أضف كتل الروابط لدفع روابط نصية صغيرة إلى شريط الإعلان — العروض الخاصة، كن ديلر، الموارد. كل كتلة تأخذ label وurl.

قابل للإغلاق

زر × على اليمين يغلق شريط الإعلان للزائر الحالي. تستمر الحالة في localStorage عبر assets/announcement-dismiss.js، لذا يبقى الشريط مخفيًا حتى يمسح الزائر بيانات موقعه.

متى تستخدم نظام التمييز

نظام التمييز (العلامة التجارية) يتبع لون التمييز الخاص بك (أزرق كوبالتي افتراضيًا)، بما يطابق شريط ترحيب B2B. استخدمه عندما يكون إعلانك قيمة مقترحة لـ B2B (شروط NET-30، تسجيل الديلر، RFQ). استخدم النظام الداكن للتسويق العام.

---

الرأس الرئيسي

ملف القسم: sections/header.liquid

سطح التنقل الأساسي — الشعار، نص العلامة التجارية، القائمة الأساسية، القائمة الثانوية الاختيارية، البحث التنبؤي، مبدّلات اللغة والعملة، الحساب، والسلة.

الإعدادات

الإعداد	النوع	ملاحظات
الشعار	صورة	موصى به: SVG أو PNG 2x. مقيد بأقصى ارتفاع يحدده الإعداد الرقمي Logo max height.
تجاوز نص العلامة التجارية	نص	نص اختياري يُستخدم عندما لا يوجد شعار (مثل "Vertex Supply"). يُعرض بخط العنوان.
القائمة الأساسية	قائمة روابط	التنقل الرئيسي. كل عنصر قائمة رئيسي يحصل على قائمة منسدلة مدفوعة بعناصره الفرعية.
نمط القائمة الفرعية	اختيار	auto · mega · dropdown. Auto تختار mega عندما يكون للأصل 8 عناصر فرعية أو أكثر أو يتم اكتشاف تخطيط شبكة؛ وإلا تعرض قائمة منسدلة مسطحة.
القائمة الثانوية	قائمة روابط	تنقل أدوات محاذي لليمين (العروض الخاصة · الأدلة · الخدمات · FAQ). يتم اكتشافها تلقائيًا بواسطة مقبض قائمة الروابط secondary-menu إذا لم تختر واحدة.
حشو احتياطي للبحث	نص	قابل للترجمة. الافتراضي "ابحث بالمنتج أو SKU أو رقم القطعة".
إظهار مبدّل اللغة	خانة اختيار	الافتراضي on. يخفي/يظهر شارة اللغة في رأس سطح المكتب ودرج الجوال.
إظهار مبدّل العملة	خانة اختيار	الافتراضي on. يخفي/يظهر شارة العملة. حتى مشترو B2B في سوق واحد يرون هذا معلوماتيًا حتى يعرفوا دائمًا بأي عملة يدفعون.
ثابت عند التمرير	خانة اختيار	يثبّت الرأس في نافذة العرض عند التمرير.

ما يُعرض على يمين القائمة

بالترتيب من اليسار إلى اليمين: مدخل البحث التنبؤي، شارة اللغة، شارة العملة، شارة مندوب المبيعات (تُعرض تلقائيًا لـ B2B)، الحساب، عداد السلة.

تسحب شارة مندوب المبيعات من الحقول الوصفية للشركة vertex.rep_name وvertex.rep_email وvertex.rep_phone. انظر دليل إعداد B2B لتفاصيل التعبئة.

القائمة الميجا مقابل القائمة المنسدلة البسيطة

يتم تحديد نمط القائمة الفرعية لكل عنصر قائمة رئيسي بواسطة إعداد menu_style. شكلان:

• قائمة ميجا — لوحات شبكة متعددة الأعمدة مع أيقونات اختيارية وشبكة علامات تجارية مخصصة. استخدم لـ تسوق حسب الفئة، تسوق حسب العلامة التجارية، الصناعات — عناصر رئيسية بـ 8 عناصر فرعية أو أكثر أو فئات فرعية بصرية.
• قائمة منسدلة بسيطة — قائمة مسطحة. استخدم لـ عن، الموارد، الحساب — عناصر رئيسية بقلة من الصفحات.

عند الضبط على auto، يختار Vertex ميجا إذا كان للأصل ≥ 8 عناصر فرعية؛ وإلا القائمة المنسدلة البسيطة.

---

شريط ترحيب B2B

ملف القسم: sections/b2b-greeting-bar.liquid

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

متى يظهر

يجب أن تكون كل الثلاثة صحيحة:

1. customer.b2b? — العميل هو مشتري B2B (شركة)، وليس حساب B2C
2. customer.current_company — هم مرتبطون بشركة واحدة على الأقل
3. settings.storefront_mode != 'b2c' — القالب ليس مثبتًا على وضع B2C فقط

إذا فشل أي واحد (ضيف، وضع B2C فقط، لا شركة مرتبطة) فلن يُعرض شريط الترحيب على الإطلاق.

ما يعرضه

• اسم الشركة — "مسجل دخول كـ {company.name}"
• شارة شروط NET — NET-30 / NET-60 / NET-90 من حقل وصفي شروط الدفع للشركة
• شارة الإعفاء الضريبي — من حالة الضريبة الأصلية للشركة في Shopify
• شارة اللغة — أفاتار بنمط REP + رمز ISO + chevron
• شارة العملة — أفاتار بنمط REP + رمز ISO + chevron
• مبدّل الشحن إلى — تسمية ثابتة عندما يكون للمشتري موقع واحد؛ قائمة منسدلة كاملة عندما يكون لديهم مواقع متعددة

السلوك المتجاوب

على الشاشات ≤ 1169px يتقلص شريط الترحيب وتنتقل محتوياته إلى قسم الحساب في درج الهامبرغر. يظهر الشريط الأزرق الكوبالتي فقط على ≥ 1170px (سطح المكتب) حتى لا يتنافس مع شريط البحث على المساحة العمودية على الجوال.

→ انظر أقسام B2B فقط لسطح الميزة الكامل.

---

التذييل

ملف القسم: sections/footer.liquid

تذييل الموقع — القائمة، الاجتماعي، البريد، أيقونات الدفع، النشرة الإخبارية، الروابط القانونية.

الإعدادات

الإعداد	النوع	ملاحظات
قائمة التذييل	قائمة روابط	تنقل تذييل متعدد الأعمدة. كل أصل يُعرض كعنوان عمود.
عنوان Instagram URL	URL	يُعرض فقط إذا تم تعبئته.
عنوان Facebook URL	URL	يُعرض فقط إذا تم تعبئته.
عنوان LinkedIn URL	URL	يُعرض فقط إذا تم تعبئته.
عنوان X (Twitter) URL	URL	يُعرض فقط إذا تم تعبئته.
عنوان YouTube URL	URL	يُعرض فقط إذا تم تعبئته.
البريد الإلكتروني	نص	الافتراضي فارغ. عند التعبئة، يُعرض كرابط mailto: في عمود الاتصال.
إظهار أيقونات الدفع	خانة اختيار	الافتراضي on. يستخدم shop.enabled_payment_types لذا لا تحتاج إلى الاحتفاظ بالقائمة بنفسك.
عنوان النشرة الإخبارية	نص	على سبيل المثال، "انضم إلى قائمة التجارة".
مقدمة النشرة الإخبارية	Richtext	نسخة طمأنينة قصيرة — "إصدارات شهرية، بدون spam".
القائمة القانونية	قائمة روابط	الخصوصية · الشروط · الاسترداد · ملفات تعريف الارتباط. تعود تلقائيًا إلى عناوين URL لـ /policies/* إذا تركت القائمة فارغة.

نموذج النشرة الإخبارية

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

أيقونات الدفع تعكس ما هو مفعّل

لا تختار أيقونات الدفع يدويًا — يقرأ Vertex shop.enabled_payment_types ويعرض فقط الأيقونات التي فعّلتها في إعدادات الدفع في Shopify. فعّل Apple Pay في Settings → Payments → يظهر في التذييل. عطّله → يختفي.

---

البحث التنبؤي

ملف القسم: sections/predictive-search.liquid (يُعرض بواسطة header.liquid)

يسقط من مدخل البحث أثناء كتابة المشتري. يعرض أربع لوحات:

1. المنتجات — مصغر صورة، العنوان، المورد، السعر. يتعرف على أرقام قطع المُصنّع عبر حقل وصفي vertex.mpn (لذا البحث عن 1N4148 يجد الـ diode برقم القطعة).
2. المجموعات — العنوان + الصورة.
3. الصفحات — العنوان + URL.
4. الاستفسارات المقترحة — اقتراحات البحث الأصلية في Shopify.

التعرف على MPN

إذا عبّأت الحقل الوصفي vertex.mpn (نص سطر واحد) على منتج، سيطابق البحث التنبؤي الاستفسارات مقابل ذلك الحقل بالإضافة إلى عنوان المنتج القياسي / SKU / المورد. حاسم للكتالوجات التقنية حيث يبحث المشترون برقم القطعة بدلاً من اسم المنتج.

→ انظر دليل إعداد الحقول الوصفية لتفاصيل التعبئة.

---

السلوك المتجاوب

للرأس نقطة فاصل صارمة عند 1170px — مختارة بحيث يبقى iPad Pro في الوضع الرأسي (1024px) في تدفق الهامبرغر لكن معظم اللابتوبات تهبط في تخطيط سطح المكتب.

نافذة العرض	التخطيط
< 1170px	قائمة هامبرغر ← درج. يحتوي الدرج على: القائمة الأساسية، القائمة الثانوية، مبدّل الشحن إلى، شارات اللغة + العملة (شبكة عمودين)، بطاقة مندوب المبيعات (عرض كامل في الأسفل)، اللغة + تسجيل الدخول.
≥ 1170px	تنقل سطح المكتب الكامل. لوحات قائمة الميجا / المنسدلة، مدخل البحث التنبؤي، شارات REP، شارة مندوب المبيعات، الحساب، السلة.

لوحات منسدلة مخصصة (لا يوجد <select> أصلي)

يستخدم Vertex صفر عناصر <select> أصلية في أي مكان. مبدّلات اللغة والعملة والشحن إلى تستخدم جميعها نظام <details> + <summary> + لوحة مخصصة مشترك مع:

• حالات التحويم
• إبراز التحديد الحالي + أيقونة الفحص
• رسوم متحركة بظهور تدريجي
• استبعاد متبادل (فتح واحد يغلق الآخرين)
• النقر خارجها للإغلاق
• Escape للإغلاق
• تنقل كامل بلوحة المفاتيح (مفاتيح الأسهم + Enter)

التطبيق موجود في assets/global.js (ابحث عن المساعد closeAllDetails()). إعادة تنسيق هذه القوائم المنسدلة هي مسألة تجاوز محددات details[data-vertex-dropdown] — لا حاجة لـ JS.

---

ما هي الخطوة التالية

• أقسام تسويق الصفحة الرئيسية → — كوّن hero، المجموعة المميزة، الشهادات، FAQ، و25+ قسمًا آخر للصفحة الرئيسية
• أقسام صفحة المنتج → — المنتج الرئيسي، تبويبات المنتج، المنتجات ذات الصلة، المعروضة مؤخرًا، السلة الثابتة
• أقسام B2B فقط → — شريط ترحيب B2B (رابط متقاطع)، ترويج ميزات B2B، الطلب بالجملة، RFQ، المقارنة
• دليل أوضاع الواجهة الأمامية → — هجين مقابل B2B فقط مقابل B2C فقط
• مرجع إعدادات القالب → — كل إعداد على مستوى القالب موضحًا