إنتقل إلى المحتوى الرئيسي

أقسام أداة البحث (القوائم المنسدلة المتعاقبة)

قسم Finder في Vertex هو widget لاكتشاف المنتجات بقوائم منسدلة متعاقبة. يضيق المشترون البحث إلى القطعة الدقيقة التي يحتاجونها عن طريق اختيار 3 قيم متتالية — الماركة ← الموديل ← السنة، أو العلامة التجارية ← الفئة ← السعة، أو علامة الطابعة ← الموديل ← اللون — وتأخذهم أداة البحث إلى المجموعة المُصفّاة.

يأتي Vertex مع أربعة عروض توضيحية مسبقة (presets) — Vertex (صناعي / MRO)، وThrottle (قطع غيار السيارات)، وOfficeIT (المكتب وIT)، وInkline (لوازم الطباعة). هناك ثلاثة أنواع لأداة البحث، وقسم Finder موصول بثلاثة من العروض الأربعة افتراضيًا:

  • Throttle (قطع غيار السيارات) — الماركة / الموديل / السنة
  • OfficeIT (المكتب وIT) — العلامة التجارية / الفئة / السعة
  • Inkline (لوازم الطباعة) — علامة الطابعة / الموديل / اللون

عرض Vertex (الصناعي) يأتي بدون أداة بحث — فهو يعتمد بدلًا من ذلك على مرشحات المجموعات متعددة الأوجه والبحث التنبؤي.

Make/Model/Year finder above hero (Throttle preset)

قسم واحد، ثلاثة أنواع لأداة البحث

لا تثبّت قسمًا مختلفًا لكل صناعة — إنه نفس قسم Finder في كل عرض. كل عرض يكتفي بتعبئة تسمياته للقوائم المنسدلة وقوائم خياراته الخاصة (الماركة/الموديل/السنة، أو العلامة التجارية/الفئة/السعة، أو علامة الطابعة/الموديل/اللون). تبديل التعاقب إلى قطاع آخر مسألة تحرير تلك التسميات والخيارات.

أداة البحث الماركة/الموديل/السنة​

أداة البحث هي تعاقب من 3 مستويات. اختر المستوى 1 ← تُعبَّأ خيارات المستوى 2 بناءً على خيار المستوى 1 ← اختر المستوى 2 ← تُعبَّأ خيارات المستوى 3 ← انقر إرسال ← انتقل إلى المجموعة المُصفّاة.

افتح Shopify admin → Online Store → Themes → Customize. في محرر الصفحة، انقر Add section واختر Finder.

الإعدادات​

  • العنوان — "Find parts for your vehicle" أو "Find toner for your printer".
  • نص المقدمة — طمأنينة قصيرة — "Select your make, model, and year to see compatible parts.".
  • تسمية القائمة المنسدلة 1 / 2 / 3 — التسمية الظاهرة لكل مستوى — مثل Make، Model، Year. غيّر هذه التسميات (بالإضافة إلى كتل الخيارات أدناه) لتحويل القسم نفسه إلى أي تعاقب تريده.
  • اسم معامل الاستعلام (Query param name) (لكل قائمة منسدلة) — معامل URL الذي يضيفه كل مستوى إلى رابط البحث/المجموعة (مثل make، model، year). يكون الافتراضي q1 / q2 / q3 إذا تُرك فارغًا.
  • تسمية زر الإرسال — "Find parts" أو "Find toner".
  • رابط إجراء النموذج (Form action URL) — وجهة إرسال النموذج. الافتراضي /search؛ وجّهه إلى رابط مجموعة (مثل /collections/all) لتصفية مجموعة بدلًا من ذلك.
  • نظام الألوان — قائمة منسدلة قياسية لنظام الألوان (Light / Accent band / Dark).
  • الحشو العمودي — مقدار المساحة التي يحصل عليها شريط أداة البحث أعلى وأسفل.

تأتي خيارات كل قائمة منسدلة من كتل الخيارات التي تضيفها إلى القسم — كتلة واحدة لكل خيار. يمكن لخيار القائمة المنسدلة 2 / 3 تعيين Parent value بحيث لا يظهر إلا بعد اختيار خيار الأب المطابق، وهكذا يضيق التعاقب.

الأنواع الثلاثة لأداة البحث​

1. الماركة / الموديل / السنة — عرض Throttle​

لـ موزعي قطع غيار السيارات ذوي الكتالوجات المدفوعة بالتركيب (fitment).

التعاقب:

  1. الماركة — Ford، Toyota، Chevrolet، BMW، إلخ.
  2. الموديل — يُعبَّأ من الماركة المختارة (F-150، Camry، Silverado، 3 Series)
  3. السنة — تُعبَّأ من الماركة والموديل المختارين (2018، 2019، 2020، ...)

الإرسال: يأخذ المشتري إلى المجموعة المطابقة، مُصفّاة على المنتجات الموسومة بتلك المركبة.

إعداد البيانات: أضف الخيارات مباشرةً إلى القسم ككتل خيارات في محرر القالب:

  • خيار قائمة منسدلة 1 لكل ماركة (Ford، Toyota، Chevrolet…)
  • خيار قائمة منسدلة 2 لكل موديل، مع تعيين Parent value على الماركة التي ينتمي إليها
  • خيار قائمة منسدلة 3 لكل سنة، مع تعيين Parent value على الموديل الذي تنتمي إليه

ثم وسم مجموعاتك بحيث يتطابق رابط URL المُرسَل (يستخدم Vertex التصفية الأصلية بالعلامات في Shopify).

2. العلامة التجارية / الفئة / السعة — عرض OfficeIT​

لـ موزعي المكتب وIT والإلكترونيات.

التعاقب:

  1. العلامة التجارية — HP، Dell، Lenovo، Apple، Cisco
  2. الفئة — تُعبَّأ من العلامة التجارية المختارة (لابتوبات، شاشات، راوترات، طابعات)
  3. السعة — تُعبَّأ من العلامة التجارية والفئة المختارتين (8 جيجا / 16 جيجا / 32 جيجا · 24" / 27" / 32" · إلخ.)

الإرسال: يأخذ المشتري إلى مجموعة العلامة التجارية والفئة المطابقة.

إعداد البيانات: أضف الخيارات ككتل خيارات في محرر القالب — خيار قائمة منسدلة 1 لكل علامة تجارية، وخيار قائمة منسدلة 2 لكل فئة (مع تعيين Parent value على العلامة التجارية)، وخيار قائمة منسدلة 3 لكل سعة (مع تعيين Parent value على الفئة).

3. علامة الطابعة / الموديل / اللون — متغيّر لوازم الطباعة​

لـ موزعي لوازم الطباعة الذين يبيعون الحبر ومسحوق الحبر والمستهلكات التي تحتاج إلى مطابقة طابعة محددة.

التعاقب:

  1. علامة الطابعة — HP، Canon، Brother، Epson، Xerox، إلخ.
  2. موديل الطابعة — يُعبَّأ من العلامة المختارة (LaserJet Pro M404، PIXMA TR8620، إلخ.)
  3. اللون — يُعبَّأ من العلامة والموديل المختارين (Black، Cyan، Magenta، Yellow، أو Multi-pack)

الإرسال: يأخذ المشتري إلى المجموعة المطابقة، مُصفّاة على الخراطيش المتوافقة مع تلك الطابعة.

إعداد البيانات: أضف الخيارات ككتل خيارات في محرر القالب — خيار قائمة منسدلة 1 لكل علامة طابعة، وخيار قائمة منسدلة 2 لكل موديل طابعة (مع تعيين Parent value على العلامة)، وخيار قائمة منسدلة 3 لكل لون (مع تعيين Parent value على الموديل).

هذا التعاقب مُهيّأ مسبقًا على عرض Inkline للوازم الطباعة، بحيث تحصل واجهة لوازم الطباعة على أداة بحث جاهزة عن الحبر مباشرةً — ما عليك سوى استبدال الخيارات التوضيحية بتشكيلة طابعاتك الخاصة.

كيف يعمل التعاقب​

تأتي خيارات أداة البحث من كتل الخيارات التي تضيفها إلى القسم، لذا فكل شيء مبني داخل الصفحة. ومن هناك:

  1. عند تحميل الصفحة، تُعبَّأ خيارات المستوى 1 من كتل خياراته للقائمة المنسدلة 1
  2. عندما يختار المشتري المستوى 1، يضيق المستوى 2 إلى الخيارات التي يطابق Parent value لها خيار المستوى 1
  3. عندما يختار المشتري المستوى 2، يضيق المستوى 3 إلى الخيارات التي يطابق Parent value لها خيار المستوى 2
  4. عند الإرسال، يُؤخذ المشتري إلى نتائج البحث أو المجموعة، مع إضافة كل مستوى كمعامل استعلام خاص به

الخيارات مبنية داخل الصفحة عند تحميلها — لذا لا يوجد طلب شبكة إضافي والتعاقب فوري.

يعمل بدون JavaScript

خيارات المستوى الأول مبنية مباشرةً داخل الصفحة، لذا تعمل أداة البحث حتى لو كان JavaScript معطلًا في متصفح المشتري — يمكنهم إرسال المستوى الأول وحده والوصول إلى النتائج المُصفّاة. هذه نفس فلسفة التحسين التدريجي التي ستراها في جميع أنحاء Vertex.

إعداد بيانات أداة البحث​

لكل نوع أداة بحث، تحتاج إلى:

  1. عيّن تسميات القوائم المنسدلة الثلاث لتعاقبك (مثل الماركة / الموديل / السنة)، واسم معامل الاستعلام لكل مستوى إذا أردت روابط URL نظيفة.
  2. أضف كتلة خيار لكل خيار — خيار قائمة منسدلة 1 لكل قيمة عليا، ثم خيارات قائمة منسدلة 2 و3 مع تعيين Parent value لها بحيث يضيق كل مستوى المستوى التالي.
  3. وجّه رابط إجراء النموذج إلى /search (الافتراضي) أو إلى مجموعة (مثل /collections/all).
  4. وسم مجموعاتك بحيث يتطابق رابط URL المُصفّى. يستخدم Vertex التصفية الأصلية بالعلامات في Shopify، لذا مجموعة من "Ford F-150 parts" يجب أن يكون لها العلامة vehicle:ford-f-150.

→ العروض التوضيحية الثلاثة (Throttle، OfficeIT، Inkline) تأتي بالفعل مع أداة بحث مُعبّأة بالكامل — انسخ واحدًا واستبدل تسمياتك وخياراتك الخاصة.

أين تضع أداة البحث​

الموقعالأنسب لـ
أعلى الصفحة الرئيسية، مباشرة تحت heroالقطاعات حيث أداة البحث هي قيمة الصفحة الرئيسية المقترحة (قطع غيار السيارات، لوازم الطباعة)
داخل hero (كلوحة جانبية)القطاعات حيث صورة hero تحمل القيمة المقترحة وأداة البحث هي CTA موازي
تحت المجموعة المميزةالقطاعات حيث أداة البحث هي أحد عدة مسارات تصفح
على صفحة أداة بحث مخصصةالقطاعات حيث أداة البحث هي طريقة التنقل الأساسية — اربطها من القائمة الثانوية للرأس

عرضا Throttle وInkline يضعان أداة البحث تحت hero. عرض OfficeIT يستخدم متغيرًا أصغر داخل hero.

سلوك B2B + أداة البحث​

لمشتري B2B المسجل دخولهم، تأخذ أداة البحث المشتري إلى المجموعة المُصفّاة — وتلك المجموعة تحترم نطاق كتالوج B2B للمشتري. لذا بحث Ford F-150 يظهر فقط قطع F-150 الموجودة في كتالوج المشتري، مع تطبيق شرائح تسعير الحجم للمشتري.

أداة البحث نفسها لا تصفّي بالكتالوج — تلك التصفية تحدث في صفحة المجموعة بمجرد وصولهم إليها. هذا هو الفصل الصحيح: أداة البحث تضيق إلى عائلة المنتج الصحيحة؛ والمجموعة تُظهر فقط ما يمكن للمشتري شراؤه بالسعر الصحيح.

نصائح لجودة بيانات أداة البحث​

  • استخدم تكبير الحروف باتساق في الإدخالات (دائمًا Ford، أبدًا FORD أو ford) — التعاقب يطابق النصوص بدقة
  • تجنب المسافات الزائدة في قيم الإدخالات — حتى المسافات غير المرئية ستكسر التعاقب
  • عبّئ كل المستويات الثلاثة لكل إدخال — الإدخالات غير المكتملة تكسر التعاقب لكل من في المراحل اللاحقة للمستوى المفقود
  • استخدم افتراضيًا منطقيًا للمجموعة المستهدفة — المشترون الذين يرسلون اختيارًا جزئيًا (أو الذين لا يطابق اختيارهم) يصلون هنا

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