spz-data-source

When to use

spz-data-source provides unified data fetching for products, product lists, collections, and more, distributing results to downstream components (e.g. spz-render, spz-list).

Use it when you need to:

Centralize data requests on a page and reuse the results
Provide data to render components via custom:<id>.getData
Unify access across different data source types (single product, product list, collection, recommendation, etc.)

Supported layout

container

Example

Single product

<spz-data-source
  id="source"
  layout="container"
  source-type="product"
  source-id="b3d660c5-52e4-418d-a996-c3b2eb6d35fb"
  items="data.product"
>
  <spz-render layout="container" src="custom:source.getData">
    <template>
      <div>${data.title}</div>
    </template>
  </spz-render>
</spz-data-source>

Product list

<spz-data-source
  id="source-list"
  layout="container"
  source-type="product-list"
  source-id="b3d660c5-52e4-418d-a996-c3b2eb6d35fb,b3d660c5-52e4-418d-a996-c3b2eb6d35fc"
  items="data.list"
>
  <spz-render layout="container" src="custom:source-list.getData">
    <template>
      ${data.map((item) => `<div>${item.title}</div>`).join('')}
    </template>
  </spz-render>
</spz-data-source>

Collection

<spz-data-source
  id="source-collection"
  layout="container"
  source-type="collection"
  source-id="75a2e91a-ab0e-484f-9803-f52d8a9ac4e7"
>
  <spz-list
    layout="container"
    src="custom:source-collection.getData"
    list="data.products"
    total="data.count"
    page-size="10"
  >
    <template>
      <div>${data.title}</div>
    </template>
  </spz-list>
</spz-data-source>

Attributes

Attribute	Description	Type	Required
source-type	Data source type. Options: `product`, `product-list`, `collection`, `recently-viewed`, `recommendation`, `random`. Default: `product`	`string`	No
source-id	Data source ID. Semantics vary by `source-type` (product ID, collection ID, comma-separated product IDs)	`string`	No
items	Data extraction expression used to pick the target field from the response object, e.g. `data.product`, `data.list`	`string`	No
product-data	Inject JSON data directly; when present, this data is used instead of a remote request	`string`	No
page-size	Pagination size. Applies to list-type sources: `product-list`, `collection`, `recommendation`, `random`	`number`	No
init-page	Initial page number. Default: `0`	`number`	No
index	Index within a parent data source list, used for nested data sources to pick a value by index	`string \| number`	No
data-random	Edit-mode marker. When present, forces the internal source type to `random`	`boolean`	No

Runtime state attributes

Attribute	Description	Type
data-empty	Automatically set on the element when data is empty or the request fails	`boolean`
finish	Automatically set on the element after the request flow completes	`boolean`

Methods

getData

Fetch and return the current data source result. Can be called by other components via custom:<id>.getData.

Parameter	Description	Type	Required
param	Request parameter object. Common shape: `{ params: { page, limit } }`. Uses default pagination when omitted	`object`	No
type	Extraction type (for parent-child data source scenarios)	`string`	No
id	Data item ID or index (for parent-child data source scenarios)	`string \| number`	No

Returns: Promise<any>

Notes

spz-data-source does not handle UI rendering on its own; pair it with spz-render or spz-list.
When a parent spz-data-source exists, child sources try to reuse the parent's data first, reducing duplicate requests.
The items expression determines the data structure passed to downstream components; keep it consistent with template data access paths.

spz-data-source#

#When to use

#Supported layout

#Example

#Single product

#Product list

#Collection

#Attributes

#Runtime state attributes

#Methods

#getData

#Notes