Product Filters

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.

Product Filter Result

Add fetching data

import {json, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
import {useLoaderData, Link} from '@remix-run/react';
import { parseGid} from '@shopify/hydrogen';
import {getResult, getSledgeSettings} from '@sledge-app/api';
 
export async function loader({request, params, context}: LoaderArgs) {
    ...
    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') || '',
        collectionId: parseGid(collection?.id).id,
        layoutType: 'product-filter',
    });
    return json({collection, data});
}

Add data to component props

import { ProductFilterWidget } from '@sledge-app/react-instant-search';
 
export default function Collection() {
    const data = useLoaderData<typeof loader>();
 
    return (
        <ProductFilterWidget
            data={data.data}
            query={{
                keyword: 'q'
            }}
            params={{
                collectionId: data.collection?.id,
                collectionName: data.collection?.title,
            }}
            onAfterAddToCart={() => {}}
            onAfterAddWishlist={() => {}}
            onAfterRemoveWishlist={() => {}}
            onAfterRenderProduct={() => {}}
        />
    );
}

Instant Search Custom Styles