วิธีการใช้ Algolia Search ใน Drupal 9 (ตอนที่ 2)

เผยแพร่แล้ว: 2022-09-13

ในบทที่แล้วของชุดข้อมูลนี้ เราได้แนะนำคุณตลอดขั้นตอนการกำหนดค่าแดชบอร์ด Algolia และไซต์ Drupal ของคุณเพื่อจัดทำดัชนีเนื้อหาของเว็บไซต์ใน Algolia ในบทนี้ คุณจะได้เรียนรู้วิธีแสดงผลการค้นหา Algolia บนเว็บไซต์ Drupal ของคุณ

ในการแสดงผลการค้นหา คุณจะต้องสร้างบล็อกแบบกำหนดเองของ Drupal และวางบล็อกนั้นบนหน้า /search นอกจากนี้ คุณยังจะได้ทราบวิธีใช้ไลบรารีค้นหาทันทีของ Algolia โปรดทราบว่ากระบวนการนี้ถือว่าคุณมีความเข้าใจพื้นฐานเกี่ยวกับวิธีสร้างโมดูลที่กำหนดเองใน Drupal ดังนั้นเราจะไม่เจาะลึกถึงกระบวนการสร้างโมดูลที่กำหนดเอง อ่านบทความนี้เพื่อเรียนรู้วิธีสร้างโมดูลที่กำหนดเองโดยทางโปรแกรมใน Drupal 9

นี่เป็นบทที่สองของบทความชุดที่ 2 คลิกที่นี่เพื่ออ่านส่วนแรกที่เราพูดถึงวิธีกำหนดค่า Algolia และ Drupal

วิธีการใช้ Algolia Search ใน Drupal 9 (ตอนที่ 2)

การสร้างบล็อกแบบกำหนดเองสำหรับอินเทอร์เฟซ

เราจะใช้โครงสร้างต่อไปนี้เพื่อสร้างบล็อกที่กำหนดเอง

 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

ประกาศห้องสมุด

ตามที่อธิบายไว้ก่อนหน้านี้ เราจะใช้ไลบรารีค้นหาทันทีของ Algolia เพื่อเข้าถึงผลการค้นหา เรามาประกาศไลบรารีทั้งหมดใน algolia_search_interface.libraries.yml ดังที่แสดงด้านล่าง:

 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 }

การเข้าถึงและการตั้งค่าตัวแปร

ในบล็อกการค้นหาตัวอย่าง (DemoSearchBlock.php)​​ เราจะเข้าถึงตัวแปร Algolia จากการกำหนดค่า Drupal และกำหนดให้กับ drupalSettings โดยใช้รหัสต่อไปนี้:

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

เพิ่มเทมเพลต

ตอนนี้คุณจะต้องเพิ่มเทมเพลตสำหรับบล็อกที่กำหนดเอง มากำหนด hook_theme สำหรับบล็อกที่กำหนดเองของเราใน algolia_search_interface.module:

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

กำหนดคอนเทนเนอร์

ตอนนี้ มากำหนดข้อมูลเทมเพลตของเราเพื่อแสดงผลการค้นหา เราจะกำหนดคอนเทนเนอร์ที่ไลบรารีค้นหาทันทีจะแสดงผลลัพธ์ เราจะเพิ่มคอนเทนเนอร์ 4 รายการใน 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>

การแสดงผลการค้นหา

ตอนนี้คุณมีส่วนผสมทั้งหมดที่จำเป็นในการแสดงผลการค้นหาแล้ว มาดูวิธีใช้ InstantSearch เพื่อแสดงผลลัพธ์ของเรากันดีกว่า

อันดับแรก มาดูชื่อดัชนี รหัสแอปพลิเคชัน และรหัสแอปพลิเคชันจากตัวแปร drupalSettings เราต้องการให้พวกเขาส่งผ่านไปยัง Algolia API ของเราใน algolia.js

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

เมื่อคุณมีคีย์แอปพลิเคชันและชื่อดัชนีแล้ว คุณจะต้องเริ่มต้นและเริ่มการค้นหาทันที

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

ณ จุดนี้ คุณจะไม่เห็นความแตกต่างใดๆ ในหน้าการค้นหา เนื่องจากคุณไม่ได้เพิ่มวิดเจ็ตใดๆ ลงใน InstantSearch ดังนั้น มาเพิ่มวิดเจ็ต ช่องค้นหา ในการค้นหาทันทีกัน

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

สังเกตว่าเราใช้ ฟังก์ชัน addwidget() ของ InstantSearch เพื่อเพิ่มวิดเจ็ตเดียว เมื่อใช้หลายวิดเจ็ต addwidget() จะไม่สามารถทำได้ คุณจะต้องใช้ในลักษณะต่อไปนี้:

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

ตอนนี้ คุณจะสามารถเห็นผลการค้นหาในหน้าการค้นหาของคุณ แต่อย่างที่เราเห็น ผลลัพธ์อยู่ในรูปแบบที่ดิบมาก:

ผลการค้นหา Algolia - รูปแบบดิบ

เพื่อปรับแต่งสิ่งนี้ ให้จัดรูปแบบผลลัพธ์โดยใช้แอตทริบิวต์ template ดังที่แสดงด้านล่าง:

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

โปรดทราบว่าแม้ว่าผลลัพธ์จะออกมาดี แต่บางครั้งเราต้องดำเนินการกับข้อมูลก่อนที่จะแสดงบนหน้า ตัวอย่างเช่น ในโค้ดด้านบน ค่า URI จะอยู่ในรูปแบบ "สาธารณะ://" ที่นี่เราสามารถใช้แอตทริบิวต์ transformItems เพื่อแก้ไขผลลัพธ์ตามความต้องการของเรา

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

เมื่อชุดผลลัพธ์พร้อมแล้ว คุณสามารถย้ายไปแสดงข้อมูลแง่มุมเพื่อกรองเกณฑ์การค้นหาของเราได้ คุณจะใช้ ฟังก์ชัน addWidgets() เดียวกันเพื่อแสดงแง่มุม

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

ตัวเลือกแอตทริบิวต์กำหนดชื่อฟิลด์ที่เราต้องการแสดงด้าน โปรดจำไว้ว่าสิ่งนี้จะต้องได้รับการกำหนดค่าล่วงหน้าในแดชบอร์ด Algolia ด้วย

สุดท้าย มาเพิ่มการแบ่งหน้าเพื่อให้สามารถแสดงผลได้มากขึ้น

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

และเสร็จแล้ว! นี่คือลักษณะของรหัสสุดท้าย

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

ความคิดสุดท้าย

เมื่อเราสรุปชุดบทความสองตอนของเรา เราหวังว่าคุณจะเข้าใจ Algolia เพียงพอแล้ว เราได้กล่าวถึงวิธีการผสานรวมการค้นหาของ Algolia กับ Drupal เพื่อสร้างการค้นหาที่มีประสิทธิภาพและระดับผู้บริโภค เรายังคุยกันถึงการใช้ไลบรารีค้นหาทันทีเพื่อปรับแต่งผลการค้นหา กำลังมองหาบริษัทที่เน้น Drupal 100% ที่สามารถช่วยคุณสร้างประสบการณ์ Drupal ที่ทะเยอทะยานในขณะที่ใช้ประโยชน์จากเว็บได้ดีที่สุด? เราชอบที่จะได้ยินจากคุณ!