Hydrogen x Judge.me Widgets

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

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.
• Widgets may appear twice (depends on your delay config)

Getting Started

Installation:

• Install module: npm i @judgeme/shopify-hydrogen-2
• Edit content and rename .env.development.example to .env:

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 your 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 '@kyakaze/shopify-hydrogen-2'
//...

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-2";

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