Some features aren't implemented for v1

[francisrod01]

I have to ask about it because I've seen that some features aren't implemented or aren't in the docs yet.

Scenario 1 - Brands plugin

I'm creating a brands plugin that calls getAlgoliaFacetHits and plugin it in the main autocomplete, but when I click in the search input, it throws an error:

VM37517:2 POST https://latency-dsn.algolia.net/1/indexes/instant_search/facets/brands/query?x-algolia-agent=Algolia%20for%20JavaScript%20(4.8.6)%3B%20Browser%3B%20autocomplete-core%20(1.0.0-alpha.45)%3B%20autocomplete-js%20(1.0.0-alpha.45) 400 (Bad Request)

searchForFacetValues @ searchForFacetValues.js:89
getAlgoliaFacetHits @ getAlgoliaFacetHits.js:10
getAlgoliaFacetHits @ getAlgoliaFacetHits.js:11
getItems @ brandsPlugin.tsx? [sm]:33

(index):1 Uncaught (in promise) {name: "ApiError", message: "Cannot search in `brands` attribute, you need to add `searchable(brands)` to attributesForFaceting.", status: 400, transporterStackTrace: Array(1)}message: "Cannot search in `brands` attribute, you need to add `searchable(brands)` to attributesForFaceting."name: "ApiError"status: 400transporterStackTrace: Array(1)0: host: {protocol: "https", url: "latency-dsn.algolia.net", accept: 1}request: {data: "{"facetQuery":"","highlightPreTag":"__aa-highlight…ghtPostTag":"__/aa-highlight__","maxFacetHits":5}", headers: {…}, method: "POST", url: "https://latency-dsn.algolia.net/1/indexes/instant_…alpha.45)%3B%20autocomplete-js%20(1.0.0-alpha.45)", connectTimeout: 1, …}response: {content: "{"message":"Cannot search in `brands` attribute, y…brands)` to attributesForFaceting.","status":400}", status: 400, isTimedOut: false}triesLeft: 3__proto__: Objectlength: 1__proto__: 
Promise.then (async)

searchForFacetValues @ searchForFacetValues.js:89
getAlgoliaFacetHits @ getAlgoliaFacetHits.js:10
getAlgoliaFacetHits @ getAlgoliaFacetHits.js:11
getItems @ brandsPlugin.tsx? [sm]:33

overlay.js:273 Could not consume error: Error: Something is *really* wrong.
    at overlay.js:266

There's no doc for this, only this section that's not for this javascript library:

How to Declare Attributes for Faceting:
https://www.algolia.com/doc/guides/managing-results/refine-results/faceting/how-to/declaring-attributes-for-faceting/

Scenario 2 - Products plugin

When the user clicks on the "Add to cart" button, the page will call for AlgoliaAnalytics.convertedObjectIDsAfterSearch that throws an error:

required queryID parameter was not sent, conversion event can not be properly sent without
    at AlgoliaAnalytics.convertedObjectIDsAfterSearch

Scenario 3 - Algolia's logo:

There's no doc for adding the Algolia logo in the hits' results. I put a "Footer" message where should be the suggestions' footer place.

🔗 Link for reproduction:
https://codesandbox.io/s/algolia-autocomplete-starter-forked-sgwsq

ℹ️ Sources related to this question:

• feat(core): introduce Requester API feat(core): introduce Requester API #540
• https://autocomplete.algolia.com/docs/api
• https://github.com/algolia/autocomplete#sandboxes

When I search for it on the internet, I found only docs related to other JavaScript libraries:
https://www.algolia.com/doc/guides/managing-results/refine-results/faceting/how-to/declaring-attributes-for-faceting/

[Haroenv]

1. this is unrelated to autocomplete v1, to search within a facet you will always have had to set up your attribute for searchable faceting. The documentation link you reference is correct, the attributes for faceting are set up with settings or the dashboard.

2. This should work, but it's possible the queryid wasn't requested. Do you have code for what you ran here, the sandbox you linked doesn't have this issue, and I can see the queryID in the resulting network request

3. This is a great point! In the mean time you can find the logo here: https://www.algolia.com/press/?section=brand-guidelines, but we will make sure you can add the logo out of the box

[francisrod01]

Thanks for answering!!
The docs I'm using is https://autocomplete.algolia.com/docs/api
(2) I'll update the description with more information.

[francisrod01]

Hi @Haroenv, I just updated the description about scenario 2.

[francoischalifour]

(2) You need to pass clickAnalytics: true to the search params.
(3) We're working on the Layout API in #499 that will allow to add the Algolia logo to the footer. We'll release this shortly.

[francisrod01]

Hi @francoischalifour! Thanks for answering! I'm already using it in my reproduction code example.
This only happens if I'm using it as an Autocomplete plugin, but not if I use getSources > getItems() in autocomplete({}) as in Algolia's example:
https://codesandbox.io/s/autocomplete-starter-lobbu

[francoischalifour]

You're right, since #540 we apparently forgot to implement the layer that brought compatibility with Insights. I'll take care of this today.

Thanks for the bug report!

[francoischalifour]

Fix sent in #562.

[francisrod01]

Something that would be amazing is reusing the "Fill query" functionality as an attribute (or property, flag) for plugins implementations, such as brands, categories, products, so on. I mean, the method onTapAhead() method I've seen in other Algolia's code reproductions before. It's commented on my productsPlugin.tsx file.

Scenario 2 - we can implement this with a custom getSource({ onTapAhead }). I haven't tried an implementation for it using a plugin yet because I need to understand it well.

[francisrod01]

Case 3, if I select a product, it's not filling the search field with that product name.

[francoischalifour]

If you want the query to update after selecting a product item, you can provide getItemInputValue to your source:

const source = {
  getItemInputValue({ item }) {
    return item.name;
  },
  // ...
};

[francisrod01]

It's here but it's not working.

[francoischalifour]

I created an example in this sandbox to show you how it works.

[francisrod01]

I see, It won't be enabled if I also implement the getItemUrl({ item }). It makes sense.

[francisrod01]

@francoischalifour For this version we have implemented:

• brands plugin
• products plugin w/ insights events
• Algolia logo
• Transform response for hits

Not enough doc for getAlgoliaResults

https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-preset-algolia/getAlgoliaResults/#param-transformresponse

A code sandbox for reproduction:
https://codesandbox.io/s/algolia-autocomplete-starter-forked-sgwsq?file=/productsPlugin.tsx:7398-7858

Property 'popularity' does not exist on type 'Hit<WithAutocompleteAnalytics<Hit<ProductRecord>>>[]'.ts(2339

Based on the suggestions w/ hits sandbox:
https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/sandboxes/#query-suggestions-with-hits

My issue is to transform the price and popularity before rendering the items:

transformResponse({ hits }) {
  return hits.map((hit) => ({
    ...hit,
    comments: hit.popularity % 100,
    sale: hit.free_shipping,
    // eslint-disable-next-line @typescript-eslint/camelcase
    sale_price: hit.free_shipping
      ? (hit.price - hit.price / 10).toFixed(2)
      : hit.price
  }));
}

Previously implemented by getSources -> getItems() as below:

export function createProductsPlugin({
  searchClient
}: CreateProductsPluginProps): AutocompletePlugin<ProductHit, undefined> {
  return {
    getSources({ query, state, setContext }) {
      return [
        {
          sourceId: "productsPlugin",
          getItems() {
            return getAlgoliaResults<ProductHit>({
              searchClient,
              queries: [
                {
                  indexName: "instant_search",
                  query,
                  params: {
                    clickAnalytics: true,
                    hitsPerPage: 8,
                    attributesToSnippet: ["name:10", "description:35"],
                    snippetEllipsisText: "…"
                  }
                }
              ],
            })
            .then(([result]) => {
              setContext({ nbProducts: result.nbHits });

              return result.hits.map((hit) => ({
                ...hit,
                comments: hit.popularity % 100,
                sale: hit.free_shipping,
                // eslint-disable-next-line @typescript-eslint/camelcase
                sale_price: hit.free_shipping
                  ? (hit.price - hit.price / 10).toFixed(2)
                  : hit.price
              }));
            });
          },
          getItemInputValue({ item }) {
            return item.name;
          },

[francoischalifour]

hits is an array of array so you likely need to do this:

getAlgoliaResults({
  // ...
  transformResponse({ hits }) {
    return hits[0].map((hit) => ({
      ...hit,
      comments: hit.popularity % 100,
      sale: hit.free_shipping,
      // eslint-disable-next-line @typescript-eslint/camelcase
      sale_price: hit.free_shipping
        ? (hit.price - hit.price / 10).toFixed(2)
        : hit.price,
    }));
  },
});

[francisrod01]

I could see that in the codesandbox @algolia/autocomplete - example preview panel in modal mentioned in this article https://www.algolia.com/blog/ux/replicating-the-algolia-documentation-search-with-autocomplete/

Great article, by the way. :)