كبرت صفحة الأسئلة الشائعة لدى Kestrel حتى صار المشترون يتجاوزون الإجابة التي يبحثون عنها. أرانا التاجر صفحة مساعدة لمنافس فيها مربع بحث في الأعلى وطلب الشيء نفسه: اكتب كلمة، وشاهد الأسئلة المطابقة فقط.
هذه قصة البحث في الأسئلة الشائعة في Shopify: الـ snippet، والخطأ الذي جعل النسخة الأولى لا تجد شيئًا في المتجر الحي، والإصلاح الذي تبيّن أنه درس عن السكربتات المضمّنة في قوالب Shopify.
عن دراسة الحالة: هي قصة مركبة مبنية على مشاريع Shopify حقيقية. تم تغيير اسم العلامة وبعض التفاصيل. الكود والخطأ والإصلاح هي تمامًا كما حدثت.
لماذا لا نستخدم بحث Shopify نفسه؟
يغطي بحث متجر Shopify المنتجات والمجموعات والصفحات ومقالات المدونة. أما النص الذي يكتبه التاجر في كتل أقسام القالب، وهو المكان الذي تحفظ فيه معظم أقسام الأسئلة الشائعة أسئلتها، فليس جزءًا من ذلك الفهرس. من يبحث عن «retour» في المتجر يجد منتجات، لا الإجابة عن الإرجاع.
لكن إجابات الأسئلة الشائعة موجودة أصلًا في HTML الصفحة. وتصفيتها في المتصفح لا تحتاج إلى طلب ولا تطبيق ولا فهرس. تظهر النتائج بينما المشتري ما زال يكتب.
النسخة الأولى: snippet واحد وسطر render واحد
يعدّل التاجر القالب في محرر الكود، لذا أبقينا التغيير أصغر ما يمكن: snippet جديد يضم الترميز والأنماط والسكربت، وسطر واحد في قسم الأسئلة الشائعة لعرضه.
{%- render 'faq-search', section: section -%}
<div class="faqs ..."> <!-- the theme's existing FAQ markup -->السكربت عنصر مخصص صغير. مع كل إدخال يقوم بأربعة أمور:
- يوحّد النص: أحرف صغيرة ودون علامات تشكيل، فيجد «e» أيضًا «é».
- يقسم البحث إلى كلمات ولا يُبقي سؤالًا إلا إذا احتوى عليها كلها، في العنوان أو في الإجابة.
- يخفي فئة كاملة مع عنوانها عندما لا يطابق أي من أسئلتها.
- يعرض رسالة «لم يُعثر على أسئلة» مع دعوة للتواصل مع الدعم عندما لا يطابق شيء على الإطلاق.
اختبرناه على نسخة من ترميز الأسئلة الشائعة في متصفح بلا واجهة. أعاد كل بحث الأسئلة الصحيحة. فأرسلناه.
لقطة الشاشة
جاء الرد مع لقطة شاشة. كان التاجر قد لصق جملة كاملة من إحدى الإجابات في مربع البحث. عرضت الصفحة «لم يُعثر على أسئلة»، وكل الأسئلة ظاهرة تحتها. لم يُخفَ شيء ولم يُعثر على شيء.
أشار العرَضان إلى الأمر نفسه: السكربت يظن أن الصفحة بلا أسئلة. فتحنا الصفحة الحية وسألنا العنصر مباشرة. كانت في الصفحة مجموعتان من الأسئلة الشائعة بسبعة أسئلة. وقائمة المجموعات لدى عنصر البحث فارغة.
السبب: سكربت مضمّن يعمل مبكرًا جدًا
يُعرض الـ snippet فوق الأسئلة، ووسم <script> الخاص به داخل الـ snippet. يقرأ المتصفح HTML من الأعلى إلى الأسفل. عندما يصل إلى السكربت يعرّف العنصر المخصص، ولأن <faq-search> موجود في المستند بالفعل يعمل connectedCallback فورًا. في تلك اللحظة لم يكن المحلل قد وصل بعد إلى الأسئلة التي تحته.
كانت نسختنا الأولى تبحث عن مجموعات الأسئلة في connectedCallback وتحفظها. فحفظت قائمة فارغة، مرة واحدة وإلى الأبد. ونجح اختبارنا لأن صفحة الاختبار وضعت السكربت بعد الأسئلة بالمصادفة.
الإصلاح getter واحد. بدل حفظ المجموعات عند اتصال العنصر، يبحث عنها السكربت في كل مرة يكتب فيها المشتري:
get groups() {
return Array.from(this.closest('.section').querySelectorAll('.faq'));
}عندما يبدأ أحد بالكتابة تكون الصفحة قد قُرئت بالكامل. ولا يكاد البحث يكلّف شيئًا مع بضع عشرات من الأسئلة، ويظل يعمل عندما يعيد محرر القالب عرض القسم أثناء تعديل التاجر، وهو ما لا تفعله القائمة المحفوظة.
خطأ ثانٍ أكثر هدوءًا
أثناء نقل الكود إلى الـ snippet النهائي وجدنا مشكلة أخرى. قاعدة CSS التي تخفي العناصر المصفّاة كُتبت .faq [data-faq-hidden] بمسافة. هذا يخفي الأسئلة داخل المجموعة لكنه لا يخفي المجموعة نفسها، فقد يبقى عنوان فئة بلا شيء تحته. القاعدة الآن تغطي الحالتين: .faq [data-faq-hidden], .faq[data-faq-hidden].
الاختبار حيث يعمل فعلًا
هذه المرة اختبرنا على صفحة الأسئلة الشائعة الحية نفسها، بتشغيل المنطق المصحح في المتصفح على الترميز الحقيقي، قبل أن نطلب من التاجر تغيير أي شيء.
| «levertijd» | سؤال مدة التوصيل فقط |
| «garantie» | أسئلة الضمان من فئتين مختلفتين |
| «€70 gratis» | سؤال تكاليف الشحن فقط، مطابقًا من إجابته |
| «retour» | سؤال الإرجاع فقط، والفئة الأخرى مخفية |
| «xyz» | لا شيء، مع رسالة «لم يُعثر على أسئلة» |
ما تعلمناه
- اختبر بالترتيب الذي تستخدمه الصفحة الحقيقية. العنصر المخصص المعرّف في سكربت مضمّن لا يرى إلا HTML الذي فوقه.
- لا تحفظ استعلامات DOM في
connectedCallbackإلا إذا كنت تعرف أن المحتوى موجود. الـ getter أبسط من انتظارDOMContentLoadedويصمد أمام إعادة العرض في محرر القالب. - عندما يرسل تاجر لقطة شاشة، اقرأ الأعراض معًا. «لا نتائج» مع «لا شيء مخفي» حصرت الخطأ قبل أن نفتح وحدة التحكم.
أصبح البحث لاحقًا جزءًا من صفحة مساعدة كاملة؛ كتبنا عنها في دراسة حالة قالب صفحة الأسئلة الشائعة في Shopify. ولعرض صفحة المنتج الذي بنيناه للمتجر نفسه، راجع أداة اشترِ واحدًا واحصل على الثاني مجانًا. وإن كانت أسئلتك الشائعة أو جزء آخر من قالبك يحتاج إلى عمل كهذا، فاطلع على خدمة تطوير قوالب Shopify.
الأسئلة الشائعة
هل يضر شريط البحث في الأسئلة الشائعة بتحسين محركات البحث؟
لا. تبقى كل الأسئلة والإجابات في HTML. وتُخفى فقط في متصفح المشتري بعد أن يكتب بحثه.
هل أحتاج إلى تطبيق لإضافة بحث إلى صفحة الأسئلة الشائعة في Shopify؟
لا. بما أن الأسئلة موجودة في الصفحة، يمكن لسكربت صغير تصفيتها. هذا أسرع من التطبيق وبلا تكلفة شهرية.
هل يعمل مع صفحة أسئلة شائعة كبيرة؟
نعم. تصفية بضع مئات من الأسئلة في المتصفح فورية. وما بعد ذلك يكون تقسيم الأسئلة على عدة صفحات أفضل للمشتري عادة.
هل يبحث في الإجابات أيضًا؟
نعم. يُطابق كل سؤال بعنوانه ونص إجابته، دون علامات تشكيل، ويجب أن تظهر كل كلمات البحث.