salla-review-factors-tags
Shows the per-factor ratings of a product review as small pill tags, each with the factor name, a star icon and the rating number (for example "Quality ★ 5").
Used inside salla-reviews
<salla-reviews> renders this component for you. You rarely use it directly.
Shows the per-factor ratings of a product review as small pill tags, each with the factor name, a
star icon and the rating number (for example "Quality ★ 5"). Use it next to a review on the
customer's order or review pages. Pass the factors directly with factors, or give an order-id
and let it read them from the order (the order response is cached for 5 minutes). Renders nothing
when there are no factors.
Use it
In HTML or JSX, use the tag <salla-review-factors-tags> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaReviewFactorsTags } from '@salla.sa/twilight-components-react/review-factors-tags';Example
import { SallaReviewFactorsTags } from '@salla.sa/twilight-components-react/review-factors-tags';
export function Example() {
return (
<SallaReviewFactorsTags orderId={123456} productId={987654} />
);
}import { useEffect } from 'react';
import { SallaReviewFactorsTags } from '@salla.sa/twilight-components-react/review-factors-tags';
export function Example() {
useEffect(() => {
document.getElementById('tags').factors = [
{ name: 'Quality', rating: 5 },
{ name: 'Delivery', rating: 4 },
];
}, []);
return (
<SallaReviewFactorsTags id="tags" />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
factors | factors | Preloaded review factors, as an array of { name, rating?, id? }, where rating is a number from 1 to 5. When it is not empty, no order is fetched. Set it as a JavaScript property. | ReviewFactor[] | |
itemId | item-id | Order item ID used to match the rated line item. Used with order-id. | number | |
orderId | order-id | Order ID used to fetch rating factors from GET /orders/{order_id}. Use it together with rating-id, product-id or item-id to say which rated product of the order to show. Ignored when factors is set. | number | |
productId | product-id | Product ID used to match the rated line item. Used with order-id. | number | |
ratingId | rating-id | Product rating feedback ID. Used with order-id to find the rated product in the order. | number |
Related
Used inside: <salla-review-order-item>, <salla-reviews-summary>.