# 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](https://shopify.dev/custom-storefronts/hydrogen/deployment)

# Usage:

### A. Config:
```jsx
  <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

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

```jsx
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:

```jsx
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:

```jsx
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:

```jsx
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:

```js
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](https://shopify.dev/custom-storefronts/hydrogen)

[Run this template on StackBlitz](https://stackblitz.com/github/Shopify/hydrogen/tree/stackblitz/templates/hello-world-js)