Carian FAQ Shopify dalam Satu Snippet, dan Pepijat yang Kami Hantar Dahulu

Halaman FAQ Kestrel telah menjadi begitu panjang sehingga pembeli menatal melepasi jawapan yang mereka cari. Peniaga menunjukkan halaman bantuan pesaing dengan kotak carian di bahagian atas dan meminta perkara yang sama: taip satu perkataan, lihat hanya soalan yang sepadan.

Ini kisah carian FAQ Shopify itu: snippet, pepijat yang menyebabkan versi pertama tidak menemui apa-apa di kedai langsung, dan pembetulan yang ternyata menjadi pengajaran tentang skrip sebaris dalam tema Shopify.

Tentang kajian kes ini: ia gabungan berdasarkan kerja projek Shopify sebenar. Nama jenama dan beberapa butiran telah diubah. Kod, pepijat dan pembetulan adalah tepat seperti yang berlaku.

Mengapa tidak menggunakan carian Shopify sendiri?

Carian kedai Shopify meliputi produk, koleksi, halaman dan artikel blog. Teks yang ditaip peniaga ke dalam blok seksyen tema, iaitu tempat kebanyakan seksyen FAQ menyimpan soalan, bukan sebahagian daripada indeks itu. Pembeli yang mencari “retour” di kedai akan menemui produk, bukan jawapan tentang pemulangan.

Namun jawapan FAQ sudah ada dalam HTML halaman. Menapisnya dalam pelayar tidak memerlukan permintaan, aplikasi atau indeks. Hasil muncul semasa pembeli masih menaip.

Versi satu: satu snippet dan satu baris render

Peniaga menyunting tema dalam editor kod, jadi kami memastikan perubahan sekecil mungkin: satu snippet baharu dengan markup, gaya dan skrip, dan satu baris dalam seksyen FAQ untuk memaparkannya.

{%- render 'faq-search', section: section -%}
<div class="faqs ...">  <!-- the theme's existing FAQ markup -->

Skrip ini ialah elemen tersuai yang kecil. Pada setiap input ia melakukan empat perkara:

• Menormalkan teks: huruf kecil dan tanpa aksen, supaya “e” juga menemui “é”.
• Memecahkan carian kepada perkataan dan hanya mengekalkan soalan yang mengandungi kesemuanya, dalam tajuk atau jawapan.
• Menyembunyikan seluruh kategori, termasuk tajuknya, apabila tiada soalannya yang sepadan.
• Memaparkan mesej “tiada soalan ditemui” dengan ajakan untuk menghubungi sokongan apabila tiada yang sepadan langsung.

Kami mengujinya pada salinan markup FAQ dalam pelayar tanpa kepala. Setiap carian memberikan soalan yang betul. Kami pun menghantarnya.

Tangkapan skrin itu

Balasan tiba bersama tangkapan skrin. Peniaga telah menampal satu ayat penuh daripada salah satu jawapan ke dalam kotak carian. Halaman memaparkan “tiada soalan ditemui”, dan setiap soalan masih kelihatan di bawahnya. Tiada yang disembunyikan, dan tiada yang ditemui.

Kedua-dua simptom menunjuk kepada perkara yang sama: skrip menyangka halaman tiada soalan. Kami membuka halaman langsung dan bertanya terus kepada elemen. Halaman mempunyai dua kumpulan FAQ dengan tujuh soalan. Senarai kumpulan milik elemen carian kosong.

Puncanya: skrip sebaris yang berjalan terlalu awal

Snippet dipaparkan di atas soalan, dan tag <script>-nya berada di dalam snippet. Pelayar membaca HTML dari atas ke bawah. Apabila sampai ke skrip, ia mentakrifkan elemen tersuai, dan kerana elemen <faq-search> sudah ada dalam dokumen, connectedCallback-nya berjalan serta-merta. Pada saat itu, penghurai belum sampai ke soalan di bawahnya.

Versi pertama kami mencari kumpulan FAQ dalam connectedCallback dan menyimpannya. Ia menyimpan senarai kosong, sekali, untuk selama-lamanya. Ujian kami lulus kerana halaman ujian kebetulan meletakkan skrip selepas soalan.

Pembetulannya hanya satu getter. Daripada menyimpan kumpulan semasa elemen disambungkan, skrip mencarinya setiap kali pembeli menaip:

get groups() {
  return Array.from(this.closest('.section').querySelectorAll('.faq'));
}

Apabila sesiapa mula menaip, halaman sudah dibaca sepenuhnya. Carian ini hampir tidak menelan kos untuk beberapa dozen soalan, dan ia terus berfungsi apabila editor tema memaparkan semula seksyen semasa peniaga menyunting, sesuatu yang tidak boleh dilakukan oleh senarai tersimpan.

Pepijat kedua yang lebih senyap

Semasa memindahkan kod ke snippet terakhir, kami menemui satu lagi masalah. Peraturan CSS yang menyembunyikan item yang ditapis ditulis sebagai .faq [data-faq-hidden], dengan ruang. Ia menyembunyikan soalan di dalam kumpulan, tetapi bukan kumpulan itu sendiri, jadi tajuk kategori boleh kekal tanpa apa-apa di bawahnya. Peraturan itu kini meliputi kedua-duanya: .faq [data-faq-hidden], .faq[data-faq-hidden].

Menguji di tempat ia berjalan

Kali ini kami menguji pada halaman FAQ langsung itu sendiri, dengan menjalankan logik yang dibetulkan dalam pelayar terhadap markup sebenar, sebelum meminta peniaga mengubah apa-apa.

“levertijd”	Hanya soalan tentang tempoh penghantaran
“garantie”	Soalan waranti daripada dua kategori berbeza
“€70 gratis”	Hanya soalan kos penghantaran, dipadankan melalui jawapannya
“retour”	Hanya soalan pemulangan, kategori lain disembunyikan
“xyz”	Tiada apa-apa, dengan mesej “tiada soalan ditemui”

Apa yang kami pelajari

• Uji mengikut susunan yang digunakan halaman sebenar. Elemen tersuai yang ditakrifkan dalam skrip sebaris hanya melihat HTML di atasnya.
• Jangan simpan carian DOM dalam connectedCallback melainkan anda tahu kandungan sudah wujud. Getter lebih mudah daripada menunggu DOMContentLoaded dan bertahan apabila editor tema memaparkan semula.
• Apabila peniaga menghantar tangkapan skrin, baca simptom bersama. “Tiada hasil” ditambah “tiada yang disembunyikan” menyempitkan pepijat sebelum kami membuka konsol.

Carian ini kemudian menjadi sebahagian daripada halaman bantuan penuh; kami menulis tentangnya dalam kajian kes templat halaman FAQ Shopify kami. Untuk tawaran halaman produk yang kami bina bagi kedai yang sama, lihat pemilih beli satu percuma satu. Jika FAQ anda atau bahagian lain tema anda memerlukan kerja seperti ini, lihat perkhidmatan pembangunan tema Shopify kami.

Soalan lazim

Adakah bar carian FAQ menjejaskan SEO?

Tidak. Semua soalan dan jawapan kekal dalam HTML. Ia hanya disembunyikan dalam pelayar pembeli selepas pembeli menaip carian.

Adakah saya memerlukan aplikasi untuk menambah carian pada halaman FAQ Shopify?

Tidak. Oleh kerana soalan sudah ada di halaman, skrip kecil boleh menapisnya. Ia lebih pantas daripada aplikasi dan tiada kos bulanan.

Adakah ia berfungsi dengan FAQ yang besar?

Ya. Menapis beberapa ratus soalan dalam pelayar berlaku serta-merta. Lebih daripada itu, membahagikan FAQ kepada beberapa halaman biasanya lebih baik untuk pembeli.

Adakah ia mencari dalam jawapan juga?

Ya. Setiap soalan dipadankan pada tajuk dan teks jawapannya, tanpa aksen, dan semua perkataan dalam carian mesti ada.