Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Product
  • Overview
  • Usage
  • Components Customization
  • Elements
    • Apps Icons
    • Breadcrumb
    • Color Picker
    • Conditional Fields
    • Count Down
    • Filters
    • Infinite Scroll
    • List Tile
    • Loading
    • Map
    • Modal
    • Placeholder
    • Progress Bar
    • Rating Stars
    • Reviews
    • Reviews Summary
    • Sheet
    • Skeleton
    • Slider
    • Social
    • Social Share
    • Tabs
  • Form
    • Button
    • Bottom Alert
    • Contacts
    • Date Time Picker
    • File Upload
    • Menu
    • Quantity Input
    • Select
    • Tel Input
  • Product
    • Add Product
    • Advertisement
    • Comments
    • Conditional Offer
    • Gifting
    • Installment
    • Meta Data
    • Offer
    • Offer Modal
    • Orders
    • Payments
    • Product Availability
    • Product Card
    • Products List
    • Product Options
    • Product Size Guide
    • Products Slider
    • Quick Buy
    • Quick Order
    • Scopes
    • Search
  • User
    • Cart Summary
    • Localization
    • Login
    • Loyalty
    • Rating
    • User Menu
    • User Profile
    • User Settings
    • Verify
  1. Product

Products List

The <salla-products-list> web component is used to display a group of related products with some information, such as products' names, prices, and other relevant information in an organized way. Users can interact with the component by clicking on a product to view its details.

Example#

Products List

Usage#

HTML
Note
This component, salla-product-list, uses inherently the default salla-product-card component. If you want to further customize the component, feel free to read more details from here.

Properties#

PropertyAttributeDescriptionTypeDefault
AutoloadautoloadWhether or not to autoload the next page's content when scrolling to its viewboolean'false'
Filters Resultsfilters-resultsDisplay the filteration results. The events salla-filters::changed and salla-filters::re-render should be listened to in order for this property to function properlybooleanundefined
Horizontal Cardshorizontal-cardsShows the product lists in a horizontal cards' waybooleanundefined
IncludesincludesSpecifies additional data to be included in the product fetch response. The value can be an array of strings or a JSON string.
Example:
- As an array:
  - includes=["options", "images"]
- As a JSON string:
  - includes='["options", "images"]'
The array or JSON string can include product options, "options", in the response.
string | string[]undefined
LimitlimitLimit the number of products in the list.numberundefined
Product Card Componentproduct-card-componentCustom Card Component for the Salla Products List. This property allows you to customize the appearance of individual product cards within a Salla Products List.string'custom-salla-product-card'
Row Cardsrow-cardsDisplay product cards in a vertical list, with each row containing only one product cardbooleanundefined
Sort Bysort-bySorting the list of products.stringundefined
SourcesourceThe Products List's source"brands" | "categories" | "json" | "latest" | "offers" | "related" | "search" | "selected" | "tags"undefined
Source Valuesource-valueThe source value, which could be consisting of different values such as the following: • array of IDs when source in ['categories', 'brands', 'tags', 'selected'] | • keyword when source = 'search' | • products payload when source = 'json' | • product_id when source = 'related'stringundefined

Methods#

The pre-defined methods allow for calling functions built by Salla to carry out certain actvities, such as reload which reloads the product list view.
MethodDescriptionReturn Type
reload()Reloads the product list viewPromise<any>
setFilters(filters: any)Sets the filters valuePromise<any>
Modified at 2025-03-04 12:54:02
Previous
Product Card
Next
Product Options