Product Catalog

In Vue Storefront there are two composables available that you can use to interact with product catalog - useProduct and useFacet. The former should be used to work with a single product and its variants while the latter is for complex product listings with filtering and sorting.

Fetching a single product and it's variants with useProduct

useProduct composable is meant to be used primarily on Product Details Page to display information about a single product and its variants.

You can fetch the product and its variants with search method. The response will be saved in products object and contain at least an array of product variants.

import { useProduct } from '{INTEGRATION}'
import { onSSR } from '@vue-storefront/core'
// ...

export default {
  setup () {
    const { products, search } = useProduct()

    onSSR(async () => {
      await search(searchParams) // populates 'products' with the result
    })
    
    return {
      products
    }
  }
}

Using getFiltered to extract product list

In some platforms products object is containing not only a list of products but also some additional metadata like products count. In such cases you can use getFiltered getter without parameters to extract only the products list.

import { productGetters } from '{INTEGRATION}'

export default {
  setup () {
    // ...

    const list = computed(() => productGetters.getFiltered(products.value));

    return {
      list
    }
  }
}

Using getFiltered to select the Master Variant

Each of Product Variants returned by getFiltered is a single product configuration.

In most of the eCommerce backends there is so-called Master Variant. You can think about this as a default configuration for your product that is displayed to the user if he/she havn't selected any other configuration yet (eg. red + M for t-shirt ). If platform is not supporting master variants it's either the first one or there is a stub with null as configurable attributes.

We will use the getFiltered getter to filter out the other variants from the products object and keep only the one that we need:

const masterVariant = computed(() => productGetters.getFiltered(products.value, { master: true })[0]);

Using getFiltered to select the product configuration

The same way we've used getFiltered to select the Master Variant we can use it to select other variants.

const selectedVariant = computed(() => productGetters.getFiltered(products.value, { attributes })[0]);

Fetching a list of products and filters with useFacet

Faceting is the way of searching and classifying records, allowing users to browse the catalog data.

Each facet is the unit that refines the results over multiple dimensions at a time. Considering the clothing shop, we can distinguish multiple dimensions such as brand, size, color and so on. The particular value of that dimension is a facet, for example color: red, size: xl etc.

You can fetch all the data needed for a Product Details Page such as products, sorting options, filters and pagination with a single call of asearch method. The search result will be saved in result object.

You can extract certain information from result object using facetGetters:

setup (props, context) {
  const { result, search, loading } = useFacet();

  // the products that were found
  const products = computed(() => facetGetters.getProducts(result.value));

  // corresponding category tree
  const categoryTree = computed(() => facetGetters.getCategoryTree(result.value));

  // related breadcrumbs
  const breadcrumbs = computed(() => facetGetters.getBreadcrumbs(result.value));

  // sort options
  const sortBy = computed(() => facetGetters.getSortOptions(result.value));

  // available facets (grouped)
  const facets = computed(() => facetGetters.getGrouped(result.value));

  // pagination options
  const pagination = computed(() => facetGetters.getPagination(result.value));

  onSSR(async () => {
    // triggering a search based on criteria available in url query eg. ?colo=red&sortBy=latest
    await search(searchParams);
  });
}