Product Review

If you prefer to fetch Sledge data on the server instead doing fetch on the client browser. You can use Sledge's API package called @sledge-app/api.

Basically the steps as simple as fetching data on server then pass that data to Sledge components, follow steps by steps below to see how to do the server side fetching.

Rating

Add fetching data

import { getProductsReviewInfo } from '@sledge-app/api';
 
export async function loader({context}: LoaderArgs) {
    ...
    const productIds = ['8003210969391','8003210969392','8003210969393'];
    const sledgeSession = context.session.get('sledgeSession');
    const reviews = await getProductsReviewInfo({sledgeSession, productIds});
 
    return defer({
        ...
        reviews
    });
}

Add data to component props

import { Rating } from '@sledge-app/react-product-review';
 
export default function Homepage() {
    const data = useLoaderData();
 
    return(
        ...
        <Rating
            params={{productId: parseGid(product.id).id}}
            data={data.reviews[parseGid(product.id).id]}
        />
        ...
    )
}

List

Add fetching data

import { getProductsReviewInfo, getReview, getSledgeSettings } from '@sledge-app/api';
 
export async function loader({params, request, context}: LoaderArgs) {
    ...
    const sledgeSession = context.session.get('sledgeSession');
    const sledgeSettings = await getSledgeSettings({ sledgeSession });
    const reviews = await getProductsReviewInfo({sledgeSession, productIds
    :[product.id]});
    const reviewList = await getReview({sledgeSession, productId: product.id});
    ...
 
    return {..., ..., reviews, reviewList, getSledgeSettings};
}

Add data to component props

import { Rating, Widget, WidgetHeader } from '@sledge-app/react-product-review';
 
export default function Product() {
    const {product, variants, reviewList, reviews} = useLoaderData<typeof loader>();
    const {selectedVariant} = product;
 
    ...
 
    return (
        ...
        <Widget.Root
            params={{
                productId: parseGid(product.id).id,
                productVariantId: selectedVariant?.id
                ? parseGid(selectedVariant.id)?.id
                : '',
            }}
            onAfterAddReview={(state) => {}}
            data={reviewList}
            sledgeSettings={sledgeSettings}
        >
            <WidgetHeader>
                <WidgetHeader.Summary summaryData={reviews[parseGid(product.id).id]} />
                <WidgetHeader.AddTrigger />
                <WidgetHeader.Sort />
            </WidgetHeader>
            <Widget.List />
        </Widget.Root>
        ...
    )
}

Wishlist Instant Search