Twilight
EngineWeb components

salla-comment-item

Renders one customer review or admin reply: avatar, name, date, stars, an optional "Review details" toggle with per-factor ratings, the text, attached images and videos, a "Helpful" like button and an

Used inside salla-comments

<salla-comments> renders this component for you. You rarely use it directly.

Renders one customer review or admin reply: avatar, name, date, stars, an optional "Review details" toggle with per-factor ratings, the text, attached images and videos, a "Helpful" like button and any replies. Used inside salla-comments, which creates one per comment; a theme rarely places it directly.

Attachments are shown only when the store settings allow images or videos. The like button needs the store's allow_likes rating setting and appears only on product pages (product.single) for non-admin comments that have an id; guests get a login message. Liked ids are remembered in localStorage under liked_comments. The "Review details" toggle is a native button.

Use it

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

import { SallaCommentItem } from '@salla.sa/twilight-components-react/comment-item';

Example

import { useEffect } from 'react';
import { SallaCommentItem } from '@salla.sa/twilight-components-react/comment-item';

export function Example() {
  useEffect(() => {
    document.getElementById('c').comment = {
      id: 1,
      name: 'Sara',
      avatar: 'https://example.com/a.png',
      content: 'Great product',
      rating: 5,
      has_order: true,
      created_at: { date: '2024-05-01 14:30:00' },
    };
  }, []);

  return (
    <SallaCommentItem id="c" />
  );
}

Properties

PropertyAttributeDescriptionTypeDefault
commentcommentThe comment to render. Set it as a JavaScript property. Uses id, name, avatar, content (rendered as HTML), rating or stars (1 to 5), has_order, is_pinned, is_pending, status ('hidden' marks a private comment with a lock icon), type ('admin' renders it as a reply), likes_count, images, videos, factor_reviews ({ name, rating, label? }[]), replies and created_at.date (a string like 2024-05-01 14:30:00). Renders nothing when empty.Comment
hideBoughthide-boughtWhen true, hides the "bought" and "rated" markers next to the commenter name.Boolean

Renders: <salla-rating-stars>, <salla-comment-factors>, <salla-tooltip>, <salla-attachments>, <salla-button>, <salla-comment-item>.

Used inside: <salla-comment-item>, <salla-comments>.

On this page

Use itExamplePropertiesRelated