@kyakaze/shopify-hydrogen-2/README.md

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

# 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:
```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 '@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:

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