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/shopify-hydrogen@2.0.0
• 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 `jsx 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:

```js
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