Shopify App - Faceting not display correctly on Search Page - when a facet attribute name contains space

Shopify App - Faceting is not display correctly on Search Page when a facet attribute name contains space. For example, we have a facet attribute named “Country of Origin”. Once you add it to the Active Facets, the search result page is not displaying both Faceting Section on left and Search Results section.

Here is HTML / javascript error from Chrome Developer Tools Console.

Is this a bug in Algolia Shopify script? How do you fix this? Thanks!

utils.js:46 Uncaught Error: Container must be `string` or `HTMLElement`. Unable to find [class~='ais-facet-named_tags.Country Of Origin']
    at i (utils.js:46)
    at Object.i [as refinementList] (refinement-list.js:105)
    at algolia_instant_search.js?7739603356955040873:257
    at Kn (lodash.min.js:10)
    at Function.<anonymous> (lodash.min.js:41)
    at HTMLDocument.<anonymous> (algolia_instant_search.js?7739603356955040873:256)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.J (jquery.min.js:2)

Indeed, we didn’t expect for named tags to contain spaces, thanks for sharing those details with us.
I’ve commited a fix, which should be deployed in the next few days.
You’ll simply have to reinstall us in your theme then for it to be applied.

Can’t wait to see your fix. Did you simply replace the space with dash in the css style name? It would be interesting how you fixed it. I fixed it locally. It was slightly tricky with hogan template because you need a handle for css style name value while keeping the named tag name value intact for other things.

Here’s the diff I committed:

--- a/assets/algolia_facets.js.liquid
+++ b/assets/algolia_facets.js.liquid
@@ -67,7 +67,8 @@
     count: 'ais-facet--count'
   };

-  algolia.facets = _.filter(algolia.config.facets, function (facet) { return facet.enabled || parseInt(facet.enabled); });
+  var enabledFacets = _.filter(algolia.config.facets, function (facet) { return facet.enabled || parseInt(facet.enabled); });
+  algolia.facets = _.map(enabledFacets, function (facet) { return Object.assign({}, facet, { escapedName: encodeURIComponent(facet.name) }) });
   algolia.shownFacets = _.filter(algolia.facets, function (facet) { return facet.type !== 'hidden' });
   algolia.hiddenFacets = _.filter(algolia.config.facets, function (facet) { return facet.type === 'hidden'; });
   algolia.facetTitles = {};
@@ -78,7 +79,7 @@
     var widget = TYPES_TO_WIDGET[facet.type],
         params = _.cloneDeep(widget.params) || {};

-    params.container = "[class~='ais-facet-" + facet.name + "']";
+    params.container = "[class~='ais-facet-" + facet.escapedName + "']";
     params.attributeName = facet.name;
     params.templates = {};
     params.cssClasses = algolia.facetCssClasses;
--- a/snippets/algolia_instant_search.hogan.liquid
+++ b/snippets/algolia_instant_search.hogan.liquid
@@ -5,7 +5,7 @@
   <div class="ais-facets">
       <div class="ais-current-refined-values-container"></div>
     [[# facets ]]
-      <div class="ais-facet-[[ type ]] ais-facet-[[ name ]]"></div>
+      <div class="ais-facet-[[ type ]] ais-facet-[[ escapedName ]]"></div>
     [[/ facets ]]
   </div>
   <div class="ais-block">

I basically created a new field specifically for the CSS class. To encode safely any character which might be causing issues, I used encodeURIComponent.

The new version has just been released.
You should be able to reinstall our front-end code in your theme from the Display tab of the app to have it applied.