Hide pricing in instant search results in Shopify for tagged products

Hi, I want to hide pricing if products of a SHopify store are tagged with product tags “view_pricing” or “offline”. I believe I need to edit this file snippets/algolia_autocomplete_product.hogan.liquid, but I can’t make it work. 2018-08-14 09_57_04-Window

Hello @tabarnapp,

I am Alex, developer at Algolia ! Interesting question I see here :slight_smile:

Although I see what you have in mind, I don’t recommend modifying the liquid template. I believe the cleanest way of doing this thing should be done in algolia_helpers.js.liquid, the reason for that is we don’t modify the view but rather the logic which displays it. Also, we will write a reusable piece of code that can be apply easily on both the autocomplete price helper and the instant search price helper.

In algolia_helpers.js you can define a function like this one :

  function shouldHidePrice(tags) {
    return tags.includes('algolia-ignore-price');
  };

(Be careful to not put this inside the algolia.helpers array)

To hide the price on the autocomplete part, just modify the helpers function autocompletePrice with the following code :

    autocompletePrice: function autocompletePrice (text, render) {
      if (!shouldHidePrice(this.tags)) {
        if (this._distinct) {
          var min = this.variants_min_price;
          var max = this.variants_max_price;
          if (min !== max) {
            return '<b>' + formatPrice(min) + ' - ' + formatPrice(max) + '</b>';
          }
        }
        return formattedPriceWithComparison(this.price, null);
      }
    },

The same logic apply for the instant search page :

    instantsearchPrice: function instantsearchPrice (text, render) {
      if (!shouldHidePrice(this.tags)) {
        if (this._distinct) {
          var min = this.variants_min_price;
          var max = this.variants_max_price;
          if (min !== max) {
            return '<b>' + formatPrice(min) + ' - ' + formatPrice(max) + '</b>';
          }
        }
        return formattedPriceWithComparison(this.price, this.compare_at_price, this.price_ratio);
      }
    },

Let me know if that works and/or have other questions!

2 Likes

That works! Thanks a lot!