spz-list#
#When to Use
- When a list needs to display a large amount of data.
- When a list needs a waterfall flow layout.
- When pagination/scroll loading/click loading is needed to display the list.
#Code Demonstration
#Basic Usage
Basic usage, used in conjunction with spz-pagination.
<spz-list
manual
layout="container"
size="per_page"
page-size="8"
list="data.products"
initial-page="0"
total="data.count"
inherit-url-search="filter,sort_by"
initial-total="32"
id="collection-list"
src="pathname?page=0&per_page=8"
@dom-update="..."
>
<template>
<!-- ... -->
</template>
</spz-list>
<spz-pagination list-id="collection-list" layout="container" num-display-active='1'></spz-pagination>#Fetching Data from Custom Script
Use spz-script to generate custom data formats for displaying the list.
<script>
window.SHOPLAZZA = {
currency_symbol: '$',
currency_symbol_pos: 'left',
money_format: 'amount'
};
</script>
<spz-list
layout="container"
type="row"
list="list"
total="count"
initial-page="1"
src="spz-script:custom-script-data.getListData"
>
<template>
<div class="product-snippet">
<spz-img layout="responsive" width="${data.image.width}" height="${data.image.height}" src="${data.image.src}" alt="${data.title}"></spz-img>
<div class="product-snippet-info">
<h3>${data.title}</h3>
<spz-currency layout="container" value="${data.price}"></spz-currency>
</div>
</div>
</template>
</spz-list>
<spz-script layout="logic" id="custom-script-data">
function getListData() {
return Promise.resolve({
count: 2,
list: [
{
"id": "c222663d-88ab-46bd-a21a-9584691aa744",
"title": "Single Variant Haldon Cashmere",
"price": "358",
"image": {
"src": "//cdn.shoplazza.com/adbfe4841b8b893cf18b34de55529a40.jpeg",
"path": "adbfe4841b8b893cf18b34de55529a40.jpeg",
"width": 1280,
"height": 1710,
"alt": "",
"aspect_ratio": 0.7485380116959064
}
},
{
"id": "08dac6b7-21e1-4d9e-a887-9f6b6a0ab940",
"title": "Anna Skirt",
"price": "295",
"image": {
"src": "//cdn.shoplazza.com/7dff50a1a6895f9d8a89eeded2cee2a3.jpeg",
"path": "7dff50a1a6895f9d8a89eeded2cee2a3.jpeg",
"width": 1280,
"height": 1710,
"alt": "",
"aspect_ratio": 0.7485380116959064
}
},
{
"id": "0d0d5247-0608-4e5c-bcfc-26e776997661",
"title": "Dirdre Tank Dress",
"price": "450",
"image": {
"src": "//cdn.shoplazza.com/c32547499e2fbe278580ed1847e66596.jpeg",
"path": "c32547499e2fbe278580ed1847e66596.jpeg",
"width": 1280,
"height": 1710,
"alt": "",
"aspect_ratio": 0.7485380116959064
}
},
{
"id": "0f0eaab1-afaa-4bf2-b1d9-993f10c2c63e",
"title": "Lace-up Leather Manston Runner",
"price": "325",
"image": {
"src": "//cdn.shoplazza.com/5afeee913a4f8ff183295949f8e9d129.jpeg",
"path": "5afeee913a4f8ff183295949f8e9d129.jpeg",
"width": 1280,
"height": 1710,
"alt": "",
"aspect_ratio": 0.7485380116959064
}
}
]
});
}
exportFunction('getListData', getListData);
</spz-script>#Waterfall Flow Layout
Use type="grid" combined with column-count to display multiple columns of waterfall flow.
<spz-list
layout="container"
type="grid"
column-count="2"
list="list"
total="count"
initial-page="1"
src="spz-script:custom-script-data.getListData"
>
<template>
<div class="product-snippet-container">
<div class="product-snippet">
<spz-img layout="responsive" width="${data.image.width}" height="${data.image.height}" src="${data.image.src}" alt="${data.title}"></spz-img>
<div class="product-snippet-info">
<h3>${data.title}</h3>
<spz-currency layout="container" value="${data.price}"></spz-currency>
</div>
</div>
</div>
</template>
</spz-list>
<spz-script layout="logic" id="custom-script-data">
function getListData() {
return Promise.resolve({
count: 2,
list: [
{
"id": "c222663d-88ab-46bd-a21a-9584691aa744",
"title": "Single Variant Haldon Cashmere",
"price": "358",
"image": {
"src": "//cdn.shoplazza.com/adbfe4841b8b893cf18b34de55529a40.jpeg",
"path": "adbfe4841b8b893cf18b34de55529a40.jpeg",
"width": 1280,
"height": 1710,
"alt": "",
"aspect_ratio": 0.7485380116959064
}
},
{
"id": "08dac6b7-21e1-4d9e-a887-9f6b6a0ab940",
"title": "Anna Skirt",
"price": "295",
"image": {
"src": "//cdn.shoplazza.com/7dff50a1a6895f9d8a89eeded2cee2a3.jpeg",
"path": "7dff50a1a6895f9d8a89eeded2cee2a3.jpeg",
"width": 1280,
"height": 1710,
"alt": "",
"aspect_ratio": 0.7485380116959064
}
},
{
"id": "0d0d5247-0608-4e5c-bcfc-26e776997661",
"title": "Dirdre Tank Dress",
"price": "450",
"image": {
"src": "//cdn.shoplazza.com/c32547499e2fbe278580ed1847e66596.jpeg",
"path": "c32547499e2fbe278580ed1847e66596.jpeg",
"width": 1280,
"height": 1710,
"alt": "",
"aspect_ratio": 0.7485380116959064
}
},
{
"id": "0f0eaab1-afaa-4bf2-b1d9-993f10c2c63e",
"title": "Lace-up Leather Manston Runner",
"price": "325",
"image": {
"src": "//cdn.shoplazza.com/5afeee913a4f8ff183295949f8e9d129.jpeg",
"path": "5afeee913a4f8ff183295949f8e9d129.jpeg",
"width": 1280,
"height": 1710,
"alt": "",
"aspect_ratio": 0.7485380116959064
}
}
]
});
}
exportFunction('getListData', getListData);
</spz-script>#Properties
| Property Name | Description | Type | Default Value | Required |
|---|---|---|---|---|
| src | The path to fetch data | string | - | Yes |
| manual | If present, the component does not render immediately upon mounting (or does not immediately request data) | - | - | - |
| type | Layout type, options: row | column | grid | masonry | string | - | No |
| column-count | Number of columns, only effective when type="grid" | number | - | Required when type="grid" |
| list | The path to get list data from the returned data | string | data.list | No |
| total | The path to get the total count of the list from the returned data | string | total | No |
| size | The field name in the API request's src representing the limit per page | string | limit | No |
| page | The field name in the API request's src representing the page number | string | page | No |
| page-size | The value representing the number per page in the API request's src | number | 1000 | No |
| initial-page | Starting page number for the API request, options: 0 or 1 | number | - | Yes |
| initial-total | Total number of items in the list | number | 0 | No |
| inherit-url-search | Field names to be preserved in the URL, if there are multiple fields use , to separate, album filtering can use filter to represent all fields starting with filter | string | - | No |
| same-queries-in-array | If this attribute is configured and inherit-url-search is set, when a field's value is an array type, the field name will change from fieldName to fieldName[] in the URL | - | - | - |
| record-params-page-plus-one | If this attribute is configured and page is set in inherit-url-search, the value will be incremented by one when written into the URL parameters | - | - | - |
| maintain-page-state | If this attribute is configured and it is currently in pagination mode, after clicking another page number, the scroll bar position remains at the previous position | - | - | - |
| track-event-name | Name reported for each API request | string | - | No |
#src Data Fetching Methods
There are two ways to fetch data:
- Through API interface
spz-script:<spzScriptId>：Get data throughspz-script
#Methods
#refresh
Refresh the list.
| Parameter Name | Description | Type | Default Value | Required |
|---|---|---|---|---|
| [customName] | Customizable parameter name, can directly change the request src parameters | string | - | No |
| redo | If true, does not save the last record, reinitializes | boolean | false | No |
For example: list.refresh(page=1,limit=8,redo=true);.
#listRender
Re-render the list with passed data.
| Parameter Name | Description | Type | Default Value | Required |
|---|---|---|---|---|
| data | The data used to re-render the list | Array | [] | No |
#Events
#Event Object Data
| Property | Description | Type |
|---|---|---|
| data | The current list data displayed | Array | null |
| total | The total number of data items | number |
finish
This event is automatically triggered when the list is first mounted and rendered.
dom-update
This event is automatically triggered when the list is updated and rendered.