Footer in Search box

Open Q&A
, , , ,
1

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.

Screenshot 2023-03-01 at 3.59.35 PM
Screenshot 2023-03-01 at 3.59.35 PM770×138 10.6 KB

2

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:

3

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.

4

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