@wapitee/typhoonx-hydrogen 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +12 -18
  2. package/dist/TyphoonX.js +40 -21
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,20 +1,20 @@
1
- # @wapitee/typhoonx-hydrogen
1
+ # TyphoonX for Shopify Hydrogen
2
2
 
3
- Hydrogen `useAnalytics` subscriber that sends TyphoonX storefront events.
3
+ [![npm package](https://img.shields.io/npm/v/@wapitee/typhoonx-hydrogen?style=flat-square)](https://www.npmjs.com/package/@wapitee/typhoonx-hydrogen)
4
+ [![MIT License](https://img.shields.io/badge/License-MIT-red.svg?style=flat-square)](https://opensource.org/licenses/MIT)
4
5
 
5
- This is not a Shopify Web Pixel. Place it in a Hydrogen storefront, inside `Analytics.Provider`.
6
+ Hydrogen `useAnalytics` subscriber that sends TyphoonX storefront events.
6
7
 
7
8
  ## Install
8
9
 
9
10
  ```bash
10
- pnpm add @wapitee/typhoonx-hydrogen
11
+ npm install --save @wapitee/typhoonx-hydrogen
11
12
  ```
12
13
 
13
- Peer dependencies: `react` ^18.3.1 and `@shopify/hydrogen` >=2025.5.1. Node.js 20 or later.
14
-
15
14
  ## Usage
16
15
 
17
16
  ```tsx
17
+ // app/root.tsx
18
18
  import {Analytics} from '@shopify/hydrogen';
19
19
  import TyphoonX from '@wapitee/typhoonx-hydrogen';
20
20
 
@@ -28,9 +28,7 @@ export function App() {
28
28
  }
29
29
  ```
30
30
 
31
- The component renders `null`.
32
-
33
- Also update `app/entry.server.tsx` to allow TyphoonX in the content security policy:
31
+ If your Shopify Hydrogen project sets a Content-Security-Policy, add `https://spell.typhoonx.io` to `connect-src` so event collection is not blocked.
34
32
 
35
33
  ```javascript
36
34
  const {nonce, header, NonceProvider} = createContentSecurityPolicy({
@@ -44,15 +42,11 @@ const {nonce, header, NonceProvider} = createContentSecurityPolicy({
44
42
 
45
43
  ### Props
46
44
 
47
- | Prop | Type | Required | Description |
48
- | -------------- | -------- | -------- | ----------------------------------------------------------------------------------------------------------- |
49
- | `merchantId` | `string` | yes | TyphoonX account key (`TPX-…`) |
50
- | `shopId` | `string` | yes | Shopify shop numeric id |
51
- | `cookieDomain` | `string` | no | Cookie `Domain` for a first-party client id. Omit for a host-only cookie (recommended on `*.myshopify.com`) |
52
-
53
- ```ts
54
- import type {TyphoonXProps} from '@wapitee/typhoonx-hydrogen';
55
- ```
45
+ | Prop | Type | Required | Description |
46
+ | -------------- | -------- | -------- | ------------------------------------------------------------------------ |
47
+ | `merchantId` | `string` | yes | TyphoonX merchant ID (`TPX-…`) |
48
+ | `shopId` | `string` | yes | Shopify store ID |
49
+ | `cookieDomain` | `string` | no | Cookie `Domain` for a first-party client id. Omit for a host-only cookie |
56
50
 
57
51
  ## License
58
52
 
package/dist/TyphoonX.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { parseGid, useAnalytics } from '@shopify/hydrogen';
2
+ import { flattenConnection, parseGid, useAnalytics } from '@shopify/hydrogen';
3
3
  import { useEffect, useRef, useState } from 'react';
4
4
  import { getOrCreateClientId } from './client-id.js';
5
5
  const COLLECT_ENDPOINT = 'https://spell.typhoonx.io/api/v1/receive';
@@ -44,30 +44,29 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
44
44
  user_agent: window.navigator.userAgent,
45
45
  ...(currency === undefined ? {} : { currency }),
46
46
  });
47
- subscribe('page_viewed', (data) => {
48
- send({
49
- ...shared(data.url),
50
- event: 'page_view',
51
- });
52
- });
53
- subscribe('product_viewed', (data) => {
54
- const product = data.products[0];
55
- if (product === undefined) {
47
+ subscribe('cart_viewed', (data) => {
48
+ const { cart } = data;
49
+ if (!cart?.lines) {
56
50
  return;
57
51
  }
52
+ const cartLines = flattenConnection(cart.lines);
58
53
  send({
59
54
  ...shared(data.url, data.shop?.currency),
60
- event: 'view_item',
61
- items: [
62
- {
63
- item_brand: product.vendor,
64
- item_id: parseGid(product.id).id,
65
- item_name: product.title,
66
- price: product.price,
67
- quantity: 1,
68
- },
69
- ],
70
- value: product.price,
55
+ event: 'view_cart',
56
+ items: cartLines.map((line) => ({
57
+ item_brand: line.merchandise.product.vendor,
58
+ item_id: parseGid(line.merchandise.product.id).id,
59
+ item_name: line.merchandise.product.title,
60
+ price: line.merchandise.price.amount,
61
+ quantity: line.quantity,
62
+ })),
63
+ value: cart.cost.totalAmount.amount,
64
+ });
65
+ });
66
+ subscribe('page_viewed', (data) => {
67
+ send({
68
+ ...shared(data.url),
69
+ event: 'page_view',
71
70
  });
72
71
  });
73
72
  subscribe('product_added_to_cart', (data) => {
@@ -112,6 +111,26 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
112
111
  - Number(currentLine?.cost.totalAmount.amount ?? 0)),
113
112
  });
114
113
  });
114
+ subscribe('product_viewed', (data) => {
115
+ const product = data.products[0];
116
+ if (product === undefined) {
117
+ return;
118
+ }
119
+ send({
120
+ ...shared(data.url, data.shop?.currency),
121
+ event: 'view_item',
122
+ items: [
123
+ {
124
+ item_brand: product.vendor,
125
+ item_id: parseGid(product.id).id,
126
+ item_name: product.title,
127
+ price: product.price,
128
+ quantity: 1,
129
+ },
130
+ ],
131
+ value: product.price,
132
+ });
133
+ });
115
134
  ready();
116
135
  return () => {
117
136
  cancelled = true;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wapitee/typhoonx-hydrogen",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "TyphoonX Hydrogen Analytics subscriber",
5
5
  "homepage": "https://github.com/Wapitee-Interactive-Marketing-Limited/typhoonx-js/tree/main/packages/typhoonx-hydrogen",
6
6
  "bugs": {