Product Review

Make the appearance of the Sledge Product Review app remain in line with the theme you have using the custom components that Sledge provides.

Available custom components :

Review Product Info

Review Product Info

Review Product Info is custom component, will change product information each review cards.

Build a custom component, e.g:

app/components/SledgeReviewProductInfo.tsx

import { Link } from '@remix-run/react';
 
interface IReviewProductInfo {
    product: {name: string; url: string};
}
 
export function SledgeReviewProductInfo({product}: IReviewProductInfo) {
    const {name, url = '#'} = product || {};
 
    return (
        <div className="sledge-product-review__widget-about-product-text">
            About{' '}
            <Link
                className="sledge-product-review__widget-about-product-link"
                to={'/products/' + url}
                onClick={(e) => e.stopPropagation()}
            >
                {name}
            </Link>
        </div>
    );
}

Call custom component to prop

<CustomComponent> must be added as a child of another sledge's widget.

import { CustomComponents } from "@sledge-app/core";
import { HappyCustomersPage } from '@sledge-app/react-product-review';
import SledgeHappyCustomersPage from "~/components/SledgeHappyCustomersPage";
 
export default function SledgeHappyCustomersPage() {
    return (
    <HappyCustomersPage.Root>
        <CustomComponents
            reviewProductInfo={({product}: any) => {
                return <SledgeReviewProductInfo product={product} />;
            }}
        />
        <HappyCustomersPage.Header />
        <HappyCustomersPage.List />
    </HappyCustomersPage.Root>
    );
}

Wishlist Instant Search