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
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 and name. Used by
salla-reviews-page for each review, and usable anywhere a single review should be shown, such as a home page
testimonials block.
Images: when the review has 2 or more images (review.images, an array of URLs) they are shown as a slider with
dots, which can be swiped or tapped. Otherwise the product images are used, as a slider if there are 2 or more, or
as one image. The product's sold count (review.product.sold_quantity) is shown only when the store setting
store.settings.product.total_sold_enabled is on. The slider dots are buttons with an English
aria-label ("Go to slide N").
Use it
In HTML or JSX, use the tag <salla-review-card> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaReviewCard } from '@salla.sa/twilight-components-react/review-card';Example
import { SallaReviewCard } from '@salla.sa/twilight-components-react/review-card';
export function Example() {
return (
<SallaReviewCard
review={{
name: 'Sara',
stars: 5,
has_order: true,
content: 'Great quality and fast delivery.',
images: [],
product: { name: 'Cotton shirt', url: '/p/shirt', sold_quantity: 40, image: { url: '/img/shirt.jpg', alt: '' }, images: [] },
}}
/>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
review | review | The review to render. Uses name, stars (a number from 0 to 5), has_order (shows the verified mark), content (the review text, inserted as HTML, so it must be trusted or escaped), images (array of image URLs) and product ({ name, url, image, images, sold_quantity }, where images are { url, alt }). product is read when the component loads, so set it before the element is connected. | { id?: number; replies?: Record<string, unknown>[]; content?: string; type?: string; avatar?: string; name?: string; stars?: number; is_pending?: boolean; has_order?: boolean; likes_count?: number; customer_id?: number; city?: string; date?: number; images?: string[]; text?: string; can_update?: boolean; product?: Product; shipping?: unknown; created_at?: CreatedAt; } |
Related
Used inside: <salla-reviews-page>.
salla-rating-stars
Shows a five star rating, either as a read-only display of a score or as an input the customer clicks to pick a rating.
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.