Twilight docs

Lists the comments or reviews for a page, product or blog post, with a sort dropdown, a "load more" button and, unless hidden, a form to add a comment.

Lists the comments or reviews for a page, product or blog post, with a sort dropdown, a "load more" button and, unless hidden, a form to add a comment. Use it on product, page or blog templates to show customer feedback. Set testimonials to show store reviews instead.

The sort dropdown is a native select with a label. On product pages it also renders a reviews summary.

Use it

In HTML or JSX, use the tag <salla-comments> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaComments } from '@salla.sa/twilight-components-react/comments';

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 { SallaComments } from '@salla.sa/twilight-components-react/comments';

export function Example() {
  return (
    <SallaComments type="product" itemId={123456} />
  );
}

import { SallaComments } from '@salla.sa/twilight-components-react/comments';

export function Example() {
  return (
    <SallaComments testimonials />
  );
}

Properties

Property	Attribute	Description	Type	Default
`blockTitle`	`block-title`	Custom heading shown above the list instead of the default "Overall rating". It only shows when there is at least one comment and `hideTitle` is false.	`string`
`hideBought`	`hide-bought`	Hides the "bought" indicator on each comment (passed to every comment item as `hideBought`).	`boolean`	`false`
`hideForm`	`hide-form`	Hides the form used to add a comment. It is always hidden when `testimonials` is true.	`boolean`
`hideTitle`	`hide-title`	Hides the heading above the list. It is always hidden when `testimonials` is true.	`boolean`
`itemId` (required)	`item-id`	ID of the page, product or blog post the comments belong to. Not used when `testimonials` is true.	`number`
`loadMoreText`	`load-more-text`	Text of the "load more" button. Defaults to the translated "Load more" label.	`string`
`showFormAvatar`	`show-form-avatar`	Shows the customer avatar in the comment form. Has no effect when the form is hidden.	`boolean`	`false`
`sort`	`sort`	Initial sort order: `latest`, `oldest`, `bottom_rating`, `top_rating`, `most_helpful` or `verified_purchases`. A `sort` query parameter in the page URL overrides it, and choosing a value in the dropdown replaces it.	`string`
`testimonials`	`testimonials`	Shows the store's testimonials (store reviews) instead of comments for `item-id`. It also hides the title and the comment form.	`boolean`	`false`
`type`	`type`	What the comments are attached to: `page`, `product` or `blog`. The sort dropdown is not shown for `blog`.	`CommentType.BLOG \| CommentType.PAGE \| CommentType.PRODUCT`	`CommentType.PAGE`