@judgeme/shopify-hydrogen
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

Hydrogen x Judge.me Widgets

Requirements

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

Package Sidebar

Install

npm i @judgeme/shopify-hydrogen

Weekly Downloads

118

Version

2.0.0

License

ISC

Unpacked Size

18.7 kB

Total Files

43

Last publish

Collaborators

  • judgeme