Skip to content

Catalog

@storefront-x/catalog

Module for e-commerce catalog (products and categories). Requires corresponding integration module (e.g. @storefront-x/catalog-magento) which provides mappers, repositories and integration specific services.

useProduct composable

Wraps data returned by the ToProduct mapper with business logic for displaying products. It is used by ProductProvider.

TIP

Override/extend this composable to add functionality to products.

TIP

Mutating functionality (adding to cart, adding to favorites, etc.) should be in separate composables/services.

injectProduct composable

Used by the components wrapped in ProductProvider.

ProductProvider provider

Provides result of useProduct composable to be injected in child components.

Example

vue
<!-- organisms/ProductListing.vue -->

<template>
  <ProductProvider v-for="product in products" :product="product">
    <ProductTile />
  </ProductProvider>
</template>

<script setup lang="ts">
import ProductProvider from '#ioc/providers/ProductProvider'
import ProductTile from '#ioc/molecules/ProductTile'
import ToProduct from '#ioc/mappers/ToProduct'
import { PropType } from 'vue'

defineProps({
  products: {
    type: Array as PropType<ReturnType<typeof ToProduct>[]>,
    required: true,
  },
})
</script>
vue
<!-- molecules/ProductTile.vue -->

<template>
  <h1>{{ product.name }}</h1>
</template>

<script setup lang="ts">
import injectProduct from '#ioc/composables/injectProduct'

const product = injectProduct()
</script>

useGetProductById service

Service for fetching product by its ID, used, for example, for product detail.

useGetCategoryById service

Service for fetching category by its ID, used, for example, for category detail.

useGetSearchSuggestions service

Service for fetching search suggestions when customer is typing into search bar.

useGetNavigationMenu service

Service for fetching navigation menu, made from categories, which can be used as a simple menu, instead of a complex mega-menu.

TIP

This service should be only called inside serverInit store action.

CATALOG_PAGE_SIZE config

Config value, which controls how many products per page to display. If there are more products than specified, pagination appears.

ts
// config/CATALOG_PAGE_SIZE.ts

export default 12