Hydrogen x Judge.me Widgets

• This module helps integrate Judge.me Widgets to Hydrogen V2 storefront app. Currently, it works fully on the client side and widget data will be fetched from Judge.me CDN
• To see support for Hydrogen V1, please visit https://www.npmjs.com/package/@judgeme/shopify-hydrogen/v/1.0.1

Requirements

• Node version 16.5+
• Judge.me: "Awesome plan" to enable the platform independent review widgets feature

Known issues

• Widgets will flash (disappear and reappear swiftly) because of the way Hydrogen2 renders components. We will release a react version for the widgets in the future.
• "PreviewBadge" widget may appear twice (depends on your delay config, 500ms works fine on our test stores)

Getting Started

Installation:

• Install module: npm i @judgeme/shopify-hydrogen or explicitly npm i @judgeme/[email protected]
• In your .env file, add the following environment variables:

JUDGEME_SHOP_DOMAIN="your shop domain registered with Judge.me"
JUDGEME_PUBLIC_TOKEN="judge.me public token"
JUDGEME_CDN_HOST="https://cdn.judge.me"

Usage guide:

• Code below is taken from the Hydrogen V2 sample storefront.

A. Setup:

• In root.jsx file, loader function, add Judge.me configuration in the defer return E.g:

  return defer({
    // ... other properties
    judgeme: {
      shopDomain: context.env.JUDGEME_SHOP_DOMAIN,
      publicToken: context.env.JUDGEME_PUBLIC_TOKEN,
      cdnHost: context.env.JUDGEME_CDN_HOST,
      delay: 500, // optional parameter, default to 500ms
    },
  });

• In function App(), import and register judgeme module with credentials above

import {useJudgeme} from '@judgeme/shopify-hydrogen'
//...

export default function App() {
  const data = useLoaderData();
  useJudgeme(data.judgeme);
  // ... rest of your script
}

B. Widgets:

Below is the list of our widget components:

import {
  JudgemeMedals,
  JudgemeCarousel,
  JudgemeReviewsTab,
  JudgemePreviewBadge,
  JudgemeReviewWidget,
  JudgemeVerifiedBadge,
  JudgemeAllReviewsCount,
  JudgemeAllReviewsRating,
} from "@judgeme/shopify-hydrogen";

These following widgets require param id

• Components: JudgemeReviewWidget, JudgemePreviewBadge and JudgemeVerifiedBadge
• Required props: product id, it could be either shopify graph ID or simply ID: gid://shopify/Product/12345678, 12345678.
• example:

  <JudgemeVerifiedBadge id={product.id}/>

Other widgets

  <JudgemeAllReviewsCount />

References

Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.

Check out the docs