Shopify App - Search Page is not display products correctly when a product has variants

Shopify App - Search Page is not display products correctly when a product has variants.
For example, when a product has Color variants: Black, Blue, etc.

Would you please look into this? It seems a bug in Algolia javascript.

Here is the error stacktrace from Google Chrome Developer Tools Console.

algolia_helpers.js?16742367298987427471:79 Uncaught (in promise) TypeError: Cannot read property 'value' of undefined
    at Object.fullHTMLTitle (algolia_helpers.js?16742367298987427471:79)
    at Object.<anonymous> (Template.js:135)
    at Object._ (_createHybrid.js:87)
    at e.Template.ls (template.js:203)
    at e.Template.ms (template.js:233)
    at e.Template.s (template.js:124)
    at e.Template.eval [as r] (eval at e.makeTemplate (compiler.js:293), <anonymous>:3:1296)
    at e.Template.ri (template.js:46)
    at e.Template.render (template.js:41)
    at u (Template.js:122)

Here is the function that is erring.

    fullHTMLTitle: function fullHTMLTitle () {
      var res = this._highlightResult.title.value;
      if (!this._distinct && this.variant_title && this.variant_title !== 'Default Title' && this.variant_title !== 'Default') {
        res += ' <span class="algolia-variant">(' + this._highlightResult.variant_title.value + ')</span>';
      }

      return res;
    },

Could you share with us your Algolia index settings, especially the Searchable Attributes one?
You can find it by going to the Settings tab of the app > Synchronize settings > Click the “primary index settings” link.

The behavior you’re experiencing looks a lot like title or variant_title was removed from there.

I found the issue and fix the code locally. The index is populated correctly. The problem is following line has a bug.

    res += ' <span class="algolia-variant">(' + this._highlightResult.variant_title.value + ')</span>';

Should have been

    res += ' <span class="algolia-variant">(' + this.variant_title.value + ')</span>';

Since variant_title is not populated in _highlightResult.

The same bug has been reported previously in other threads, but never addressed properly.

I confirm that the first version of the code is the expected one.
this.variant_title.value should likely show undefined, as this.variant_title is a string.

_highlightResult will contain every highlighted attribute, which are dependent on which searchableAttributes are set in your index, hence my question about your current searchableAttributes.

Which other threads are you referring to?

Sorry. I mistook option 1 as variant title. After adding variant title as Searchable in index it works fine. However, I still think it is probably a good idea to add exception handling or checking whether this._highlightResult.variant_title.value is defined because the code should not throw an unhandled exception, even if variant_title is not in index. If this._highlightResult.variant_title.value is undefined then use this.variant_title.value. This way at least the page will not be blank when variant_title is not searchable. It is just not highlighted.

I can’t find the previous post at this moment. Next time I will bookmark it. What the previous author did was to circumvent the issue by indexing product on the master product level, not variant level. It was posted in 2017 if I remember correctly.

1 Like

Thanks for the update. While you’re correct on the fact that this would allow for the page not to break, this is also a good way for us to get feedback when settings are not correctly propagated.
Isolating the issue would be way harder for us if it didn’t raise an error.

Thanks for the update. Respectfully disagree. variant_title should not be a required field or required to be Searchable. Why should it be a required field and required to be Searchable in the index for the page to work (i.e., not bomb out and be blank)? Also, using unhandled exceptions to get system feedback is a no-no in any software.

Also, using unhandled exceptions to get system feedback is a no-no in any software.

As we’re using a scripting language, there’s a certain amount of errors which we don’t check for and will let the system throw. I personally don’t believe that this is bad practice, doing type checking everywhere would be scattering the code with useless information.

Why should it be a required field and required to be Searchable in the index for the page to work (i.e., not bomb out and be blank)?

The main reason for this is that there’s no situation that I’m aware of where you don’t want people to be able to search in both your product title and variant title.
Those two attributes are the two main signal holders, and whether you’re using size, color, or anything else as a variant option, it should always be useful.
Removing it will almost 100% lower the relevance of your search results.

If you just so happen to be in an exception, and willing to voluntarily remove it, the system throwing an error and the search blanking out is actually a fairly good failsafe, in the sense that it will prevent you from doing it by accident.
Then you have two options:

  1. You’re tech savvy : you can then easily identify the line of the error within your browser console and adjust it yourself
  2. You aren’t : you can then simply revert your change and contact us, so that we can explain to you the reason why we believe this is usually bad idea