How to return a custom response for Shopify Collection Filters

This guide will help you return a custom response for Shopify Collection Filters. ​

Appmaker Filter

You can use the shopify-custom-filters-response filter to do this.

parameter	type	description
currentResponse	object	The current response from Shopify
params	object	The parameters passed to the filter
dependencies	object	The dependencies passed to the filter

Usage​

appmaker.addFilter(
  'shopify-custom-filters-response',
  'namespace',
  (currentResponse, params, dependencies) => {
    // your code
  },
);

Sample code

The filter callback will receive necessary parameters based on the page. On the collection page, it will receive the collection ID, while on the search page, it will receive the search key. Additionally, each time a filter item is selected, this callback will be triggered with the selected filters. ​

import { appmaker } from '@appmaker-xyz/core'
  appmaker.addFilter(
    'shopify-custom-filters-response',
    'namespace',
    async (currentResponse, params, dependencies) => {
      const collection_scope = shopifyIdHelper(params?.collectionId, true);
      const search = params?.pageData?.search;
      // Get current selected filters. Every time a user selects a filter, this callback will be triggered with the selected filters as parameters. This enables dynamic filter population based on the user's selections.
      const filters = params?.selectedFilters;
​
      // getting filters from external api
      const filtersReponse = await getFilters({
        collection_scope: collection_scope,
        search,
        filters,
      });
​
      // converting them into shopify structure
      const convertedFilters = convertFilter(filtersReponse.filter.options);
​
      // returning them data  
      return {
        data: {
          data: { collection: { products: { filters: convertedFilters } } },
        },
      };
    },
  );

Mapping structure for the collection Filter array:

​
{
  data: {
    data: {
      collection: {
        products: {
          filters: [
            {
              id: string,
              label: string,
              type: string, // PRICE_RANGE or LIST
              values: [
                {
                  count: number,
                  id: string,
                  input?: string, // only present when type is PRICE_RANGE sample: `{"price":{"min":${filterItem?.values?.min},"max":${filterItem?.values?.max}}}`
                  label: string,
                  selectType?: string // only present when type is LIST
                },
                ...
              ]
            },
            ...
          ]
        }
      }
    }
  }
};