Shopify -- change title of metafield facet on search results page

We have successfully implemented a new facet on our search results page based on a product variant metafield. This metafield defines how much shipping time the customer can expect the product to arrive in.

However, the manufacturer of the prioduct writes the values in a non-UX-friendly way. Their values are:

  • available
  • 14-21 days
  • stock item
  • drop ship only

We are hoping to change the front end view to something like this:

  • 21+ days
  • 14-21 days
  • 2-3 days
  • 1-2 days

Is there any way to do this in Algolia without touching the metafield values?

Hi @james.zedd,

Thanks for contacting Algolia!

From your post, it sounds like you have an attribute, let’s say it’s “metafield”, that you made into an attribute for faceting. You want to manipulate the displayed values without touching the underlying values. Is that right?

If you have a facet and are using the refinementList widget, you can use the transformData parameter to manipulate the displayed data.

Below is a codesandbox using our sample products index. In it, we take the attribute for faceting “brand” and manipulate some names so that they display differently (“Samsung” > “New Samsung”; “Apple” > "emoji Apple).

How does that work for you?

Hello @ajay.david Thank you for your help with this.

I cannot find the refinementList widget within my Shopify theme files. Is there another place I should be looking for it?

Hi @james.zedd,

I should have asked, now that you have this “metafield” facet in your products, is it your goal to have a refinementList (where you click/select in a menu and it filters the results) or do you have another goal for the UX?

I did not mean to assume and just want to confirm your goal.

Thanks!

@ajay.david thank you for your reply. My goal is to change the filter titles of the metafield values that are now coming up as filters.

Here’s what the facet looks like now …

27-15-15-05

The goal is to change the four options (available, Stock Item, 14-21 Days, Drop Ship Only) to different titles (1-2 Days, etc.) but still use the same metafield data to filter the results.

Hey @james.zedd,

I am Alex developer at Algolia, working on Shopify. Yes this is totally possible. Simply go in the file called
algolia_facets.js.liquid and look for :

algolia.facetSortFunctions = {
// some code
}

and replace it with :

algolia.facetDisplayFunctions = {
price_range: function displayRange (value) {
var values = value.split(’:’);

  return _.map(values, function (e) {
    return algolia.formatMoney(+e * 100).replace(/\.\d+/, '');
  }).join(' - ');
},
'meta.ships_in': function displayName(name) {
  if (name == 'available') {
    return '21+ days';
  }
}

}

Let me know how that goes.

Thanks,

Alex

Hello @alexandre.page. Thank you for your time on this.

I have attempted to install the code change you have suggested above. Unfortunately it did not work on our store.

Here is the code update I have made to algolia_facets.js.liquid

algolia.facetSortFunctions = {
  price_range: sortByRefined(function sortRanges (a, b) {
    if (a.name.length === b.name.length) {
      return a.name.localeCompare(b.name);
    }
    return a.name.length - b.name.length;
  })
};
algolia.facetDisplayFunctions = {
  price_range: function displayRange (value) {
    var values = value.split(':');

    return _.map(values, function (e) {
      return algolia.formatMoney(+e * 100).replace(/\.\d+/, '');
    }).join(' - ');
  },
  'meta.ships_in': function displayName(name) {
    if (name == 'available') {
      return '21+ days';
    }
  }
} 

Is there something I am doing incorrectly?

Hi @james.zedd

Sorry if it was not clear but ‘meta.ships_in’ is just an example and the facet might be named differently. It needs to correspond to the field meta in the Algolia Dashboard for one product that have the facet. I did take a look at your facets on your website and it sounds that the facet is store in meta.availability.type.
Here is the updated snippet of code :

algolia.facetDisplayFunctions = {
  'meta.availability.type': function displayName(name) {
    if (name == 'available') {
      return '21+ days';
    }
  }
} 

Does that help ?

Thanks,

Alex

Hi @alexandre.page. Thank you for clarifying. This did fix the problem we were having.

Thank you for your efforts in this!

1 Like

Hello @alexandre.page

We have discovered that while this is a great solution for the initial render of the search results page, once a customer clicks on a facet within the “Ships In” widget, the Selected Filters widget displays the original name of the metafield. Screen shot: http://nimb.ws/9Uhps4

Any suggestions on how to fix this within the code?

Hey @james.zedd,

Sorry for the late delay. You’re right, the problem here come from the currentRefinedValues widget.
I believe the following snippets of code should fix your issue (it is defined in algolia_instant_search.js around line 236)

// Current refined values
var attributes = _.map(instant.facets.shown, function (facet) {
  var displayFunction = algolia.facetDisplayFunctions[facet.name];
  return {
    name: facet.name,
    label: facet.title,
    transformData: function (value) {
      if (displayFunction) {
        value.name = displayFunction(value.name);
      }
      return value;
    }
  }
});

Let me know if you have other questions :slight_smile:

Alex

Hi @alexandre.page

Thank you for the update on this. I have tested this in our development environment and your code is working as expected.

Thank you once again for your help!

1 Like