npm package: @secomus/uppromote-hydrogen
Description: UpPromote Shopify App - Hydrogen
Author: Tiendungkid
Latest version: 0.1.4
Deprecated: Warning: This Hydrogen package will be deprecated soon.  
Please switch to UpPromote Pixel tracking to avoid disruptions.  
For setup instructions, Web Pixel Setup Guide for Hydrogen Store (https://docs.uppromote.com/settings/integrations/others#third-party-tracking-integration)

# UpPromote Hydrogen App

## Installation

### Step 1: Create a new Hydrogen app

You can create a Hydrogen app locally using yarn, npm, or npx.
> NOTE: If you've already created a Hydrogen app, you can jump ahead to Step 4

If you want to [integrate with an existing React framework](https://shopify.dev/docs/custom-storefronts/hydrogen-react),
like [Next.js](https://nextjs.org/) or [Gatsby](https://www.gatsbyjs.com/), then you can add the
[@shopify/hydrogen](https://www.npmjs.com/package/@shopify/hydrogen) NPM package to your project.

We only support development framework <b>Hydrogen version 2</b> and above. You can learn how to upgrade to <b>Hydrogen
version 2</b> using
this [link](https://shopify.dev/docs/custom-storefronts/hydrogen/migrate-hydrogen-remix)

1. Navigate to your working directory.
   ```shell
   cd <directory>
   ```
2. Create your project.

   Create a new Hydrogen project with a default template linked to a demo-store with the
   following [this tutorial](https://shopify.dev/docs/custom-storefronts/hydrogen/getting-started/quickstart):

### Step 2: Link your Shopify Storefront

Connect your Hydrogen app to your Shopify storefront by updating the properties in the `.env` file. You will
need
to [generate a Storefront API access token](https://help.shopify.com/en/manual/apps/app-types/custom-apps?shpxid=5ef5d325-B992-4F4F-3A6D-0FACECA2B482#install-the-app-and-get-the-api-access-tokens)
for your Hydrogen app to communicate with your Shopify store.

### Step 3: Start a development server

Create a new local development server to start testing your changes.

1. Navigate to the root of your project directory:

   ```shell
   cd <directory>
   ```

2. Start the development server

   Start up a new local development server on `localhost:`
   ```shell
   npm run dev
   ```
   The development environment will open at http://localhost:3000.

### Step 4: Install Uppromote package

1. Install Uppromote Package
   ```shell
   npm install @secomus/uppromote-hydrogen
   ```
2. Open root file (`root.tsx` | `root.js`) and add Uppromote Component

```typescript jsx

<html lang={locale.language}>
<head>
	...
</head>
<body>
...
<Await resolve={data.cart}>
	{(cart) => (
		<Uppromote
			cart={data.cart}
			publicStoreDomain={env.PUBLIC_STORE_DOMAIN}
			publicStorefrontApiToken={env.PUBLIC_STORE_FRONT_API_TOKEN}
			publicStorefrontApiVersion={env.PUBLIC_STOREFRONT_API_VERSION}
		/>
	)}
</Await>
</body>
</html>
```

- Fill your token information to Uppromote component. You need to provide `Cart` for the app to work. Read
  the [documentation](https://shopify.dev/docs/custom-storefronts/hydrogen/cart/fetch) to know how to fetch the Cart

[//]: # (- You can get Uppromote Access Token in your [app setting]&#40;https://af.uppromote.com/admin/settings/integration&#41;)
### Step 6: Add a content security policy

In your `app/entry.server.tsx` / `app/entry.server.js` file add our API endpoint to your list

```typescript

const {nonce, header, NonceProvider} = createContentSecurityPolicy({
	connectSrc: [
		'https://track.uppromote.com',
		'https://cdn.uppromote.com',
		'https://d1639lhkj5l89m.cloudfront.net',
		...
	],
	defaultSrc: [
		'https://shopify.com',
		'https://track.uppromote.com',
		'https://cdn.uppromote.com',
		'https://d1639lhkj5l89m.cloudfront.net',
		...
	],
	styleSrc: ['https://d1639lhkj5l89m.cloudfront.net', ...],
})
```

If createContentSecurityPolicy does not exist on your Hydrogen app, follow [this shopify docs](https://shopify.dev/docs/custom-storefronts/hydrogen/content-security-policy) for adding a content security policy.


## API & Events

We provide you with several APIs to help develop your store

1. Trigger when affiliate has been tracked

   ```js
   window.addEventListener('uppromote:tracked-affiliate', function (event) {
       console.log(event.detail)
   })
   ```

2. Trigger when facebook pixel code has been initialized

   ```js
   window.addEventListener('uppromote:pull-fb-pixel', function (event) {
       const { affiliateId, pixel } = event.detail
   })
   ```

## Customer referral widget

You need import our css to your root file:

```typescript jsx
import customerReferralStyle from '@secomus/uppromote-hydrogen/dist/styles/customer-referral.css'

...

export function links() {
   return [
      {rel: 'stylesheet', href: customerReferralStyle},
      ...
   ]
}
```