salla-reviews
Shows customer reviews (testimonials) in an auto-playing slider with the customer's avatar, name, text and star rating, under a "testimonials" heading.
Shows customer reviews (testimonials) in an auto-playing slider with the customer's avatar, name, text and star rating,
under a "testimonials" heading. Use it on the home page or any landing page to show store or product reviews.
It fetches the reviews from the API (or uses your own JSON) and renders nothing at all when there are no reviews.
source-value must be a JSON string for the products, categories and json sources.
Use it
In HTML or JSX, use the tag <salla-reviews> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaReviews } from '@salla.sa/twilight-components-react/reviews';Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.
Example
import { SallaReviews } from '@salla.sa/twilight-components-react/reviews';
export function Example() {
return (
<SallaReviews source="products" sourceValue="[123456, 789012]" type="products" sort="top_rating" limit={6} displayAllLink />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
displayAllLink | display-all-link | Controls the visibility of a link to the reviews page. When set to true, a link to the store's testimonials page is shown next to the heading. | boolean | |
hideCustomerInfo | hide-customer-info | Asks the API to leave out customer information when fetching reviews (sent as hide_customer_info). When set to true, customer information will be hidden. Defaults to false, meaning customer information will be displayed. | boolean | false |
limit | limit | Defines the maximum number of reviews to retrieve from the API (a count). Not applied when source is json. | number | 5 |
sort | sort | Specifies the sorting criteria for the fetched reviews. Available options: - "top_rating": Sorts reviews based on top ratings. - "random": Sorts reviews randomly. - "latest": Sorts reviews based on the latest ones (default). | "latest" | "random" | "top_rating" | "latest" |
source | source | Specifies the data source for reviews. Valid options include: - 'categories': Retrieves reviews for specific product categories. - 'products': Retrieves reviews for individual products. - 'json': Uses the reviews from a custom JSON payload provided in sourceValue, without calling the API. When using 'json' as the source, a valid payload must be provided in sourceValue. If omitted, no source is sent to the API and sourceValue is passed through as is. | "categories" | "json" | "products" | |
sourceValue | source-value | Provides data specific to the chosen source. Required when using 'categories', 'products', or 'json' as the source: - 'categories': A JSON string of an array of category IDs, for example "[1, 2]". - 'products': A JSON string of an array of product IDs, for example "[123456]". - 'json': A JSON string of an object { "data": [ { "name", "content", "stars", "avatar" } ] }, where stars is a number of stars for salla-rating-stars. | number[] | object | string | |
type | type | Specifies the type of reviews to fetch. Available options: - "all": Fetches reviews from all sources. - "store": Fetches reviews specific to the store. - "products": Fetches reviews specific to products. | "all" | "products" | "store" | "store" |
Related
Renders: <salla-slider>, <salla-rating-stars>.
salla-review-card
A card for one customer review: images (a swipeable slider when there are several), reviewer name with a verified mark, 5 star rating, review text, and a link to the reviewed product with its image an
salla-reviews-page
A full reviews page for the store's product reviews: a sort dropdown, a masonry grid of salla-review-card items, and a "load more" button.