Instant Search

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.

Search Result

Add fetching data

app/search-result.tsx

import { useLoaderData } from '@remix-run/react';
import { LoaderFunction } from '@shopify/remix-oxygen';
import { getResult, getSledgeSettings } from '@sledge-app/api';
 
export const loader: LoaderFunction = async ({context, request}) => {
    const paramsString = new URL(request.url).searchParams.toString();
    const searchParams = new URLSearchParams(paramsString);
 
    let sledgeSession = context.session.get('sledgeSession');
    const sledgeSettings = await getSledgeSettings( { sledgeSession } );
 
    const data = await getResult({
        sledgeSession,
        sledgeSettings,
        instantSearchApiKey: context.env.SLEDGE_INSTANT_SEARCH_API_KEY || '',
        searchParams,
        keyword: searchParams.get('q') || '',
    });
 
    return {
        ...data,
    };
};

Add data to component props

import { SearchResultWidget } from '@sledge-app/react-instant-search';
 
export default function SearchResult() {
    const data = useLoaderData();
 
    return (
        <SearchResultWidget
            query={{keyword: 'q'}}
            data={data}
            onAfterAddToCart={() => {}}
            onAfterAddWishlist={() => {}}
            onAfterRemoveWishlist={() => {}}
            onAfterRenderProduct={() => {}}
        />
    );
}

Product Review Product Filters