Spryker VSF

# useProduct

# Features

useProduct composable is responsible for fetching a list of products.

# API

  • search - a main querying function that is used to query products and populate the products 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:

    • params: ProductsSearchParams
interface ProductsSearchParams {
  perPage?: number;
  page?: number;
  sort?: any;
  term?: any;
  filters?: any;
  id?: string;
  catId?: string | string[];
}

search(params: ProductsSearchParams): Promise<void>;
  • products: Product[] - a main data object that contains an array of products fetched by search method.
interface Product extends ProductVariant {
  type: string;
  stock?: number;
  images?: ProductImages[];
  price?: number;
  prices?: ProductPrice[];
  reviews?: ProductReview[];
  labels?: ProductLabel[];
  categoryNodes?: Category[];
  concreteProducts?: Product[];
}
  • loading: boolean - a reactive object containing information about loading state of your search method.
  • error: UseProductErrors - reactive object containing the error message, if search failed for any reason.
interface UseProductErrors {
  search: Error;
}

# Getters

  • getName - returns product name.

  • getSlug - returns product slug.

  • getPrice - returns product price.

  • getGallery - returns product gallery.

  • getCoverImage - returns cover image of product.

  • getFiltered - returns filtered product.

  • getAttributes - returns product attributes.

  • getDescription - returns product description.

  • getCategoryIds - returns all product categories.

  • getId - returns product ID.

  • getFormattedPrice - returns product price with currency sign.

  • getTotalReviews - returns total number of reviews product has.

  • getAverageRating - returns average rating from all reviews.

interface ProductGetters {
  getName: (product: Product) => string;
  getSlug: (product: Product) => string;
  getPrice: (product: Product) => AgnosticPrice;
  getGallery: (product: ProductVariant) => AgnosticMediaGalleryItem[];
  getCoverImage: (product: Product) => string;
  getFiltered: (
    products: Product[],
    filters: ProductVariantFilters | any = {},
  ) => Product[];
  getAttributes: (
    products: Product | Product[],
    filterByAttributeName?: string[],
  ) => Record<string, AgnosticAttribute | string>;
  getDescription: (product: Product) => string;
  getCategoryIds: (product: Product) => string[];
  getId: (product: Product) => string;
  getFormattedPrice: (price: number) => string;
  getTotalReviews: (product: Product) => number;
  getAverageRating: (product: Product) => number;
}

interface AgnosticPrice {
  regular: number | null;
  special?: number | null;
}

interface AgnosticMediaGalleryItem {
  small: string;
  normal: string;
  big: string;
}

interface AgnosticAttribute {
  name?: string;
  value: string | Record<string, any>;
  label: string;
}

interface Product extends ProductVariant {
  type: string;
  stock?: number;
  images?: ProductImages[];
  price?: number;
  prices?: ProductPrice[];
  reviews?: ProductReview[];
  labels?: ProductLabel[];
  categoryNodes?: Category[];
  concreteProducts?: Product[];
}

type ProductVariantFilters = {
  attributes?: {
    [key: string]: string | number;
  };
  isProductSelected?: boolean;
  related?: boolean;
};

# Example

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

export default {
  setup() {
    const { products, search, loading, error } = useProduct('<UNIQUE_ID>');

    onSSR(async () => {
      await search({ id: 'id' });
    });

    return {
      loading,
      error,
      product: computed(
        () =>
          productGetters.getFiltered(products.value, {
            master: true,
            attributes: context.root.$route.query,
          })[0],
      ),
      option: computed(() =>
        productGetters.getAttributes(products.value, ['color', 'size']),
      ),
      configuration: computed(() =>
        productGetters.getCategoryIds(product.value),
      ),
    };
  },
};

← useUser →