Bagaimana menerapkan Pencarian Algolia di Drupal 9 (Bagian 2)

Diterbitkan: 2022-09-13

Di bab sebelumnya dari seri ini, kami memandu Anda melalui proses konfigurasi dasbor Algolia dan situs Drupal Anda untuk mengindeks konten situs di Algolia. Dalam bab ini, Anda akan mempelajari cara menampilkan hasil pencarian Algolia di situs web Drupal Anda.

Untuk menampilkan hasil pencarian, Anda perlu membuat blok khusus Drupal dan menempatkan blok tersebut di halaman /search . Juga, Anda akan menemukan cara memanfaatkan perpustakaan Pencarian Instan Algolia . Perhatikan bahwa proses ini mengasumsikan bahwa Anda memiliki pemahaman dasar tentang cara membuat modul khusus di Drupal, jadi kami tidak akan menyelam jauh ke dalam proses pembuatan modul khusus. Baca artikel ini untuk mempelajari cara membuat modul kustom secara terprogram di Drupal 9.

Ini adalah bab kedua dari artikel seri 2 Bagian. Klik di sini untuk membaca bagian pertama di mana kita berbicara tentang cara mengkonfigurasi Algolia dan Drupal.

Bagaimana menerapkan Pencarian Algolia di Drupal 9 (Bagian 2)

Membangun Blok Kustom untuk Antarmuka

Kami akan menggunakan struktur berikut untuk membuat blok kustom kami.

 algolia_search_interface - js/ - algolia.js - src/ - Plugin - Block - DemoSearchBlock.php - templates/ - algolia_search_interface-block.html.twig - algolia_search_interface.info.yml - algolia_search_interface.libraries.yml - algolia_search_interface.module

Mendeklarasikan Perpustakaan

Seperti yang dijelaskan sebelumnya, kita akan menggunakan perpustakaan Pencarian Instan Algolia untuk mengakses hasil pencarian. Jadi mari kita mendeklarasikan semua perpustakaan di algolia_search_interface.libraries.yml seperti yang ditunjukkan di bawah ini:

 algolia-javascript: js: https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js : { type: external } https://cdn.jsdelivr.net/npm/[email protected] : { type: external } js/algolia.js: {preprocess: false} dependencies: - core/drupalSettings css: theme: https://cdn.jsdelivr.net/npm/[email protected]/themes/algolia-min.css: { type: external, minified : true }

Mengakses dan Mengatur Variabel

Di Demo Search Block (DemoSearchBlock.php)​​, kita hanya akan mengakses variabel Algolia dari konfigurasi Drupal dan menetapkannya ke drupalSettings menggunakan kode berikut:

 public function build() { // Get Algolia config. $config = $this->configFactory->get('search_api.server.algolia_search'); $app_id = $config->get('backend_config.application_id'); $api_key = $config->get('backend_config.api_key'); $index_name = $this->configFactory->get('search_api.index.vehicles_data')->get('options.algolia_index_name'); return [ '#theme' => 'demo_search_block', '#attached' => [ 'library' => 'algolia_search_interface/algolia-javascript', 'drupalSettings' => [ 'app_id' => $app_id, 'index_name' => $index_name, 'api_key' => $api_key, ], ], '#cache' => [ 'contexts' => [ 'url.path', 'url.query_args', ], ], ]; }

Tambahkan Template

Sekarang Anda perlu menambahkan template untuk blok khusus. Jadi mari kita definisikan hook_theme untuk blok kustom kita di algolia_search_interface.module:

 /** * Implements hook_theme(). */ function algolia_search_interface_theme($existing, $type, $theme, $path) { return [ 'demo_search_block' => [], ]; }

Tentukan Wadah

Sekarang, mari kita definisikan data template kita untuk merender hasil pencarian. Kami hanya akan menentukan wadah tempat pustaka Pencarian Instan akan merender hasilnya. Kami akan menambahkan 4 wadah di algolia_search_interface-block.html.twig:

 - Searchbox (#searchbox) - Search results (#hits) - Facets (#filter-widget) - Pagination (#pagination)
 <div class="demo-instant-search"> <div class="algolia-searchbox"></div> <div class="align-left"> <div class="filter-header">{{ 'Manufacturer'|t }}</div> <div></div> </div> <div class="right-col"> <div></div> </div> </div> <div></div>

Menampilkan Hasil Pencarian

Sekarang Anda memiliki semua bahan yang diperlukan untuk menampilkan hasil pencarian Anda. Jadi mari kita lihat bagaimana menggunakan InstantSearch untuk menampilkan hasil kita.

Pertama, mari kita dapatkan nama indeks, id aplikasi, dan kunci aplikasi dari variabel drupalSettings. Kami membutuhkannya untuk diteruskan ke API Algolia kami di algolia.js.

 const index_name = drupalSettings.index_name; const app_id = drupalSettings.app_id; const api_key = drupalSettings.api_key;

Setelah Anda memiliki kunci aplikasi dan nama indeks, Anda perlu menginisialisasi dan memulai Pencarian Instan.

 const search = instantsearch({ indexName: index_name, searchClient: algoliasearch(app_id, api_key), }); search.start();

Pada titik ini, Anda tidak akan melihat perbedaan apa pun di halaman pencarian karena Anda belum menambahkan widget apa pun ke Pencarian Instan. Jadi, mari tambahkan widget kotak pencarian ke pencarian instan.

 search.addWidget( instantsearch.widgets.searchBox({ container: '#searchbox', }) );

Perhatikan bahwa kita telah menggunakan fungsi addwidget() dari InstantSearch untuk menambahkan satu widget. Saat menggunakan beberapa widget, addwidget() tidak layak. Anda harus menggunakannya dengan cara berikut:

 search.addWidgets([ instantsearch.widgets.searchBox({ container: '#searchbox', }), instantsearch.widgets.hits({ container: '#hits' }), ]);

Sekarang Anda akan dapat melihat hasil pencarian di halaman pencarian Anda. Tapi seperti yang bisa kita lihat, hasilnya dalam format yang sangat mentah:

Hasil pencarian Algolia - format mentah

Untuk memperbaiki ini, mari format hasil menggunakan atribut template seperti yang ditunjukkan di bawah ini:

 instantsearch.widgets.hits({ container: '#hits', templates: { item: ` <h3 class="title">{{{title.value}}}</h3> <p class="detail"> {{{field_manufacturer}}} </p> <p class="uri">{{{uri}}} </p> `, }, }),

Perhatikan bahwa meskipun hasilnya terlihat bagus, terkadang kita perlu melakukan beberapa pemrosesan pada data sebelum menampilkannya di halaman. Misalnya pada kode di atas, nilai URI dalam format `public://` . Di sini kita dapat menggunakan atribut transformItems untuk mengubah hasil sesuai kebutuhan kita.

 instantsearch.widgets.hits({ container: '#hits', transformItems(items) { return items.map(item => ({ ...item, url: item.uri.replace('public://', /sites/default/files/'), })); }, templates: { item: ` <h3 class="title">{{{title.value}}}</h3> <p class="detail"> {{{field_manufacturer }}} </p> <p class="uri">{{{url}}} </p> `, }, })

Setelah kumpulan hasil ada, Anda sekarang dapat pindah untuk menampilkan data faset untuk memfilter kriteria pencarian kami. Anda akan menggunakan fungsi addWidgets() yang sama untuk menampilkan faset.

 search.addWidgets([ instantsearch.widgets. refinementList({ container: '#filter-widget, attribute: 'field_manufacturer', }), ]);

Opsi atribut menentukan nama bidang yang ingin kita tampilkan fasetnya. Ingat ini juga perlu dikonfigurasi sebelumnya di dasbor Algolia.

Terakhir, mari tambahkan pagination untuk memungkinkan lebih banyak hasil ditampilkan.

 search.addWidgets([ instantsearch.widgets. pagination({ container: '#pagination, }), ]);

Dan kita sudah selesai! Ini adalah bagaimana kode terakhir terlihat

 const index_name = drupalSettings.index_name; const app_id = drupalSettings.app_id; const api_key = drupalSettings.api_key; if(index_name && app_id && api_key) { const search = instantsearch({ indexName: index_name, searchClient: algoliasearch(app_id, api_key), }); search.addWidgets([ instantsearch.widgets.searchBox({ container: '#searchbox', }), instantsearch.widgets.hits({ container: '#hits', transformItems(items) { return items.map(item => ({ ...item, url: item.uri.replace('public://', '/sites/default/files/'), })); }, templates: { item: ` <h3 class="title">{{{_highlightResult.title.value}}}</h3> <p class="detail"> {{{_highlightResult.field_manufacturer.value}}} </p> <p class="uri"><img src="{{{url}}}" /></p>`, }, }), instantsearch.widgets.refinementList({ container: '#filter-widget', attribute: 'field_manufacturer', }), instantsearch.widgets.pagination({ container: '#pagination', }) ]); search.start(); } else { throw "Algolia settings missing";}

Pikiran Akhir

Saat kami menyimpulkan seri artikel dua bagian kami, kami harap Anda telah memperoleh pemahaman yang cukup tentang Algolia. Kami telah membahas bagaimana Anda dapat mengintegrasikan pencarian Algolia dengan Drupal untuk membangun pencarian yang kuat dan tingkat konsumen. Kami juga membahas penggunaan pustaka Pencarian Instan untuk menyesuaikan hasil pencarian. Mencari perusahaan yang 100% berfokus pada Drupal yang dapat membantu Anda membangun pengalaman Drupal yang ambisius sambil memanfaatkan yang terbaik dari web? Kami akan senang mendengar dari Anda!