Footer in Search box

Hi everyone, I’m using autocomplete theme for implementing Algolia search in my websites, and everything is working fine, I want to add this setting at the bottom, Is there any reference on how to add this setting, I didn’t find any relevant articles.

Hey @sauravlal15

I think having this navigation as standard component is a great idea. I’ve mentioned it to the team, but it might be worth cutting an issue in the rep over at GitHub - algolia/autocomplete: 🔮 Fast and full-featured autocomplete library as well.

In the meantime, if you want to build your own navigation, you can include it in a footer section in your template:

This footer section applies if we want to add content after the items list. But here, we want the navigation options to stick at the bottom of the search box.

Hi @sauravlal15

Following up with a suggestion from a colleague:

If they are using autocomplete then they could just do this:

  render({ elements, render, html }, root) {
    const { recentSearchesPlugin, querySuggestionsPlugin, products } = elements;

    render(
      html`<div className="aa-PanelLayout aa-Panel--scrollable">
        <div className="aa-PanelSections">
          <div className="aa-PanelSection aa-PanelSection--left">
            ${recentSearchesPlugin} ${querySuggestionsPlugin}
          </div>
          <div className="aa-PanelSection aa-PanelSection--right">
            ${products}
          </div>
        </div>
        <div className="instructions">
          <h1>Instructions</h1>
        </div>
      </div>`,
      root
    );
  }

This would basically be following the multi-column docs we have Create a multi-column layout with Autocomplete | Autocomplete | Algolia

Not sure if this helps!

1 Like