Bigcommerce Headless Yotpo Bottom Line Fallback

Step 1: Create an yotpo-bottomline-fallback.tsx

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

yotpo-bottomline-fallback.tsx

import { FC } from 'react';

/* eslint-disable jsx-a11y/anchor-is-valid */
const YotpoBottomLineFallback: FC<{ productId: number; SSRContent: string }> = ({
                                                                                    productId,
                                                                                    SSRContent,
                                                                                }) => (
    <div className="flex w-full justify-between">
        <div
            className="yotpo bottomLine yotpo-small"
            dangerouslySetInnerHTML={{ __html: SSRContent }}
            data-product-id={productId}
        />
        <div
            className="yotpo QABottomLine yotpo-small"
            data-product-id="19401"
            data-yotpo-element-id="3"
        >
            <div className="yotpo-display-wrapper" style={{ visibility: 'hidden' }}>
                <div className="standalone-bottomline">
                    <div className="yotpo-bottomline pull-left">
                        <span className="yotpo-icon yotpo-icon-double-bubble pull-left" />
                        <a className="pull-left text-m ask-question" href="/docs/1.0/BC-Headless/Yotpo/BottomLineFallback/README#">
                            Ask a question
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
);

export default YotpoBottomLineFallback;

Usage

.
.
import YotpoBottomLineFallback from '~/components/opt7/yotpo/yotpo-bottomline-fallback';
.
.
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! 🧡