# 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*](https://judge.me/settings?jump_to=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:
```jsx
  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:
    ```jsx
    <JudgemeVerifiedBadge id={product.id}/>
    ```
#### **Other widgets**
```jsx
  <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](https://shopify.dev/custom-storefronts/hydrogen)