Hydrogen x Judge.Me Widgets

This module helps integrate Judge.me Widgets to Hydrogen app. Currently, it works mostly on the client side. Judge.me review data will be fetched from Judge.me CDN (not from metafields)

Getting Started

Requirements:

• Node.js version 16.5.0 or higher
• Yarn

Installation:

• Install module: npm i @kyakaze/judgeme-hydrogen
• Remember to update hydrogen.config.js with your shop's domain and Storefront API token!
• Edit content and rename .env.development.example to .env.development OR update these variables:

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

• Install devs npm install
• Start dev server: npm run dev

Deploy

• Shopify doc

Usage:

A. Config:

  <JudgemeProviderWrapper
      shopDomain={Oxygen.env.JUDGEME_SHOP_DOMAIN}
      publicToken={Oxygen.env.JUDGEME_PUBLIC_TOKEN}
      cdnHost={Oxygen.env.JUDGEME_CDN_HOST}
  >

Using Module:

There are 2 ways to use this module in your project:

1. Using predefined composition Provider

import {JudgemeProviderWrapper} from "@kyakaze/judgeme-hydrogen";

//...
function App() {
  return (
    <Suspense fallback={null}>
      <ShopifyProvider>
        <JudgemeProviderWrapper>
          <CartProvider>
            <Router>
              <FileRoutes/>
            </Router>
          </CartProvider>
        </JudgemeProviderWrapper>
      </ShopifyProvider>
    </Suspense>
  );
}

Our module uses external script from Judge.me core server, therefore any changes will not be detected by React. Using this JudgemeProviderWrapper will automatically re-render widgets after they are loaded.

If you don't want to trigger it on every page, consider the second approach.

2. Manually load widget

Firstly, add the Provider

import {JudgemeProvider} from "@kyakaze/judgeme-hydrogen";

function App() {
  return (
    <Suspense fallback={null}>
      <ShopifyProvider>
        <JudgemeProvider/>
        <CartProvider>
          <Router>
            <FileRoutes/>
          </Router>
        </CartProvider>
      </ShopifyProvider>
    </Suspense>
  );
}

Then you can load widgets on a selected page or component by adding <JudgemePreloader /> component at the end of pages or components (preferably pages since you should render this component only once to avoid mismatch between server and client DOM error) in which you use the widgets.

• Example for loading one widget inside a component:

import {JudgemePreviewBadgeClient, JudgemePreloader} from "@kyakaze/judgeme-hydrogen";

function SampleComponent({product}) {
  return (
    <div>
      <JudgemePreviewBadgeClient id={product.id}/>
      <JudgemePreloader/>
    </div>
  )
}

• Example for loading multiple widgets inside a component:

import {JudgemePreviewBadgeClient, JudgemePreloader} from "@kyakaze/judgeme-hydrogen";

function SampleComponent({products}) {
  return (
    <div>
      {products.map(product => {
        return <JudgemePreviewBadgeClient id={product.id}/>
      })}
      <JudgemePreloader/>
    </div>
  )
}

• Example for loading many widgets nested inside a page:

import {
  JudgemePreviewBadgeClient,
  JudgemeCarouselClient,
  JudgemeVerifiedBadgeClient,
  JudgemePreloader
} from "@kyakaze/judgeme-hydrogen";

// ...
function SampleComponent({products}) {
  return (
    <div>
      {products.map(product => {
        return <JudgemePreviewBadgeClient id={product.id}/>
      })}
      <JudgemeCarouselClient/>
      <JudgemeVerifiedBadgeClient/>
      <SomeOtherComponentWhichUseJudgemeWidgets/>
      <JudgemePreloader/>
    </div>
  )
}

B. Widgets:

Currently we support only client widget components. Here is the list of our widget components:

import {
  JudgemeMedalsClient,
  JudgemeCarouselClient,
  JudgemeReviewsTabClient,
  JudgemePreviewBadgeClient,
  JudgemeReviewWidgetClient,
  JudgemeVerifiedBadgeClient,
  JudgemeAllReviewsCountClient,
  JudgemeAllReviewsRatingClient,
} from "@kyakaze/judgeme-hydrogen";

Review Widget

• Component name: JudgemeReviewWidgetClient
• Required props: product id, it could be either shopify graph ID or simply ID: gid://shopify/Product/12345678, 12345678.

Preview Badge

• Component name: JudgemePreviewBadgeClient
• Required props: product id, it could be either shopify graph ID or just ID: gid://shopify/Product/12345678, 12345678.

TODO: Use table for better UIUX

References

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

Check out the docs

Run this template on StackBlitz