@secomus/uppromote-hydrogen v0.0.9
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, like Next.js or Gatsby, then you can add the @shopify/hydrogen NPM package to your project.
We only support development framework Hydrogen version 2 and above. You can learn how to upgrade to Hydrogen version 2 using this link
- Navigate to your working directory.
cd <directory> Create your project.
Create a new Hydrogen project with a default template linked to a demo-store with the following this tutorial:
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
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.
Navigate to the root of your project directory:
cd <directory>Start the development server
Start up a new local development server on
localhost:npm run devThe development environment will open at http://localhost:3000.
Step 4: Install Uppromote package
- Install Uppromote Package
npm install @secomus/uppromote-hydrogen - Open root file (
root.tsx|root.js) and add Uppromote Component
<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
Cartfor the app to work. Read the documentation to know how to fetch the Cart
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
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 for adding a content security policy.
API & Events
We provide you with several APIs to help develop your store
Trigger when affiliate has been tracked
window.addEventListener('uppromote:tracked-affiliate', function (event) { console.log(event.detail) })Trigger when facebook pixel code has been initialized
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:
import customerReferralStyle from '@secomus/uppromote-hydrogen/dist/styles/customer-referral.css'
...
export function links() {
return [
{rel: 'stylesheet', href: customerReferralStyle},
...
]
}