Spryker VSF

# useCategory

# Features

useCategory composable is responsible for fetching a list of categories. A common usage scenario for this composable is navigation.

# API

  • search - a main querying function that is used to query categories and populate the categories object with the result. Every time you invoke this function API request is made. This method accepts a single params object. The params has the following options:

  • id: string

search(params?: {id: string}): Promise<void>;
  • categories: AgnosticCategoryTree[] - a main data object that contains an array of categories fetched by search method.
interface AgnosticCategoryTree {
  label: string;
  slug?: string;
  items: AgnosticCategoryTree[];
  isCurrent: boolean;
  count?: number;
  [x: string]: unknown;
}
  • loading: boolean - a reactive object containing information about loading state of your search method.
  • error: UseCategoryErrors - reactive object containing the error message, if search failed for any reason.
interface UseCategoryErrors {
  search: Error;
}

# Getters

  • getTree - returns category tree.
interface CategoryGetters {
  getTree: (category: Category) => AgnosticCategoryTree | null;
}

type Category = {
  nodeId: number;
  order: number;
  name: string;
  children: Category[];
  metaTitle?: string;
  metaKeywords?: string;
  metaDescription?: string;
  docCount?: number;
  url?: string;
};

interface AgnosticCategoryTree {
  label: string;
  slug?: string;
  items: AgnosticCategoryTree[];
  isCurrent: boolean;
  count?: number;
  [x: string]: unknown;
}

# Example

import { useCategory } from '@spryker-vsf/composables';
import { onSSR } from '@vue-storefront/core';

export default {
  setup() {
    const { categories, search, loading } = useCategory('category-tree');

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

    return {
      categories,
      loading,
    };
  },
};

← useFacet →