Server Side Fetching
Wishlist

Wishlist

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.

Badge

Add fetching data

import { getWishlistInfo } from '@sledge-app/api';
 
export async function loader({context}: LoaderArgs) {
    ...
    const wishlistInfo = await getWishlistInfo( {sledgeSession} );
 
    return defer({
        ...
        wishlistInfo,
    })
}

Add data to component props

import { Badge } from '@sledge-app/react-wishlist';
import { Link } from '@remix-run/react';
 
export function HeaderMenu(){
    return (
        ...
        <Link to="/wishlist">
            <Badge data={data?.wishlistInfo} />
        </Link>
        ...
    )
}

Trigger

Add fetching data

import { wishlistCheck } from '@sledge-app/api';
 
export async function loader({ request, context }: LoaderArgs) {
    ...
    // list id of product
    const productIds = ['8003210969391','8003210969392','8003210969393'];
    const wishlists = await wishlistCheck({sledgeSession, productIds});
 
    return defer({
        ...
        wishlists
    });
}

Add data to component props

import {Trigger} from '@sledge-app/react-wishlist';
...
export default function Product() {
    const data = useLoaderData<typeof loader>();
    ...
    return (
        ...
        <Trigger
            params={{
                productId: parseGid(product.id).id,
                productVariantId: selectedVariant.id,
                productName: product.title,
                productVendor: product.vendor,
                productSku: selectedVariant.sku,
                productVariantName: selectedVariant.name,
                productLink: `${storeUrl}/products/${product.handle}`,
                productImage: product.images.nodes[0].url,
                productCurrency: product.priceRange.minVariantPrice.currencyCode,
                productPrice: product.priceRange.minVariantPrice.amount,
            }}
            wishlistChecked={data?.wishlists[parseGid(product.id).id]}
        />
    )
}

List

Add fetching data

import {LoaderFunction} from '@shopify/remix-oxygen';
import {
    getProductsReviewInfo,
    getWishlist,
    getWishlistInfo,
} from '@sledge-app/api';
 
export const loader: LoaderFunction = async ({context}) => {
    const sledgeSession = context.session.get('sledgeSession');
    const wishlists = await getWishlist({sledgeSession});
    const wishlistInfo = await getWishlistInfo( {sledgeSession} );
    const productIds = wishlists.data.map((v: any) => v.product.id);
    const reviews = await getProductsReviewInfo({sledgeSession, productIds});
    return {wishlists, wishlistInfo, reviews};
};

Add data to component props

import {Widget, WidgetHeader} from '@sledge-app/react-wishlist';
...
export default function Wishlist() {
    const data = useLoaderData();
    return (
        <Widget.Root
            data={data.wishlists}
            dataInfo={data.wishlistInfo}
            dataReviews={data.reviews}
        >
            <WidgetHeader>
                <WidgetHeader.Title text="My Wishlist" />
                <WidgetHeader.SearchForm placeholder="Search product" />
                <WidgetHeader.ClearTrigger buttonText="Clear Wishlist" />
                <WidgetHeader.ShareTrigger buttonText="Share Wishlist" />
                <WidgetHeader.Sort />
                <WidgetHeader.Limit options={[10, 25, 50, 100]} />
            </WidgetHeader>
            <Widget.List gridType="large" />
        </Widget.Root>
    );
}
GlobalProduct Review