uppromote-hydrogen
v0.0.2
Published
UpPromote Shopify App - Hydrogen
Downloads
1
Maintainers
nicolas.vn9xReadme
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 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={PUBLIC_STORE_DOMAIN}
publicStorefrontApiToken={PUBLIC_STORE_FRONT_API_TOKEN}
publicStorefrontApiVersion={PUBLIC_STOREFRONT_API_VERSION}
uppromoteAccessToken={UPPROMOTE_ACCESS_TOKEN}
/>
)}
</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 CartYou can get Uppromote Access Token in your app setting
Step 5: API
We provide you with several APIs to help develop your store
On affiliate tracked event
window.addEventListener('uppromote:tracked-affiliate', function (event) { console.log(event.detail) })On pulled facebook pixel
window.addEventListener('uppromote:pull-fb-pixel', function (event) { const { affiliateId, pixel } = event.detail })