@kyakaze/shopify-hydrogen/README.md

- 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/@judg

# 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

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