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

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

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

يأتي Vertex بعرض توضيحي واحد (صناعي / MRO)، وقسم Finder نفسه يشغّل تكوينات قطع غيار السيارات، والمكتب وتقنية المعلومات، ولوازم الطباعة التي تبنيها منه. هناك ثلاثة أنواع لأداة البحث يمكنك إعدادها:

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

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

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

لا تثبّت قسمًا مختلفًا لكل صناعة — إنه نفس قسم 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. الماركة / الموديل / السنة — تكوين قطع غيار السيارات​

لـ موزعي قطع غيار السيارات ذوي الكتالوجات المدفوعة بالتركيب (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. العلامة التجارية / الفئة / السعة — تكوين المكتب وتقنية المعلومات​

لـ موزعي المكتب و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 على الموديل).

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

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

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

  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.

→ كل نوع أداة بحث (قطع غيار السيارات، والمكتب وتقنية المعلومات، ولوازم الطباعة) يتبع الخطوات الثلاث نفسها — عيّن التسميات لتعاقبك، وأضف كتلة خيار لكل خيار، واستبدلها بقيمك الخاصة.

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

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

تكوينا قطع غيار السيارات ولوازم الطباعة يضعان أداة البحث تحت hero. تكوين المكتب وتقنية المعلومات يستخدم متغيرًا أصغر داخل hero.

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

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

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

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

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

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