Bigcommerce Headless Yotpo Bottom Line

Step 1: Create an yotpo-bottomline.tsx

Create a yotpo-bottomline.tsx under components/opt7 directory.

yotpo-bottomline.tsx

'use client';

import { FC, useEffect } from 'react';

import { loadYotpoWidgetJS } from '~/lib/yotpo-client';

const YotpoBottomline: FC<{ productId: number }> = ({ productId }) => {
    useEffect(() => {
        loadYotpoWidgetJS();
    }, []);

    return (
        <div className="yotpo-star-rating | flex w-full justify-between">
            <div
                className="yotpo bottomLine  yotpo-small"
                data-appkey={process.env.YOTPO_APP_KEY}
                data-product-id={productId}
            />
            <div
                className="yotpo QABottomLine yotpo-small"
                data-appkey={process.env.YOTPO_APP_KEY}
                data-product-id={productId}
            />
        </div>
    );
};

export default YotpoBottomline;

Usage

.
.
import YotpoBottomline from '~/components/opt7/yotpo/yotpo-bottomline';
.
.
export const Details = ({ product }: { product: NonNullable<Product> }) => {
.
.
.
    return (
        .
        .
        <Suspense
            fallback={
                <YotpoBottomLineFallback
                    SSRContent={`${product.yotpo[1]?.result}`}
                    productId={product.entityId}
                />
            }
        >
            <YotpoBottomline productId={product.entityId} />
        </Suspense>
    )
}

Happy Hacking! 🧡