أقسام صفحة المنتج (PDP)
قالب منتج Vertex مبني لـ الكتالوجات التقنية — المشترون الذين يهتمون بأرقام القطع والمواصفات وأوراق البيانات وMOQs وعبوات الحالات وتسعير الحجم. كل نقطة تواصل B2B (شرائح الحجم، تسعير يتطلب تسجيل الدخول، قواعد الكمية، بطاقة مندوب المبيعات، يُشحن من، شارة شروط NET) تُعرض مباشرة في PDP بدون أي تطبيق مرافق.
نفس قالب product.json يُعرض للضيوف ومشتري B2B المسجل دخولهم. الأسعار والشارات وقواعد الكمية وبطاقة مندوب المبيعات تعكس تلقائيًا كتالوج شركة العميل وشروط الدفع — لا تحتاج إلى "قالب منتج B2B" و"قالب منتج B2C" كملفات موازية.
main-product
ملف القسم: sections/main-product.liquid
صفحة المنتج نفسها — المعرض، العنوان، السعر، منتقي المتغير، إدخال الكمية، ATC، وكل سطح مدرك لـ B2B مكدس في قسم واحد. كل كتلة أدناه هي كتلة قسم main-product يمكنك إعادة ترتيبها في المُخصص.
المعرض
- صورة رئيسية مع rollover الصورة على بطاقات القائمة (مطلوب صورتان أو أكثر)
- مصغرات أسفل الصورة الرئيسية
- النقر للتكبير (lightbox)
- الجوال: carousel قابل للسحب مع نقاط
العنوان + الميتا
- عنوان المنتج
- المورد (إذا كان معروضًا)
- ملصق يُشحن من — حقل وصفي
vertex.ships_fromلكل منتج أو الافتراضي على مستوى القالب - سطر MPN — عند تعيين
vertex.mpn، يعرض "MPN: 1N4148" تحت العنوان
كتلة السعر
سطح التسعير هو مدرك لـ B2B افتراضيًا:
- شرائح تسعير الحجم — معروضة من الخادم من
quantity_price_breaksفي Shopify. يرى المشترون "1–9: $4.50 · 10–49: $4.10 · 50+: $3.80" مباشرة. يُعرض تلقائيًا عندما يكون للمتغيرquantity_price_breaks_count > 0. - تسعير يتطلب تسجيل الدخول — عندما يكون إعداد القالب Hide prices until customer logs in مفعّلًا، يتم استبدال الأسعار بـ "سجل الدخول لرؤية التسعير" + رابط تسجيل دخول للضيوف.
- سعر مقارنة-في B2B — عرض مخطط عندما يكون سعر كتالوج B2B أقل من سعر الواجهة الأمامية.
منتقي المتغير
يُعرض كأزرار مُنسَّقة (سواتش للون، أزرار حجم للحجم، قائمة منسدلة للمحاور الأخرى). المتغيرات غير المتوفرة معطلة بصريًا (مخطط فوقها) لكنها لا تزال قابلة للاختيار حتى يرى المشتري البدائل.
إدخال الكمية
يتم فرض قواعد الكمية من جانب العميل ومن جانب الخادم:
| القاعدة | السلوك |
|---|---|
| MOQ (الحد الأدنى) | لا يمكن التقليل تحت MOQ. رسالة مباشرة: "الحد الأدنى للطلب: 12". |
| الحد الأقصى | لا يمكن الزيادة فوق الحد الأقصى. رسالة مباشرة: "الحد الأقصى: 144". |
| زيادة case-pack | يخطو بحجم case-pack. الإدخال اليدوي يقرّب لأعلى إلى القيمة الصحيحة التالية مع إشعار toast صغير. |
المشترون المرتبطون بكتالوج B2B يحصلون على قواعد الكمية الخاصة بالشركة؛ الضيوف يحصلون على قواعد الواجهة الأمامية. كلاهما يأتي من API الأصلي في Shopify — Vertex فقط يعرضهم.
إضافة إلى السلة + اشترِ الآن
- إضافة إلى السلة — ATC قياسي، معطل عند نفاد المخزون ما لم يتم تفعيل الطلب المسبق
- اشترِ الآن — أزرار checkout المسرّعة في Shopify (Shop Pay، Apple Pay، Google Pay، PayPal). اختياري عبر Shopify Settings.
- الطلب المسبق — عندما يكون المتغير قابلًا للطلب الخلفي، يستبدل "نفد المخزون" بـ "اطلب مسبقًا" (يستخدم تتبع المخزون الأصلي في Shopify)
- تنبيه عودة المخزون — عندما ينفد المتغير والطلب المسبق غير مفعّل، يعرض نموذج قبول البريد الإلكتروني (أصلي، بدون تطبيق إضافي)
بطاقة مندوب المبيعات
لمشتري B2B المسجل دخولهم، تظهر بطاقة مندوب المبيعات على PDP تعرض مندوب الشركة المعيَّن:
- الاسم (من
vertex.rep_name) - البريد (من
vertex.rep_email، كرابطmailto:) - الهاتف (من
vertex.rep_phone، كرابطtel:)
تُعرض فقط عندما يتم تعبئة حقل مندوب واحد على الأقل والعميل هو customer.b2b?.
Breadcrumb
تُنشأ تلقائيًا من المجموعة الأساسية للمنتج. تصدر BreadcrumbList JSON-LD.
كتلة جدول المواصفات التقنية
كتلة Tech specs — تعرض جدول مواصفات نظيف من عمودين من بيانات مواصفاتك التقنية. استخدم للأبعاد والوزن والمواد والجهد والسعة والشهادات.
→ انظر دليل إعداد الحقول الوصفية للتعبئة.
كتلة المستندات والتنزيلات
كتلة documents — تعرض قائمة تنزيلات PDF من حقول وصفية للمنتج:
- ورقة البيانات (
vertex.datasheet) - MSDS (
vertex.msds) - ال كتيب (
vertex.brochure) - الورقة التقنية (
vertex.tech_sheet) - دليل التركيب (
vertex.install_guide) - بطاقة الضمان (
vertex.warranty)
تختفي تلقائيًا لكل منتج عند عدم وجود مستندات مرفقة.
الإفصاح عن تاريخ السعر
كتلة price-history — قسم "تاريخ السعر" قابل للطي يقرأ من الحقل الوصفي vertex.price_history (قائمة من إدخالات التاريخ + السعر). مفيد للمشترين الصناعيين الذين يراقبون اتجاهات السوق.
عداد المخزون (مؤشر انخفاض المخزون)
كتلة Stock counter — إشارة عاجلية لكل متغير. تظهر فقط للمتغيرات التي تتتبع مخزونها، وتتحول إلى تحذير "تبقى N فقط" بمجرد انخفاض المخزون إلى عتبة انخفاض المخزون (10 وحدات). يشجع على الإجراء دون كشف المخزون الدقيق للمنافسين.
يعرض إحدى هذه الحالات:
- متوفر بكثرة (أكثر من 10): "متوفر"
- عند أو أقل من 10 وحدات: "تبقى 4 فقط في المخزون"
- قابل للطلب الخلفي (صفر، لكن مضبوط على متابعة البيع): "مطلوب خلفيًا — يُشحن خلال 7–10 أيام"
- نفد المخزون (صفر، غير قابل للطلب الخلفي): "نفد المخزون"
عندما يكون Hide prices until customer logs in مفعّلًا، يتم استبدال كتلة السعر بأكملها (بما في ذلك شرائح الحجم والمقارنة-في) بمطالبة "سجل الدخول لرؤية التسعير" للضيوف. قواعد الكمية، وعداد المخزون، وبطاقة مندوب المبيعات لا تزال تظهر حتى يتمكن المشترون من تقرير ما إذا كان المنتج يستحق تسجيل الدخول.
product-tabs
م لف القسم: sections/product-tabs.liquid
كتلة قسم تقسم محتوى PDP عبر التبويبات. أسقط هذا القسم تحت main-product في قالب product.json لتقليل الفوضى البصرية على المنتجات ذات المواصفات الطويلة.
إعدادات كتلة كل تبويب: العنوان، المحتوى (richtext / ملف / فيديو).
أنماط تبويب شائعة:
- الوصف — نسخة التسويق الرئيسية
- المواصفات — مواصفات تقنية موسعة تتجاوز جدول المواصفات التقنية
- ورقة البيانات — عارض PDF مضمن
- الشحن والإرجاع — معلومات الخدمات اللوجستية
- فيديو — YouTube / Vimeo مضمن
تستخدم التبويبات <details> + <summary> الأصلي للوصول الكامل بلوحة المفاتيح. التبويب الأول مفتوح افتراضيًا؛ فتح آخر يغلق الآخرين تلقائيًا (وضع الأكورديون) أو يبقى مفتوحًا (وضع التبديل) بناءً على إعداد القسم السماح بفتح متعدد.
related-products
ملف القسم: sections/related-products.liquid
شريط توصيات تحت PDP. يسحب من منتجات نفس المجموعة أو نفس الع لامة.
الإعدادات:
| الإعداد | ملاحظات |
|---|---|
| العنوان | على سبيل المثال، "شاهد العملاء أيضًا" أو "قد يعجبك أيضًا". |
| المصدر | same_collection (الافتراضي) · same_tag · manual. |
| الحد الأقصى للمنتجات | 4 (الافتراضي) / 6 / 8 / 12. |
| إظهار السعر | تبديل. يحترم قواعد تسعير يتطلب تسجيل الدخول. |
| إظهار المورد | تبديل. |
لمشتري كتالوج B2B، تُعرض فقط المنتجات الموجودة في كتالوج المشتري (تصفية أصلية في Shopify — Vertex يحترم هذا من البداية للنهاية).
recently-viewed
ملف القسم: sections/recently-viewed.liquid
منتجات متعقّبة في localStorage (حتى 12 لكل مشتري). تظهر على PDP في الأسفل ويمكن إسقاطها على الصفحة الرئيسية كشريط.
كيف يعمل
- كل عرض منتج يُلحَق بمفتاح
vertex_recently_viewedفي localStorage (FIFO، محدد بـ 12) - يقرأ القسم ذلك المفتاح من جانب العميل ويجلب ترميز بطاقة كل منتج
- يمسح عندما يمسح المشتري بيانات موقع المتصفح — ليس قائمة أمنيات، لا يستمر إلى Shopify
الإعدادات
- العنوان — "المعروضة مؤخرًا"
- الحد الأقصى للمنتجات — 4 / 6 / 8 / 12
- الإخفاء إذا كان فارغًا — تبديل، الافتراضي مفعّل (يختفي القسم بأكمله عندما لا يكون للمشتري تاريخ عرض)
قائمة الأمنيات الدائمة تتطلب تطبيق Shopify — يبقى Vertex متوافقًا مع سياسة Theme Store بإبقاء المعروضة مؤخرًا محصورة بالجلسة/المتصفح. المقارنة هي نفس النمط (انظر أقسام B2B فقط).
sticky-cart
ملف القسم: sections/sticky-cart.liquid
شريط ATC ثابت للجوال فقط يظهر بعد أن يمرر المشتري إلى ما بعد ATC الرئيسي. يبقي الإضافة إلى السلة على بُعد نقرة واحدة حتى عندما يكونون في عمق جدول المواصفات.
ما يُعرض
- مصغر صورة المنتج (يسار)
- عنوان المتغير المختار + السعر
- إدخال الكمية
- زر ATC (يمين)
الإعدادات
- الإظهار على الجوال فقط — الافتراضي مفعّل (سطح المكتب لديه الرأس الثابت للتنقل؛ الجوال يكسب المزيد من رفع التحويل من ATC الثابت)
- إظهار عنوان المتغير — تبديل
- نظام الألوان
يستخدم القسم IntersectionObserver على ATC الرئيسي — يُعرض فقط عندما يخرج ATC الرئيسي من نافذة العرض، ويختفي عندما يتم التمرير مرة أخرى إلى العرض.
ورقة غش لتفاعلات B2B
| السطح | ضيف | B2C مسجل دخوله | B2B مسجل دخوله |
|---|---|---|---|
| كتلة السعر | مخفي إذا كان "Hide prices until customer logs in" مفعّلًا | سعر الواجهة الأمامية | سعر كتالوج B2B + شرائح الحجم |
| شرائح تسعير الحجم | مخفي | مخفي | مرئي (معروض من الخادم) |
| قواعد الكمية | MOQ/الحد الأقصى للواجهة الأمامية | MOQ/الحد الأقصى للواجهة الأمامية | MOQ/الحد الأقصى لكتالوج الشركة |
| بطاقة مندوب المبيعات | مخفي | مخفي | مرئي (عندما تكون حقول المندوب معبأة) |
| شارة شروط NET | مخفي | مخفي | مرئي في شريط الترحيب (وليس PDP) |
| ATC الطلب المسبق | مرئي عند التفعيل | مرئي عند التفعيل | مرئي عند التفعيل |
| عداد المخزون | مرئي | مرئي | مرئي |
| المعروضة مؤخرًا | مرئي (localStorage) | مرئي (localStorage) | مرئي (localStorage) |
ما هي الخطوة التالية
- أقسام B2B فقط → — الطلب بالجملة، RFQ، المقارنة، ترويج ميزات B2B
- أقسام تعزيز المبيعات → — عداد المخزون، العرض السريع
- الرأس والتذييل والعناصر → — الرأس، التذييل، شريط ترحيب B2B
- دليل إعداد B2B → — فعّل B2B + عبّئ حقول وصفية لمندوب المبيعات
- دليل إعداد الحقول الوصفية → — أوراق البيانات، MPN، يُشحن من، المواصفات التقنية