Как показать HTML контент на странице результатов поиска Алголии на странице мгновенного поиска - PullRequest
Новая
       2

Как показать HTML контент на странице результатов поиска Алголии на странице мгновенного поиска

2 голосов
/ 19 февраля 2020

У меня есть веб-сайт WordPress с Algolia, и я хотел бы показать продукт short_description (т.е. post_excpert) в результатах поиска в формате HTML.

Да, я использую плагин для продуктов woocommerce.

Атрибуты, уже проиндексированные с помощью Algolia и возвращающиеся в ответе также от Algolia.

Пример содержимого: 

<table class="product-tab"> <tbody> <tr> <td>ABCD Power</td> <td>20 kW </td> </tr> <tr> <td>Volatile</td> <td>Article 63A</td> </tr> <tr> <td>Working File</td> <td>750 cm</td> </tr> <tr> <td>Hard Weight</td> <td>720 kg</td> </tr> </tbody> </table>

В настоящее время отображается с тегами HTML, но я хочу HTML должен быть применен к атрибуту.

Несколько других заметок

  1. Использование Instantsearch

  2. Плагин Wordpress назван search-by-algolia-мгновенные релевантные результаты (я знаю, что он архивирован):)

Файл InstantSearch. php 

var search = instantsearch({
                    appId: algolia.application_id,
                    apiKey: algolia.search_api_key,
                    indexName: algolia.indices.searchable_posts.name,
                    urlSync: {
                        mapping: {'q': 's'},
                        trackedParameters: ['query']
                    },
                    searchParameters: {
                        facetingAfterDistinct: true,
                        highlightPreTag: '__ais-highlight__',
                        highlightPostTag: '__/ais-highlight__'
                    }
                });

search.addWidget(
                    instantsearch.widgets.hits({
                        container: '#algolia-hits',
                        hitsPerPage: 10,
                        escapeHTML: true,
                        templates: {
                            empty: 'No results were found for "<strong>{{query}}</strong>".',
                            item: wp.template('instantsearch-hit')
                        },
                        transformData: {
                            item: function (hit) {

                                function replace_highlights_recursive (item) {                                  
                                  if( item instanceof Object && item.hasOwnProperty('value')) {
                                      item.value = _.escape(item.value);
                                      item.value = item.value.replace(/__ais-highlight__/g, '<em>').replace(/__\/ais-highlight__/g, '</em>');
                                  } else {
                                      for (var key in item) {
                                          item[key] = replace_highlights_recursive(item[key]);
                                      }
                                  }
                                  return item;
                                }

                                hit._highlightResult = replace_highlights_recursive(hit._highlightResult);
                                hit._snippetResult = replace_highlights_recursive(hit._snippetResult);

                                return hit;
                            }
                        }
                    })
                );

Шаблон 

<script type="text/html" id="tmpl-instantsearch-hit">
        <article itemtype="http://schema.org/Article">
            <# if ( data.images.thumbnail ) { #>
            <div class="ais-hits--thumbnail">
                <a href="{{ data.permalink }}" title="{{ data.post_title }}">
                    <img src="{{ data.images.thumbnail.url }}" alt="{{ data.post_title }}" title="{{ data.post_title }}" itemprop="image" />
                </a>
            </div>
            <# } #>

            <div class="ais-hits--content">
                <h2 itemprop="name headline"><a href="{{ data.permalink }}" title="{{ data.post_title }}" itemprop="url">{{{ data._highlightResult.post_title.value }}}</a></h2>
                <div class="excerpt">
                    <p>
            <# if ( data._snippetResult['content'] ) { #>
              <span class="suggestion-post-content">{{{ data._snippetResult['content'].value }}}</span>
            <# } #> 
                    </p>
                    <?php /*<p> <# if ( data.post_excerpt ) { #>
                    <span class="post-short-description">{{ data.post_excerpt }} </span>
                    <# } #></p> */ ?>
                </div>
            </div>
            <div class="ais-clearfix"></div>
        </article>
    </script>

1 Ответ

0 голосов
/ 21 февраля 2020

Просто отвечаю на вопрос для справки. Добавлены фигурные скобки в следующей форме, и это работает. 

<p> <# if ( data.post_excerpt ) { #>
<span class="post-short-description">{{{ data.post_excerpt }}} </span>
<# } #></p>
...