useProductSearch(id?: string)

The useProductSearch() composable allows for storing and searching for products & additional data (such as available facets, available sorting, and pagination options) indexed in Solr (opens new window).

Be careful about shared state

You should pass a unique ID as a parameter to avoid state conflicts when using multiple instances of this composable. Every instance with the same ID (or those that lack it) will share the same state, even on different pages.

result

Main data object populated by the search() method.

Type

const result: ComputedRef<ProductSearchPage>;

References: ProductSearchPage

loading

Indicates whether any of the composable methods is in progress.

Type

const loading: ComputedRef<boolean>;

error

Contains errors thrown by any of the composable methods.

Type

const error: ComputedRef<UseProductSearchError>;

References: UseProductSearchError

search()

Performs a product search and saves the result to the result property. Under the hood, it sends a request to the searchProduct API endpoint.

Type

interface ProductSearchProps extends BaseProps {
  searchTerm?: string;
  filters?: Record<string, string[]>;
  query?: string;
  sort?: string;
  pageSize?: number;
  currentPage?: number;
  searchQueryContext?: string;
}
async function search(props?: ProductSearchProps): Promise<void>;

References: ProductSearchProps, BaseProps

Example

In the following example, we are calling the search() method without any arguments to retrieve all indexed products. We are also exposing the result property to the templates by returning it from the setup() method.

Final query sent to SAP: :undefined

import { onSSR } from '@vue-storefront/core';
import { useProductSearch } from '@vsf-enterprise/sapcc';
export default {
  setup() {
    const { result, search } = useProductSearch('unique-id');

    onSSR(async () => {
      await search();
    });

    return { result };
  }
};

Example

In the following example, we are calling the search() method with the searchTerm argument to perform a free-text search. We are also sorting the returned products according to their rating and specifying the fields to be included in the response.

Final query sent to SAP: binocul:topRated

import { onSSR } from '@vue-storefront/core';
import { useProductSearch } from '@vsf-enterprise/sapcc';
export default {
  setup() {
    const { result, search } = useProductSearch('unique-id');

    onSSR(async () => {
      await search({
        searchTerm: 'binocul',
        sort: 'topRated',
        fields: 'pagination(FULL), products(code,stock(FULL))'
      });
    });

    return { result };
  }
};

Good to know

By default, search results will be sorted by relevance. To view or edit available sorting methods, navigate to Solr Facet Search Configuration => Facet Search Configuration => Indexed Types in your SAP Commerce Cloud Backoffice.

Example

In the following example, we are calling the search() method with the filters argument. We are using the multi-value allCategories facet to fetch products belonging to two different categories. We are also using the single-value inStockFlag facet to filter out out-of-stock products.

Final query sent to SAP: :undefined:allCategories:1:allCategories:1421:inStockFlag:true

import { onSSR } from '@vue-storefront/core';
import { useProductSearch } from '@vsf-enterprise/sapcc';
export default {
  setup() {
    const { result, search } = useProductSearch('unique-id');

    onSSR(async () => {
      await search({
        filters: {
          allCategories: ['1', '1421'],
          inStockFlag: [true]
        }
      });
    });

    return { result };
  }
};

Good to know

To view or edit available facets, navigate to Solr Facet Search Configuration => Facet Search Configuration => Indexed Types in your SAP Commerce Cloud Backoffice.

Example

In this example, we are calling the search() method to fetch the exact same subset of products as in the previous example. However, this time we are leveraging the query argument. It allows us to pass on a raw query expected by SAP Commerce Cloud API.

import { onSSR } from '@vue-storefront/core';
import { useProductSearch } from '@vsf-enterprise/sapcc';
export default {
  setup() {
    const { result, search } = useProductSearch('unique-id');
    onSSR(async () => {
      await search({
        query: ':undefined:allCategories:1:allCategories:1421:inStockFlag:true'
      });
    });
    return { result };
  }
};

The query parameter is priviliged

The query parameter comes in handy whenever SAP Commerce Cloud gives us ready-to-use search queries (such as the ones in Facet Values). When passed to the search() method, other query-building parameters such as filters, searchTerm and sort are ignored.

reset()

Resets the composable's state. It Performs no async operations under the hood.

Type

function reset(): void;