Change the case of an Algolia string

casesensitive
string

#1

Hello, I’m looking to display some images using a product id from my database, which is uppercase, but I need it forced lowercase for the image files to be recognized. Is there a simple way to do this in my PHP implementation of the search? So I need to force lowercase on {{{_highlightResult.item_number.value}}}. Can anyone tell me syntax to do this? Thank you!


#2

Just a nudge here – I posted this a few days ago and was hoping someone could respond. Thanks!


#3

Hey there,

You should be able to do the following things:

  1. Index in lowercase, rather than uppercase
  2. Accept mixed case in your php code
  3. Use the transformData function on the widget, in which you’ll change it with the JS function toLowerCase

Does that work?


#4

Hi @haroen, could you give me an example of syntax here? Unfortunately I’m not understanding what I need at the docs page here: https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/#transformdata-is-replaced-by-transformitems.


#5

I’m assuming you are still talking about transforming the hit, in that case:

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: `
        <article>
          <h1>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</h1>
          <p>{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}</p>
        </article>
      `,
    },
    transformItems(items) {
      return items.map(item => {
        return Object.assign({}, item, {
          _highlightResult: Object.assign({}, item._highlightResult, {
            name: Object.assign({}, item._highlightResult.name, {
              value: item._highlightResult.name.value.toLocaleLowerCase(),
            }),
            description: Object.assign({}, item._highlightResult.description, {
              value: item._highlightResult.description.value.toLocaleUpperCase(),
            }),
          }),
        });
      });
    },
  })
);

While this looks a little daunting, it’s mostly because of the fact that we are multiple levels nested, and I’m using Object.assign to prevent the original item to be rewritten. I have a little demo here: