Skip to content
Twilight React Playground
ثيم رائدaren

Testimonials

componentBeginnerserverbrowserlive demo

Shows the store's customer reviews, fetched by Salla's reviews web component, with type, sort, limit and privacy options.

import { Testimonials } from '@salla.sa/twilight-theme-engine/components/home';

In plain words

Customer reviews: the store's own, the products', or both. Salla's reviews element fetches and draws them; you only choose which ones, in what order, how many, and whether to hide the customers' names and pictures.

It is the one home block that is lazy, so it goes inside <Suspense>.

Signature

const Testimonials: React.LazyExoticComponent<React.MemoExoticComponent<(props: {
  data: {
    type?: 'all' | 'store' | 'products';        // 'store'
    sort?: 'top_rating' | 'random' | 'latest';  // 'latest'
    limit?: string | number;                     // 10
    hide_customer_info?: boolean;                // false
    display_all_url?: string;                    // any value shows a "view all" link
    [key: string]: unknown;
  };
}) => JSX.Element>>

Try it live

This store's real customer reviews, fetched and drawn by Salla's reviews web component inside Testimonials.Try this: switch type to products, then tick hide_customer_info to drop names and avatars.
Storefront canvas · en · LTR
Controls
hide_customer_info
What a theme writes
import { Suspense } from 'react';
import { Testimonials } from '@salla.sa/twilight-theme-engine/components/home';

export function Reviews() {
  return (
    <Suspense fallback={null}>
      <Testimonials data={{
        limit: 6,
      }} />
    </Suspense>
  );
}

Example

app/components/home/Reviews.tsx
import { Suspense } from 'react';
import { Testimonials } from '@salla.sa/twilight-theme-engine/components/home';

export function Reviews() {
  return (
    <Suspense fallback={null}>
      <Testimonials data={{ type: 'products', sort: 'top_rating', limit: 6 }} />
    </Suspense>
  );
}

How it behaves

  • It renders SallaReviews from @salla.sa/twilight-components-react with limit, sort and type, plus displayAllLink and hideCustomerInfo when set. The reviews are requested by that component through the SDK, in the browser.

  • Registered as testimonial (singular) in DefaultHomeComponents. The engine's product page also renders it, with data={{}}.

Gotchas

  • packages/theme-engine/docs/HOME_COMPONENTS.md lists sort: latest | best | oldest and type: store | products | product. The component types are top_rating | random | latest and all | store | products.

  • display_all_url only switches the link on; the URL itself is not passed on.

  • limit goes through parseInt: a value like "six" becomes NaN.

Related

DefaultHomeComponents

The engine's 13 built-in home blocks, keyed by block path, ready to spread into registerHomeComponents.

Source and docs