كيفية تطبيق Algolia Search في دروبال 9 (الجزء 2)

في الفصل السابق من هذه السلسلة ، قمنا بتوجيهك خلال عملية تكوين لوحة معلومات Algolia وموقع Drupal الخاص بك لفهرسة محتوى الموقع على Algolia. في هذا الفصل ، ستتعلم كيفية عرض نتائج بحث Algolia على موقع ويب Drupal الخاص بك.

لعرض نتيجة البحث ، سوف تحتاج إلى إنشاء كتلة Drupal مخصصة ووضع الكتلة على / صفحة البحث . أيضًا ، سوف تتعرف على كيفية الاستفادة من مكتبة البحث الفوري في Algolia . لاحظ أن هذه العملية تفترض أن لديك فهمًا أساسيًا لكيفية إنشاء وحدات مخصصة في دروبال ، لذلك لن نتعمق في عملية إنشاء وحدات مخصصة. اقرأ هذه المقالة لتتعلم كيفية إنشاء وحدات مخصصة برمجيًا في دروبال 9.

هذا هو الفصل الثاني من مقالة سلسلة مكونة من جزأين. انقر هنا لقراءة الجزء الأول حيث نتحدث عن كيفية تكوين Algolia و Drupal.

بناء قالب مخصص للواجهة

سنستخدم الهيكل التالي لإنشاء كتلة مخصصة.

 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 }

الوصول إلى المتغيرات ووضعها

في Demo search Block (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>

عرض نتائج البحث

الآن لديك جميع المكونات اللازمة لعرض نتائج البحث الخاصة بك. لذلك دعونا نلقي نظرة على كيفية استخدام البحث الفوري لعرض نتائجنا.

أولاً ، دعنا نحصل على اسم الفهرس ومعرف التطبيق ومفتاح التطبيق من متغير drupalSettings. نحتاجها لتمريرها إلى واجهة برمجة تطبيقات Algolia الخاصة بنا في 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();

في هذه المرحلة ، لن ترى أي اختلاف في صفحة البحث لأنك لم تقم بإضافة أي عنصر واجهة مستخدم إلى البحث الفوري. لذلك ، دعنا نضيف أداة مربع البحث إلى البحث الفوري.

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

لاحظ أننا استخدمنا وظيفة addwidget () للبحث الفوري لإضافة عنصر واجهة مستخدم واحد. عند استخدام أدوات متعددة ، فإن addwidget () غير ممكن. سوف تحتاج إلى استخدامه بالطريقة التالية:

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

الآن ستتمكن من رؤية نتائج البحث على صفحة البحث الخاصة بك. ولكن كما نرى ، فإن النتيجة بتنسيق خام للغاية:

من أجل تحسين ذلك ، دعنا نقوم بتنسيق النتيجة باستخدام سمة القالب كما هو موضح أدناه:

 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 بتنسيق `public: //` . هنا يمكننا استخدام سمة 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 لبناء بحث قوي ومستهلك. ناقشنا أيضًا استخدام مكتبة البحث الفوري لتخصيص نتائج البحث. هل تبحث عن شركة تركز على دروبال بنسبة 100٪ يمكنها مساعدتك في بناء تجارب دروبال الطموحة مع الاستفادة من أفضل ما في الويب؟ نحب أن نسمع منك!