useProduct composable

useProduct composable allows loading product details or list with params for sorting, filtering and pagination.

API

useProduct composable returns the following properties:

  • getProductList - function that fetches a list of products with sorting, filtering and pagination.
  • getProductDetails - function that fetches a product details with sorting, filtering and pagination.
  • getProductPath - function that gets a product path from url_rewrites or url_key .
  • error - ref that contains an errors from the composable methods.
  • loading - ref that contains information whether any of the composable methods is loading.

Interfaces 

type GetProductSearchParams = {
  search?: string;
  filter?: ProductAttributeFilterInput;
  pageSize?: number;
  currentPage?: number;
  sort?: ProductAttributeSortInput;
  configurations?: string[];
};
interface UseProductErrors {
  getProductList: Error | null;
  getProductDetails: Error | null;
}

interface UseProductInterface {
  error: DeepReadonly<Ref<UseProductErrors>>;
  loading: Readonly<Ref<boolean>>;
  getProductList(searchParams: GetProductSearchParams): Promise<ProductList | null>;
  getProductDetails(searchParams: GetProductSearchParams): Promise<ProductDetails | null>;
  getProductPath(product: Product): string;
}

productGetters

productGetters is a set of helper functions that can be used to get data from the product. They receive product object as a parameter and return the data from it.

product parameter

  • getName - returns the name of the product
  • getSlug - returns the slug of the product
  • getPrice - returns an object with the prices of the product:
    • regular - returns the regular price of the product
    • special - returns the special price of the product
    • maximum - returns the maximum price of the product
    • final - returns final price with discounts, etc.
  • getGallery - returns an object with the media content:
    • small - returns URL for small sized image
    • normal- returns URL for normal sized image
    • big - returns URL for big sized image
  • getCoverImage - returns the main product cover image URL
  • getAttributes - returns an object with the attributes objects, can be filter by attribute name
  • getDescription - returns product description
  • getCategoryIds - returns an array of product category IDs
  • getId - returns product ID
  • getTotalReviews - returns a number of user's reviews for a product
  • getAverageRating - returns a number of an average product's rating
  • getBreadcrumbs - returns an array of breadcrumb objects:
    • text - text of the breadcrumb
    • link - link of the breadcrumb
  • getCategory - returns product's category object
  • getProductRelatedProduct - returns a related product
  • getProductSku - returns SKU of the product
  • getProductThumbnailImage - returns thumbnail image URL
  • getProductUpsellProduct - returns the upsell product
  • getShortDescription - returns a short product's description
  • getTypeId - returns type id
  • getSwatchData - returns product's swatch data
  • getGroupedProducts - returns grouped products
  • getBundleProducts - returns bundle products

productGetters usage 

import productGetters from '~/modules/catalog/product/getters/productGetters';

const productName = productGetters.getName(product);
const productSlug = productGetters.getSlug(product);
const productDescription = productGetters.getDescription(product);

Examples

Search products

Handle user search input and fetch list of products:

<script>
import { useProduct } from '~/composables';

setup() {
  const term = ref('');

  const { getProductList } = useProduct();

  const rawHandleSearch = async (searchTerm: string) => {
    term.value = searchTerm;

    const productList : Products = await getProductList({
      pageSize: 30,
      search: term.value,
    }) as Products;
  };
}
</script>

Get product details

Fetch product details by sku:

import { usePageStore } from '~/stores/page';
import { useProduct } from '~/composables';

setup() {
  const { routeData } = usePageStore();
  const { getProductDetails } = useProduct();

  const getBaseSearchQuery = {
    filter: {
      sku: {
        eq: routeData.sku,
      },
    }
  };

  const fetchProductBaseData = async (searchQuery = getBaseSearchQuery()) => {
    const result = await getProductDetails({
      ...searchQuery,
    });

    product.value = result.items[0] as Product;
  };

  useFetch(async () => {
    await fetchProductBaseData();
  });
}

Get product path

Get product's path and pass as link prop to SfProductCard component:

<template>
  <div>
    <SfProductCard
      //...
      :link="localePath(getProductPath(product))"
    />
  </div>
</template>

<script lang="ts">
import { useProduct } from '~/composables';

setup() {
  const { getProductPath } = useProduct();

  return {
    getProductPath,
  };
}
</script>
← usePaymentProvider
useRelatedProducts →