How to develop an app with filtering capabilities?

Partner Discussions
1

I want to know how to develop an app with filtering capabilities, like “search & discovery”, which can let you use a filtered collection in the collection template. I just can’t find any documents about it.

2

Hi Wenjian,

You can use the collections query to fetch collections and apply filters. For example:

query FilteredCollections {
  collections(first: 5, query: "title:Music") {
    edges {
      node {
        id
        title
        handle
        updatedAt
        sortOrder
      }
    }
  }
}

To display filtered collections in the Shopify admin, you can use the ResourceList component from Admin UI extensions. This component allows merchants to filter and interact with collections. EG:

import React from 'react';
import {extend, render, ResourceList, ResourceItem} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <ResourceList
      filterControl={{
        queryValue: '',
        queryPlaceholder: 'Filter collections',
        onQueryChange: (queryValue) => console.log('Filtering for', queryValue),
        onQueryClear: () => console.log('Clear filters'),
      }}
    >
      <ResourceItem id="1234" onPress={() => console.log('Pressed 1')}>
        Collection 1
      </ResourceItem>
      <ResourceItem id="5678" onPress={() => console.log('Pressed 2')}>
        Collection 2
      </ResourceItem>
    </ResourceList>
  );
}

extend(
  'Playground',
  render(() => <App />),
);

To use filtered collections in a collection template, you can leverage metafields. For example, you can create a metafield definition for collections and use it as a condition in templates. Use the standardMetafieldDefinitionEnable mutation to enable a metafield definition:

mutation EnableMetafieldDefinition {
  standardMetafieldDefinitionEnable(
    id: "gid://shopify/StandardMetafieldDefinitionTemplate/2",
    ownerType: COLLECTION,
    pin: false,
    visibleToStorefrontApi: true
  ) {
    createdDefinition {
      name
      key
      namespace
      description
    }
    userErrors {
      field
      message
    }
  }
}

Hopefully this helps for exploring options to support your app project!

3

The other option would be syncing all the store data (products/collections) to your store into a database and building the filtering out yourself, this would most likely allow for more filtering options, but based on the database setup you go with.

You would most likely then use something like a theme app extension to output the product list and filters on the collection/search page.

4

@Liam-Shopify Thanks for the reply. I will add more details here. We are the dev team of your shopify plus member, and working on some poc to check whether the site can switch smoothly. We have 100k+ products of a single type, which can’t be filter with your “search & discovery” app. So I am checking whether we can dev a similar app as the “search & discovery”, which can use the {{ collection }} object directly in the template. Of couse we can always use an outer server and send an ajax there, but this will divide the system into two parts, which should be the last consideration. I am just looking up why “search & discovery” can do this in a seamless connection way, and want to make a similar one, so that we can use the filtered {{ collection }} object directy in the collection template.

The key points here should be: “use the filtered {{ collection }} object directy in the collection template”. Maybe the standardMetafieldDefinitionEnable should be the right solution, but could you give me some simple example or some documents about this?