docs
  1. Features
  2. Product Detail Page
  3. Composables

Interfaces

ModuleOptions

Properties

PropertyType
autoImports?boolean

ProductInfo

Properties

PropertyTypeDescription
brandstringThe brand of the product.
colorstringThe color of the product.
namestringThe name of the product.
productDescriptionstringA description of the product.
productIdnumberThe id of the product.
variantsWithContext<Product>Array of product variants.
variesBy?SchemaValue<DefinedTerm | IdReference | Text, "variesBy">-

UseProductSeoDataReturn

Properties

PropertyTypeDescription
canonicalLinkComputedRef<CanonicalLink>Computed ref for canonical link tag metadata.
productBreadcrumbJsonLdComputedRef<WithContext<BreadcrumbListLeaf>>Computed ref containing JSON-LD structured data for product breadcrumbs.
productJsonLdComputedRef<WithContext<ProductGroupLeaf>>Computed ref containing JSON-LD structured data for the product group.
robotsstringRobots meta tag value, typically "index, follow".
titleComputedRef<string>The title of the product.

UseRecentlyViewedProductsOptions

This composable can be used to track a short history of products a customer has previously viewed using local storage. It maintains up to 10 recently viewed products and provides methods to add new products and fetch their full details.

Param

An object containing parameters and options for the loading the products.

Param

The fields to include in the response.

Param

The price promotion key.

Properties

PropertyType
pricePromotionKey?string
with?ProductWith

UseRecentlyViewedProductsReturn

Properties

PropertyTypeDescription
addProductId(productId: number) => voidAdds a product id to the list of recently viewed products and persists it to local storage. Because this function uses local storage, it is not available on the server. Throws Error if the function is called on the server.
errorRef< | undefined | Error>A reactive container for any errors that occur during fetching.
loadingRef<boolean>A reactive flag indicating if the product data is being fetched.
loadMissingProducts() => Promise<void>Loads products based on the product ids previously added. Initially all products within the persisted list are loaded. Subsequent calls only load products that are not already loaded. Because this function uses local storage, it is not available on the server. Throws Error if the function is called on the server.
productsRef<Product>A reactive array of the fetched, full Product objects.
statusRef<AsyncDataRequestStatus>A string indicating the status of the data request

Type Aliases


ShopProduct

Type Declaration

NameType
productProduct

UrlParams

Variables

module

Functions

useAllShopProductsForId()

Type Parameters

Type ParameterDefault type
DataTShopProduct
PickKeys extends KeysOf<DataT>KeysOf<DataT>
DefaultTnull

Parameters

ParameterTypeDefault value
__namedParametersPartial<{ options: UseRpcOptions<..., ..., ..., ...>; params: MaybeRefOrGetter<...>; }>{}
keystring'useAllShopProductsById'

Returns

UseRpcReturn<"getAllShopProductsForId", DataT, PickKeys, DefaultT>


useProductSeoData()

Composable function to generate SEO-related data for a product page.

Parameters

ParameterTypeDescription
breadcrumbsMaybeRefOrGetter<BreadcrumbItem>Array of breadcrumb items representing the navigation path to the product.
urlParamsMaybeRefOrGetter<UrlParams>Object containing baseUrl and fullPath to build and sanitize canonicalUrl.
productInfoMaybeRefOrGetter<ProductInfo>Object containing product information including name, brand, description, and variants.

Returns

UseProductSeoDataReturn

An object containing SEO data for the product page with following properties:


useRecentlyViewedProducts()

Parameters

Returns

UseRecentlyViewedProductsReturn