Clarification on Customizing the UI with connectHits?

[seanvandermolen]

The documentation is confusing me when it comes to context. I'm using instantsearch.js within the WebDevStudios / wp-search-with-algolia plugin.

The issue I'm trying to solve: The default hit is wrapping the widget template in <ol> <li> and I'm trying to remove that. The documentation is a bit confusing when I'm looking at these when creating a render function.

Hits: const { hits } = renderOptions; But then it queries an element in the DOM? document.querySelector('#hits').innerHTML =
Results: const { results } = renderOptions; also queries the DOM document.querySelector('#hits').innerHTML =
wdgetParams: const { widgetParams } = renderOptions; appears to focus in on widget params but to me this widgetParams.container.innerHTML = '...'; looks like what I want, but nothing is working. It's not rendering anything.

Besides the confusion around said... what I'm working with.

The original code to instantiate hits

/* Hits widget */
instantsearch.widgets.hits({
  container: '#algolia-hits',
  hitsPerPage: 10,
  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;
    },
  },
});

What I'm doing

Before search.addWidget

// Create the render function
const renderHits = (renderOptions, isFirstRender) => {
  const { hits, widgetParams } = renderOptions;

  widgetParams.container.innerHTML = `
                <ul>
                ${hits
                  .map(
                    (item) =>
                      `<li>
                        ${instantsearch.highlight({
                          attribute: 'name',
                          hit: item,
                        })}
                        </li>`
                  )
                  .join('')}
                </ul>
            `;
};

// 2. Create the custom widget
const dshits = instantsearch.connectors.connectHits(renderHits);

Replaced the original instantiate with

                dshits({
                    container: '#algolia-hits',
                    hitsPerPage: 10,
                    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;
                        }
                    }
                }),

This is returning nothing... not even an error.

I'm positive the original template is coming from Hits.tsx, though mine looks a bit different. The plugin instantsearch.js is wrapped in is probably using an older version. This is what I have.

var Hits = function Hits(_ref) {
  var results = _ref.results,
    hits = _ref.hits,
    bindEvent = _ref.bindEvent,
    cssClasses = _ref.cssClasses,
    templateProps = _ref.templateProps;

  if (results.hits.length === 0) {
    return (0, _preact.h)(
      _Template.default,
      _extends({}, templateProps, {
        templateKey: 'empty',
        rootProps: {
          className: (0, _classnames.default)(
            cssClasses.root,
            cssClasses.emptyRoot
          ),
        },
        data: results,
      })
    );
  }

  return (0, _preact.h)(
    'div',
    {
      className: cssClasses.root,
    },
    (0, _preact.h)(
      'ol',
      {
        className: cssClasses.list,
      },
      hits.map(function (hit, index) {
        return (0, _preact.h)(
          _Template.default,
          _extends({}, templateProps, {
            templateKey: 'item',
            rootTagName: 'li',
            rootProps: {
              className: cssClasses.item,
            },
            key: hit.objectID,
            data: _objectSpread(
              _objectSpread({}, hit),
              {},
              {
                __hitIndex: index,
              }
            ),
            bindEvent: bindEvent,
          })
        );
      })
    )
  );
};

Hits.defaultProps = {
  results: {
    hits: [],
  },
  hits: [],
};
var _default = Hits;
exports.default = _default;

What should the render function look like to render the item/ hit without being wrapped in <ol> <li> elements?

I should add I've tried all variations of the render function. Some of these return text for each result (I forget the exact verbiage) but it was obviously not right. I'm missing how to get a clean hit returned so the widget template can do its thing.

Edit: Including the widget template for reference

<script type="text/html" id="tmpl-instantsearch-hit">

        <div class="col-md-6 col-lg-4 col-xxl-3 mb-4" >
            <div class="card h-auto mb-5 d-flex text-center product-card ais-hits--content">
                    <# if ( data.images.thumbnail ) { #>
                    <a href="{{ data.permalink }}" title="{{ data.post_title }}" class="ais-hits--thumbnail-link">
                        <img src="{{ data.images.thumbnail.url }}" alt="{{ data.post_title }}" title="{{ data.post_title }}" itemprop="image" />
                    </a>
                    <# } #>
                <div class="card-body d-flex flex-column">

                    <!-- Title -->
                    <h2 itemprop="name headline" class="blog-post-title">
                        <a href="{{ data.permalink }}" title="{{ data.post_title }}" class="ais-hits--title-link" itemprop="url">
                            {{{ data._highlightResult.post_title.value }}}
                        </a>
                    </h2>
                    <!-- Meta -->

                    <small class="text-muted mb-2 d-inline-flex align-items-center">
                    <h5 class="d-flex me-2">SKU</h5><span class="mb-1"> {{{ data._highlightResult.sku.value }}} </span>
                    </small>

                    <div class="add-to-cart-container mt-auto">
                        <a class="btn btn-primary" href="{{ data.permalink }}" role="button" itemprop="url">Shop</a>
                    </div>
                </div>
            </div>
        </div>

</script>

[tkrugg]

I think it might just be that your widgetParams.container.innerHTML line is assuming container is a DOM element, while you're passing a string when instantiating (container: '#algolia-hits')

Maybe just do document.querySelector(widgetParams.container).innerHTML = ... intsead.
Quick example: https://codesandbox.io/s/objective-water-tv1hy5?file=/src/app.js

[seanvandermolen]

Thanks for the reply!

With the container using #hits (which isn't used on the page template) I get an error

If I use the '#algolia-hits' container in the template it works in the sense that I see its using the demo data UL instead of OL but I get this output.

[seanvandermolen]

Now that I'm looking at the error... do I even want or need .join for my purpose? Am I interpreting this right? It's wrapping all this after the fact... I guess I'm confused on the order of rendering.

[tkrugg]

the error just says there is not #hits element on your page.
document.querySelector(...) is null
just double check there is a <div id="hits"></div> on your HTML page, you should be good to go.

[seanvandermolen]

Yes, the first error regarding the DOM element was just based on their recommended configuration. Which I tried blindly in case there was something I was just missing. In fact, the #hit needed to be #algolia-hits, which returns results. However, the results are not rendered. This is my template page with a custom rendered widget which still does not work.

<?php
/**
 * WP Search With Algolia instantsearch template file.
 *
 * @author  WebDevStudios <[email protected]>
 * @since   1.0.0
 *
 * @version 2.0.0
 * @package WebDevStudios\WPSWA
 */

get_header();

?>
<div id="content" class="site-content container-fluid py-5 mt-4">
  <!-- Breadcrumb -->
    <?php woocommerce_breadcrumb(); ?>
    <div id="primary ais-wrapper" class="content-area">
        <main id="ais-main main" class="site-main">
            <!-- Hook to add something nice -->
            <?php bs_after_primary(); ?>
            <div class="row">
                <div class="col">
                    <div class="algolia-search-box-wrapper">
                        <div id="algolia-search-box"></div>
                        <svg class="search-icon" width="25" height="25" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M24.828 31.657a16.76 16.76 0 0 1-7.992 2.015C7.538 33.672 0 26.134 0 16.836 0 7.538 7.538 0 16.836 0c9.298 0 16.836 7.538 16.836 16.836 0 3.22-.905 6.23-2.475 8.79.288.18.56.395.81.645l5.985 5.986A4.54 4.54 0 0 1 38 38.673a4.535 4.535 0 0 1-6.417-.007l-5.986-5.986a4.545 4.545 0 0 1-.77-1.023zm-7.992-4.046c5.95 0 10.775-4.823 10.775-10.774 0-5.95-4.823-10.775-10.774-10.775-5.95 0-10.775 4.825-10.775 10.776 0 5.95 4.825 10.775 10.776 10.775z" fill-rule="evenodd"></path></svg>
                        <div id="algolia-stats"></div>
                    </div>
                    <div id="algolia-hits"></div>
                    <nav id="algolia-pagination"></nav>
                </div>
                <div class="col-md-3 col-xxl-2 mt-4 mt-md-0">
                    <aside id="secondary" class="widget-area">
                    <!-- sidebar -->
                    <aside id="dees-facets">
                        <div class="d-none">
                            <h3 class="widgettitle"><?php esc_html_e( 'Post Types', 'wp-search-with-algolia' ); ?></h3>
                            <section class="ais-facets" id="facet-post-types"></section>
                        </div>
                        <div>
                            <h3 class="widgettitle"><?php esc_html_e( 'Categories', 'wp-search-with-algolia' ); ?></h3>
                            <section class="ais-facets" id="facet-categories"></section>
                        </div>
                        <div>
                            <h3 class="widgettitle"><?php esc_html_e( 'Tags', 'wp-search-with-algolia' ); ?></h3>
                            <section class="ais-facets" id="facet-tags"></section>
                        </div>
                        <div class="d-none">
                            <h3 class="widgettitle"><?php esc_html_e( 'Users', 'wp-search-with-algolia' ); ?></h3>
                            <section class="ais-facets" id="facet-users"></section>
                        </div>
                    </aside>
                    <!-- #secondary -->
                </div>
            </div>
        </main><!-- #main -->
    </div><!-- #primary -->
</div><!-- #content -->

<script type="text/html" id="tmpl-instantsearch-hit">

        <div class="col-md-6 col-lg-4 col-xxl-3 mb-4" >
            <div class="card h-auto mb-5 d-flex text-center product-card ais-hits--content">
                    <# if ( data.images.thumbnail ) { #>
                    <a href="{{ data.permalink }}" title="{{ data.post_title }}" class="ais-hits--thumbnail-link">
                        <img src="{{ data.images.thumbnail.url }}" alt="{{ data.post_title }}" title="{{ data.post_title }}" itemprop="image" />
                    </a>
                    <# } #>
                <div class="card-body d-flex flex-column">

                    <!-- Title -->
                    <h2 itemprop="name headline" class="blog-post-title">
                        <a href="{{ data.permalink }}" title="{{ data.post_title }}" class="ais-hits--title-link" itemprop="url">
                            {{{ data._highlightResult.post_title.value }}}
                        </a>
                    </h2>
                    <!-- Meta -->

                    <small class="text-muted mb-2 d-inline-flex align-items-center">
                    <h5 class="d-flex me-2">SKU</h5><span class="mb-1"> {{{ data._highlightResult.sku.value }}} </span>
                    </small>

                    <div class="add-to-cart-container mt-auto">
                        <a class="btn btn-primary" href="{{ data.permalink }}" role="button" itemprop="url">Shop</a>
                    </div>
                </div>
            </div>
        </div>

</script>

<script type="text/javascript">
    jQuery(function() {
        if(jQuery('#algolia-search-box').length > 0) {

            if (algolia.indices.searchable_posts === undefined && jQuery('.admin-bar').length > 0) {
                alert('It looks like you haven\'t indexed the searchable posts index. Please head to the Indexing page of the Algolia Search plugin and index it.');
            }

            /* Instantiate instantsearch.js */
            var search = instantsearch({


                indexName: algolia.indices.searchable_posts.name,
                searchClient: algoliasearch( algolia.application_id, algolia.search_api_key ),
                routing: {
                    router: instantsearch.routers.history({ writeDelay: 1000 }),
                    stateMapping: {
                        stateToRoute( indexUiState ) {
                            return {
                                s: indexUiState[ algolia.indices.searchable_posts.name ].query,
                                page: indexUiState[ algolia.indices.searchable_posts.name ].page
                            }
                        },
                        routeToState( routeState ) {
                            const indexUiState = {};
                            indexUiState[ algolia.indices.searchable_posts.name ] = {
                                query: routeState.s,
                                page: routeState.page
                            };
                            return indexUiState;
                        }
                    }
                }

            });

            // Create the render function
            const renderHits = (renderOptions, isFirstRender) => {
            const { hits, widgetParams } = renderOptions;

            document.querySelector(widgetParams.container).innerHTML = `
                    <ul>
                    ${hits
                    .map(
                        (item) =>
                        `<li>
                            ${instantsearch.highlight({ attribute: 'name', hit: item })}
                            </li>`
                    )
                    .join('')}
                    </ul>
                `;
            };

            // 2. Create the custom widget
            const dshits = instantsearch.connectors.connectHits(renderHits);

            search.addWidgets([

                /* Search box widget */
                instantsearch.widgets.searchBox({
                    container: '#algolia-search-box',
                    placeholder: 'Search for...',
                    showReset: false,
                    showSubmit: false,
                    showLoadingIndicator: false,
                }),

                /* Stats widget */
                instantsearch.widgets.stats({
                    container: '#algolia-stats'
                }),

                dshits({
                    container: '#algolia-hits',
                    templates: {
                    item: `
                        <div>
                        <img src="{{image}}" align="left" alt="{{name}}" />
                        <div class="hit-name">
                            {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
                        </div>
                        <div class="hit-description">
                            {{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
                        </div>
                        <div class="hit-price">\${{price}}</div>
                        </div>
                    `,
                    },
                }),

                // dshits({
                //     container: '#algolia-hits',
                //     hitsPerPage: 10,
                //     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;
                //         }
                //     }                
                // }),


                /* Hits widget */
                // instantsearch.widgets.hits({
                //     container: '#algolia-hits',
                //     hitsPerPage: 10,
                //     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;
                //         }
                //     }
                // }),

                /* Pagination widget */
                instantsearch.widgets.pagination({
                    container: '#algolia-pagination',
                    cssClasses: {
                        list: 'pagination',
                        item: 'page-item',
                        link: 'page-link'
                    },
                }),

                /* Post types refinement widget */
                instantsearch.widgets.menu({
                    container: '#facet-post-types',
                    attribute: 'post_type_label',
                    sortBy: ['isRefined:desc', 'count:desc', 'name:asc'],
                    limit: 10,
                }),

                /* Categories refinement widget */
                instantsearch.widgets.hierarchicalMenu({
                    container: '#facet-categories',
                    separator: ' > ',
                    sortBy: ['count'],
                    attributes: ['taxonomies_hierarchical.category.lvl0', 'taxonomies_hierarchical.category.lvl1', 'taxonomies_hierarchical.category.lvl2'],
                }),

                /* Tags refinement widget */
                instantsearch.widgets.refinementList({
                    container: '#facet-tags',
                    attribute: 'taxonomies.post_tag',
                    operator: 'and',
                    limit: 15,
                    sortBy: ['isRefined:desc', 'count:desc', 'name:asc'],
                }),

                /* Users refinement widget */
                instantsearch.widgets.menu({
                    container: '#facet-users',
                    attribute: 'post_author.display_name',
                    sortBy: ['isRefined:desc', 'count:desc', 'name:asc'],
                    limit: 10,
                }),

            ]);

            /* Start */
            search.start();

            jQuery( '#algolia-search-box input' ).attr( 'type', 'search' ).trigger( 'select' );

        }
    });
</script>
<?php
get_footer();

This config produces this result