Shopify - Manually order specific collection

I need manually sort/order a collection called mens-pants-leggings,
Ideally, this information should come from Shopify:

Link to 01 - Shopify configuration

I’ve searched for solutions on this forum and the closest one seems this one, but unfortunately it does not work because we are using “react-instantsearch-dom” plugin.

My second idea is to use the dashboard query rule, but unfortunately I didn’t found a way of target this specific collection on the dashboard.

Screenshot from 2018-12-27 13-58-39

There’s any solution or work around for manually sort this collection?
Many Thanks :+1:

cc @charly.poly @alexandre.page :grinning:

Hi @marketing4,

Thanks for reaching out!

In order to create Query Rule on a specific collection page, for example, having a specific product at the first place for the “Dresses” collection, you will have to follow those steps:

1. Update your theme’s instant search code to provide Query Rule context

Go to your theme code via the Shopify Admin and edit the algolia_instant_search.liquid.js file.
You will have to add a custom code snippet in the searchFunction() (around line 48).
Just before the line: helper.setPage(page);, add the following:

  if (!!collectionFacetValue) {
    helper.setQueryParameter('ruleContexts', [ collectionFacetValue ]);
  }

Then save the file.

2. Go to your Algolia Dashboard and create a Query Rule

Now that the instant search code will send us a Query Rule Context for each query that comes from a collection page, we can create collection specific query rules.
In order to do so, you will have to provide a context to the Query Rule, by putting the “slug” of the targeted collection.

You can find the slug of the targeted collection in the URL of your shop, for example: https://myshop.myshopify.com/collections/dresses-winter

Once the context filled, just add consequences (promote a result) and then save the Query Rule.

Please let me know if you need more information.

Regards,

Hi @charly.poly, thanks for reply
As I mention, I’m using react-instantsearch-dom package, so algolia_instant_search.liquid.js does not even exist on my project.

I tried to search for .searchFunction( on my bundle, but the results does not match with your solution.
Screenshot from 2018-12-28 13-20-32

There’s no official way of doing this by code? Is there any other solution to this?

Best

Hey @marketing4,

Thanks for reaching out!

If you have a custom implementation of Algolia, you can still use us to implement the context on collection page, that having said, you’ll definitely have to make some custom code. You can set the ruleContext query parameter using the Configure widget of the library. You’ll probably also need to use the collectionFacetValue variable which define the context, i.e the string containing the name of the collection in the URL, here it is :

  var collectionFacetValue = null;
  if (collectionFacetConstraint) {
    var matches = window.location.pathname.match(/\/collections\/([^/]+)/i);
    if (!!matches && matches.length === 2) {
      collectionFacetValue = matches[1];
    }
  }

Does that help ?

Alex