Change search Button Title on searchBox Widget

Hi,

How could i change the title of reset and submit button on searchBox widget ?

I would like to change it to french language or write what i want !

Thanks

Hi @f.sadem!

To change the UI of the searchBox widget, you can use the connector: https://www.algolia.com/doc/api-reference/widgets/search-box/js/#connector

This will allow you to make the customisation you want to the reset and submit button, but will require a bit of custom work on your end!

I never used connector because the docs was not clear and i’m not an expert in javascript.

Is it better now ???

I’m upgrading instantsearch from v2 to v4 and a lots of simple features are very hard to re-implement (some are deleted and not replaced simply)

It’s a shame we have to build something bigger to simple tasks (like header on panel).

Thanks anyway

Hi,

Sorry for the confusion here, we definitely noted the change in complexity when we changed to panel, but that was done to allow it to be implemented consistently in all widgets, as well as allowing people to have widgets without panels alltogether, which was a common request.

To get back on your question for the title of the submit & reset button, it seems like this was never configurable (neither in v2). I have opened a discussion with our team how to best make it configurable, but for now that isn’t possible.

As a workaround, you could manually change the title every time it renders:

function updateSearchBoxTitles(widgetParams) {
  const container = document.querySelector(widgetParams.container);

  return {
    render() {
      const submit = container.querySelector('.ais-SearchBox-submit');
      const reset = container.querySelector('.ais-SearchBox-reset');

      submit.title = widgetParams.submitTitle;
      reset.title = widgetParams.resetTitle;
    },
  };
}

search.addWidgets([
  instantsearch.widgets.searchBox({
    container: '#searchbox',
  }),

  updateSearchBoxTitles({
    container: '#searchbox',
    resetTitle: 'custom reset',
    submitTitle: 'custom submit',
  }),
]);

here’s that in a demo: https://codesandbox.io/s/ais-ecommerce-demo-app-lkrvv

1 Like

Thanks it’s working !

In V2, i was able to overwrite the button so… i could change the title.

1 Like