How to customize search results layout (masonry tile / insert a banner)

Question 1: Can we modify the search results layout to do something like display a custom banner image?
Locations would be either: 1) before search results begin, masonry style. or 2) After x # of tile items (say after 5th item, display promo banner image).

Question 2: How can I do something like this?: show a specific image if the query is “tie” vs “shoes”?

If instantsearch is “Tie” { show tie-promo-graphic.jpg },
If instantsearch is “Shoes” { show shoes-promo-graphic.jpg }.

Question 1

For this, you can simply add a helper in assets/algolia_helpers.js.liquid.
This helper will have access, through this, to the hit object. You can know its position by using this.__hitIndex.
Use this helper at the beginning of the product template to have this code called for each product.

Question 2

This follow the previous answer.
With this in place, you can also add the search query to the hit object, which you access with this in your helper.
Accessing the search query from the instantsearch.js instance just require you to access search.helper.state.query.
You can simply modify a bit the algolia_instant_search.js.liquid file to add any information to every hit:

    // Hits
    instant.search.addWidget(
      instantsearch.widgets.hits({
        container: '.ais-hits-container',
        hitsPerPage: instant.hitsPerPage,
        templates: {
          empty: instant.templates.empty,
          item: instant.templates.product
        },
        transformData: {
          item: function (product) {
            product.can_order = product.inventory_policy === 'continue' || product.inventory_quantity > 0;
            product.__currentQuery = instant.search.helper.state.query;
            return product;
          }
        }
      })
    );

Then, in your helper, use this.__currentQuery.

1 Like