Drupal 9'da Algolia Search nasıl uygulanır (Bölüm 2)

Bu dizinin önceki bölümünde, Algolia panosunu ve Drupal sitenizi sitenin içeriğini Algolia'da dizine eklemek için yapılandırma sürecinde size yol gösterdik. Bu bölümde Algolia arama sonuçlarını Drupal web sitenizde nasıl görüntüleyeceğinizi öğreneceksiniz.

Arama sonucunu görüntülemek için bir Drupal özel blok oluşturmanız ve bloğu /arama sayfasına yerleştirmeniz gerekir. Ayrıca Algolia'nın InstantSearch kitaplığından nasıl yararlanacağınızı da öğreneceksiniz. Bu sürecin, Drupal'da özel modüllerin nasıl oluşturulacağına dair temel bir anlayışa sahip olduğunuzu varsaydığını unutmayın, bu nedenle özel modüller oluşturma sürecine derinlemesine girmeyeceğiz. Drupal 9'da programlı olarak özel modüller oluşturmayı öğrenmek için bu makaleyi okuyun.

Bu, 2 Bölümlük bir dizi makalenin ikinci bölümüdür. Algolia ve Drupal'ın nasıl yapılandırılacağı hakkında konuştuğumuz ilk bölümü okumak için buraya tıklayın.

Arayüz için Özel Blok Oluşturma

Özel bloğumuzu oluşturmak için aşağıdaki yapıyı kullanacağız.

 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

Kütüphaneleri Bildirmek

Daha önce açıklandığı gibi, arama sonuçlarına erişmek için Algolia'nın InstantSearch kitaplığını kullanacağız. Algolia_search_interface.libraries.yml içindeki tüm kütüphaneleri aşağıda gösterildiği gibi ilan edelim:

 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 }

Değişkenlere Erişme ve Ayarlama

Demo arama Bloğunda (DemoSearchBlock.php) Drupal konfigürasyonundan Algolia değişkenlerine basitçe erişeceğiz ve aşağıdaki kodu kullanarak bunları drupalSettings'e atayacağız:

 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', ], ], ]; }

Şablon Ekle

Şimdi özel blok için bir şablon eklemeniz gerekecek. Algolia_search_interface.module'deki özel bloğumuz için hook_theme'i tanımlayalım:

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

Kapsayıcıları Tanımlayın

Şimdi, arama sonuçlarını oluşturmak için şablon verilerimizi tanımlayalım. Biz sadece InstantSearch kitaplığının sonuçları oluşturacağı kapsayıcıları tanımlayacağız. algolia_search_interface-block.html.twig'e 4 kapsayıcı ekleyeceğiz:

 - 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>

Arama Sonuçlarını Görüntüleme

Artık arama sonuçlarınızı görüntülemek için gerekli tüm bileşenlere sahipsiniz. Sonuçlarımızı görüntülemek için InstantSearch'ü nasıl kullanacağımıza bir göz atalım.

İlk olarak, drupalSettings değişkeninden dizin adını, uygulama kimliğini ve uygulama anahtarını alalım. Algolia.js'deki Algolia API'mize geçmelerine ihtiyacımız var.

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

Uygulama anahtarlarını ve dizin adını yerleştirdikten sonra, Anında Arama'yı başlatmanız ve başlatmanız gerekir.

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

Bu noktada, Anında Arama'ya herhangi bir widget eklemediğiniz için arama sayfasında herhangi bir farklılık görmeyeceksiniz. Öyleyse, anlık aramaya bir arama kutusu widget'ı ekleyelim.

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

Tek bir pencere öğesi eklemek için InstantSearch'ün addwidget() işlevini kullandığımıza dikkat edin. Birden çok widget kullanırken, addwidget() mümkün değildir. Aşağıdaki şekilde kullanmanız gerekecektir:

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

Artık arama sayfanızda arama sonuçlarını görebileceksiniz. Ancak gördüğümüz gibi, sonuç çok ham bir formatta:

Bunu düzeltmek için, aşağıda gösterildiği gibi template özniteliğini kullanarak sonucu biçimlendirelim:

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

Sonuç iyi görünse de, bazen sayfada görüntülemeden önce veriler üzerinde bazı işlemler yapmamız gerektiğini unutmayın. Örneğin, yukarıdaki kodda URI değeri "public://" biçimindedir. Burada, sonuçları ihtiyacımıza göre değiştirmek için transformItems niteliğini kullanabiliriz.

 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> `, }, })

Sonuç kümesi oluşturulduğunda, artık arama kriterlerimizi filtrelemek için model verilerini görüntülemeye geçebilirsiniz. Fasetleri görüntülemek için aynı addWidgets() işlevini kullanacaksınız.

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

Nitelik seçeneği, yüzü göstermek istediğimiz alan adını tanımlar. Bunun ayrıca Algolia panosunda önceden yapılandırılması gerektiğini unutmayın.

Son olarak, daha fazla sonucun görüntülenmesini sağlamak için sayfalandırma ekleyelim.

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

Ve işimiz bitti! Son kod böyle görünüyor

 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";}

Son düşünceler

İki bölümden oluşan makale dizimizi sonlandırırken, Algolia hakkında yeterince bilgi edinmiş olduğunuzu umuyoruz. Güçlü ve tüketici düzeyinde bir arama oluşturmak için Algolia aramasını Drupal ile nasıl entegre edebileceğinizi ele aldık. Arama sonuçlarını özelleştirmek için InstantSearch kitaplığını kullanmayı da tartıştık. Web'in en iyilerini kullanırken iddialı Drupal deneyimleri oluşturmanıza yardımcı olabilecek %100 Drupal odaklı bir şirket mi arıyorsunuz? Sizden haber almak isteriz!