salla-comment-form
A form for a customer to post a comment on a page, blog post or product.
A form for a customer to post a comment on a page, blog post or product. It renders nothing unless the current customer
is allowed to comment (user.can_comment in the store config). The text is required, between 4 and 500 characters, and a
submitted comment is sent for review (it is marked pending). Use it with salla-comments, which can listen to commentAdded
to show the new comment right away.
Use it
In HTML or JSX, use the tag <salla-comment-form> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaCommentForm } from '@salla.sa/twilight-components-react/comment-form';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.
Try it
Example
import { SallaCommentForm } from '@salla.sa/twilight-components-react/comment-form';
export function Example() {
return (
<SallaCommentForm type="blog" itemId="42" showAvatar />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
itemId | item-id | The ID of the product, page or blog post (as defined by type) the comment is for. When the store is ready it is set to the current page ID from the store config. | number | string | |
showAvatar | show-avatar | Shows the current customer's avatar next to the text box. | boolean | |
type | type | Type of entity the comment is for: product, page or blog. When the store is ready it is set from the current page: page on a single page, blog on a single blog post, otherwise product. | "blog" | "page" | "product" |
Events
Listen with addEventListener, or the on prop of the React wrapper (for example onModalBack).
| Event | Description | Detail |
|---|---|---|
commentAdded | Fires after the comment was sent successfully. event.detail is a locally built comment object, not the server response: name and avatar of the current customer, content (the submitted text), is_pending (always true), created_at.date (UTC time as YYYY-MM-DD HH:mm:ss) and an empty images array. | { id?: number; avatar?: string; name?: string; content?: string; is_pending?: boolean; created_at?: { date?: string; }; images: string[]; } |
Related
Renders: <salla-button>.
Used inside: <salla-comments>.
salla-orders
The logged-in customer's orders page: a table of orders (number, status, total, date) that loads more rows with a "load more" button.
salla-comments
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.