Shopify Storefront GraphQL filtering products within a collection

user_545537 0
Viewed 1113

According to this documentation: https://shopify.dev/custom-storefronts/products/filter-products#query-products-by-type

We should be able to filter products within a collection using collectionByHandle.

I have created a very basic test query in the Shopify GraphiQL App explorer tool. When I run the documented query, it returns all products, not filtering at all. See below:

GraphQL example query

This looks like a bug with the API right? Or am I missing something basic?

shopify-storefront-api shopify graphql
2 Answers

OK this turned out to be a configuration issue. To allow filtering by product type, it needs to be turned on in the admin for your store. If you navigate to: Online Store > Navigation

... and scroll to the bottom, you will see where you can add allowed filters: enter image description here

Even if it says your theme doesn't support filters, it will still change the way the API behaves.

user_5455370

I have the same problem, the filters param of products query seem to be ineffective and returning me all the products in the collection. I can't find the "allowed filters" option. Currently I'm using the Storefront API as an external app, all works fine except that.

Here the code.

 query (
      $collectionHandle: String, $product_filters: [ProductFilter!], $nQueryElements: Int
    ) {
      collection(handle: $collectionHandle) {
        title
        products(first: $nQueryElements filters: $product_filters) {
          pageInfo {
            hasNextPage
            hasPreviousPage
          }
          edges {
            cursor
            node {
              title
              vendor
              availableForSale
              id
              handle
              productType
              variants(first: 40) {
                edges {
                  node {
                    selectedOptions {
                       name
                      value
                        }
                    title
                    compareAtPriceV2 {
                      amount
                    }
                    image {
                      id
                    }
                  }
                }
              }
              priceRange {
                maxVariantPrice {
                  amount
                }
              }
              images(first: 1) {
                edges {
                  node {
                    id
                    url(transform:  { maxWidth: 500, maxHeight: 700 })
                  }
                }
              }
            }
          }
        }
      }
    }

const variables = { collectionHandle: this.pageURL, nQueryElements: this.nQueryElements, lastCursor: this.queryCursor.last, firstCursor: this.queryCursor.first, product__filters: [{ productVendor: "ASPESI", },], };

Thanks to who can help.

user_147830170
Related