Shopify - Hide out of stock product or remove out of stock product from index

Hello,

I’m looking for some guidance with the Shopify Algolia app.

I would like to either hide out of stock product from the results or ideally, when a product goes out of stock, remove it from the index.

Thanks,

I apologize for the delay for this answer, which was a bit tricky to write.
I wanted to think of the best solution for it.

First of all, doing it in the back-end would actually be tricky, borderline impossible.
The reason for that is that:

  1. we’re indexing the product with its current stock and on each order webhook call, we simply decrement the inventory_quantity of this variant
  2. Algolia is asynchronous

Since we don’t have the full product info at order time, we don’t know the current quantity. Since Algolia is asynchronous, we can’t just do a request to get the current inventory quantity because it might change with queued jobs that haven’t be processed. We’re trying to keep our amount of requests to Shopify as low as possible, and asking on each order to retrieve the associated variant would have a cost at indexing time.

It could be handled in the front-end but you would have some tricky edge cases to handle. We’re using the currentRefinedValues widget of instantsearch.js, and in the current version of instantsearch.js, adding a filter but getting it not to display in the list is a not trivial task.

However, there is one thing that could be done and which would be fairly simple: creating an API key with filters built-in. This is a really powerful feature that allows you to force some query time parameters with the API key directly. You can’t do this with our dashboard, this is something which needs to be done with code, but fortunately, it’s fairly simple.

Create a file algolia_api_key.html with this content on your machine:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/algoliasearch/3.22.1/algoliasearch.min.js"></script>
    <script type="text/javascript">
      var client = algoliasearch('FIXME_APP_ID', 'FIXME_ADMIN_API_KEY', { protocol: 'https:' });
      client.addApiKey(['search'], {
        description: 'Shopify Api Key for in-inventory products',
        // You can find your index prefix in the Settings tab of the app.
        // For shopify_ , here we expect 'shopify_products*'
        indexes: ['FIXME_INDEX_PREFIXproducts*'], 
        queryParameters: {
          filters: 'inventory_quantity>0'
        }
      }, function(err, content) {
        if (err) {
          document.write(err);
          return;
        }
        document.write('Key:' + content['key']);
      });
    </script>
  </body>
</html>

Replace the FIXMEs and then load this file in a browser (File > Open). If everything went fine, you should have an API key created an displayed in your page. Copy it and save it somewhere.

Now in your theme files, we’ll need just a few modification to use this API key:

--- a/assets/algolia_init.js.liquid
+++ b/assets/algolia_init.js.liquid
@@ -14,7 +14,9 @@
   algolia.storeName = window.location.hostname.replace(/^www\./, '').replace(/^([^.]*)\..*$/, '$1');

   /* Client setup */
+  algolia.config.products_api_key = 'FIXME_YOUR_NEW_API_KEY';
   algolia.client = algoliasearch(algolia.config.app_id, algolia.config.search_api_key);
+  algolia.productsClient = algoliasearch(algolia.config.app_id, algolia.config.products_api_key);
   algolia.templates = {};
   algolia.indices = {};
   algolia.full_results = window.location.href.match(/\/search/);


--- a/assets/algolia_autocomplete.js.liquid
+++ b/assets/algolia_autocomplete.js.liquid
@@ -7,7 +7,11 @@
   var autocomplete;

   function index (name) {
-    return algolia.client.initIndex('' + algolia.config.index_prefix + name);
+    var index_name = '' + algolia.config.index_prefix + name;
+    if (name === 'products') {
+      return algolia.productsClient.initIndex(index_name);
+    }
+    return algolia.client.initIndex(index_name);
   }

   function autocompleteSection (section) {


--- a/assets/algolia_instant_search.js.liquid
+++ b/assets/algolia_instant_search.js.liquid
@@ -20,7 +20,7 @@
     poweredBy: algolia.config.powered_by,
     search: instantsearch({
       appId: algolia.config.app_id,
-      apiKey: algolia.config.search_api_key,
+      apiKey: algolia.config.products_api_key,
       indexName: '' + algolia.config.index_prefix + 'products',
       urlSync: {}
     }),

Just remove the lines prefixed with a - and add the lines prefixed with a + (obviously without the +). The rest is just here for context.

With this in place, you should be good to go!

1 Like

As a follow-up to this question, I’d now recommend you to look at this post which aggregates information from here and other topics:

not work for me, can you help me?

Yep, this doesn’t work for me either.