Products are listed when:
In Vendure, we usually use the search query for both of these. The reason is that the search query is optimized
for high performance, because it is backed by a dedicated search index. Other queries such as products or Collection.productVariants can also
be used to fetch a list of products, but they need to perform much more complex database queries, and are therefore slower.
Following on from the navigation example, let's assume that a customer has clicked on a collection item from the menu, and we want to display the products in that collection.
Typically, we will know the slug of the selected collection, so we can use the collection query to fetch the
details of this collection:
The collection data can be used to render the page header.
Next, we can use the search query to fetch the products in the collection:
The key thing to note here is that we are using the collectionSlug input to the search query. This ensures
that the results all belong to the selected collection.
Here's a live demo of the above code in action:
The search query can also be used to perform a full-text search of the products in the catalog by passing the
term input:
You can also limit the full-text search to a specific collection by passing the
collectionSlug or collectionId input.
The search query can also be used to perform faceted search. This is a powerful feature which allows customers
to filter the results according to the facet values assigned to the products & variants.
By using the facetValues field, the search query will return a list of all the facet values which are present
in the result set. This can be used to render a list of checkboxes or other UI elements which allow the customer
to filter the results.
These facet values can then be used to filter the results by passing them to the facetValueFilters input
For example, let's filter the results to only include products which have the "Nikkon" brand. Based on our last
request we know that there should be 2 such products, and that the facetValue.id for the "Nikkon" brand is 11.
Here's how we can use this information to filter the results:
In the next example, rather than passing each individual variable (skip, take, term) as a separate argument,
we are passing the entire SearchInput object as a variable. This allows us more flexibility in how
we use the query, as we can easily add or remove properties from the input object without having to
change the query itself.
The facetValueFilters input can be used to specify multiple filters, combining each with either and or or.
For example, to filter by both the "Camera" and "Nikkon" facet values, we would use:
To filter by "Nikkon" or "Sony", we would use:
Here's a live example of faceted search. Try searching for terms like "shoe", "plant" or "ball".
If you have defined custom fields on the Product or ProductVariant entity, you might want to include these in the
search results. With the DefaultSearchPlugin this is
not possible, as this plugin is designed to be a minimal and simple search implementation.
Instead, you can use the @vendure-community/elasticsearch-plugin which
provides advanced features which allow you to index custom data. The Elasticsearch plugin is designed as a drop-in
replacement for the DefaultSearchPlugin, so you can simply swap out the plugins in your vendure-config.ts file.
Architecture reviews, custom plugin work, migrations, ongoing support. Get a hand from the team that builds Vendure.
Talk to the team