Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/DynamicYield/shopify-hydrogen-demo
https://github.com/DynamicYield/shopify-hydrogen-demo
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/DynamicYield/shopify-hydrogen-demo
- Owner: DynamicYield
- License: apache-2.0
- Created: 2023-06-16T13:39:55.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-04-16T13:52:06.000Z (7 months ago)
- Last Synced: 2024-04-16T16:42:47.981Z (7 months ago)
- Language: JavaScript
- Size: 646 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-hydrogen - Dynamic Yield - Personalization. (Apps & Integrations)
README
# Hydrogen Demo store integrating Dynamic Yield
This demo store is a clone of the `demo-store` template [provided by Shopify](https://shopify.dev/docs/custom-storefronts/hydrogen/getting-started/quickstart) with examples of how to integrate the Dynamic Yield APIs.
## Requirements
- A Dynamic Yield account
- [Dynamic Yield v2](https://apps.shopify.com/dynamic-yield-v2) Shopify app
- Node.js version 16.14.0 or higher
## Configure environmental variables.
Add two variables to the .env file in the root of your project:
- DY_API_KEY="YOUR DY API KEY HERE"
- DY_API_HOST="https://dy-api.com"
If hosting on Oxygen, these variables can be configured in the [admin interface](https://shopify.dev/docs/custom-storefronts/oxygen/storefronts/environment-variables).
## Start the demo store locally
```bash
npm run dev
```
## Dynamic Yield API integration
The following files contain the changes related to the Dynamic Yield APIs:
- [dyapi.jsx](/app/dyapi.jsx) is added to the app directory. This file contains some Dynamic Yield helper functions.
- [root.jsx](/app/root.jsx) includes code to trigger pageview tracking to Dynamic Yield.
- The helper function `useContextFromLoaders` gets the context information from the routes.
- `useLocation` is used to trigger client side calls back to a new route: `/api/pv`
- [app/routes/($locale).api.pv.jsx](app/routes/($locale).api.pv.jsx) A new route to handle pageview calls and trigger calls to the Dynamic Yield API using the `reportPageView` function from dyapi.jsx.
- [app/routes/($locale)._index.jsx](app/routes/($locale)._index.jsx) includes code to specify the Dynamic Yield 'page context' (homepage) and make a request to the choose endpoint of the Dynamic Yield API for the campaign `HP Hero`. The data returned from the API is used to replace the default primaryHero.
- [app/routes/($locale).products.$productHandle.jsx](app/routes/($locale).products.$productHandle.jsx) includes code to set the correct page context (product). A placeholder call is made to the choose endpoint (no campaigns are requested yet).
- [app/routes/($locale).products._index.jsx](/app/routes/($locale).products._index.jsx) includes code to set the correct page context (category). A placeholder call is made to the choose endpoint (no campaigns are requested yet).