@okendo/shopify-hydrogen 2.2.6 → 2.3.0

package/README.md

@@ -1,4 +1,4 @@
-> Note: this package is to be used on stores built with Hydrogen v2, based on Remix. If your store is built with the deprecated Hydrogen v1, please use the [version 1](https://www.npmjs.com/package/@okendo/shopify-hydrogen/v/1.3.0) of this package.
+> Note: this package is to be used on stores built with Hydrogen v2, based on Remix. If your store is built with the deprecated Hydrogen v1, please use the [version 1](https://www.npmjs.com/package/@okendo/shopify-hydrogen/v/1.6.6) of this package.
 
 # Okendo Hydrogen 2 (Remix) React Components
 
@@ -15,7 +15,7 @@ This package brings [Okendo's review widgets](https://www.okendo.io/blog/widget-
 
 Our demo store, which is based on the demo store provided by Shopify, can be found [here](https://github.com/okendo/okendo-shopify-hydrogen-demo).
 
-> Note: there have been multiple versions of Shopify's Hydrogen demo store. If your project is based on an old version of it, consult the history of our demo store's repository.
+> Note: there have been multiple versions of Shopify's Hydrogen demo store. If your project is based on an old version of it, consult the [history of our demo store's repository](https://github.com/okendo/okendo-shopify-hydrogen-demo/commits/master/).
 
 ## Exposition of Shopify Metafields <a id="expose-shopify-metafields" name="expose-shopify-metafields"></a>
 
@@ -42,7 +42,6 @@ unauthenticated_read_product_tags
 
 Follow the instructions on [this page](https://help.shopify.com/en/manual/apps/app-types/custom-apps#create-and-install-a-custom-app) to create it.
 
-
 #### Using Curl
 
 Open a new terminal or PowerShell window, then:
@@ -56,22 +55,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-	metafieldDefinitionCreate(
-		definition: {
-			name: "WidgetPreRenderStyleTags"
-			namespace: "$app:review"
-			key: "widget_pre_render_style_tags"
-			type: "multi_line_text_field"
-			ownerType: SHOP
-			access: {
-				admin: PUBLIC_READ
-				storefront: PUBLIC_READ
-			}
-		}
-	) {
-		createdDefinition { id name }
-		userErrors { field message code }
-	}
+  metafieldDefinitionCreate(
+    definition: {
+      name: "WidgetPreRenderStyleTags"
+      namespace: "$app:reviews"
+      key: "widget_pre_render_style_tags"
+      type: "multi_line_text_field"
+      ownerType: SHOP
+      access: {
+        admin: PUBLIC_READ
+        storefront: PUBLIC_READ
+      }
+    }
+  ) {
+    createdDefinition { id name }
+    userErrors { field message code }
+  }
 }
 '
 ```
@@ -85,22 +84,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-	metafieldDefinitionCreate(
-		definition: {
-			name: "WidgetPreRenderBodyStyleTags"
-			namespace: "$app:review"
-			key: "widget_pre_render_body_style_tags"
-			type: "multi_line_text_field"
-			ownerType: SHOP
-			access: {
-				admin: PUBLIC_READ
-				storefront: PUBLIC_READ
-			}
-		}
-	) {
-		createdDefinition { id name }
-		userErrors { field message code }
-	}
+  metafieldDefinitionCreate(
+    definition: {
+      name: "WidgetPreRenderBodyStyleTags"
+      namespace: "$app:reviews"
+      key: "widget_pre_render_body_style_tags"
+      type: "multi_line_text_field"
+      ownerType: SHOP
+      access: {
+        admin: PUBLIC_READ
+        storefront: PUBLIC_READ
+      }
+    }
+  ) {
+    createdDefinition { id name }
+    userErrors { field message code }
+  }
 }
 '
 ```
@@ -114,22 +113,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-	metafieldDefinitionCreate(
-		definition: {
-			name: "ReviewsWidgetSnippet"
-			namespace: "$app:reviews"
-			key: "reviews_widget_snippet"
-			type: "multi_line_text_field"
-			ownerType: PRODUCT
-			access: {
-				admin: PUBLIC_READ
-				storefront: PUBLIC_READ
-			}
-		}
-	) {
-		createdDefinition { id name }
-		userErrors { field message code }
-	}
+  metafieldDefinitionCreate(
+    definition: {
+      name: "ReviewsWidgetSnippet"
+      namespace: "$app:reviews"
+      key: "reviews_widget_snippet"
+      type: "multi_line_text_field"
+      ownerType: PRODUCT
+      access: {
+        admin: PUBLIC_READ
+        storefront: PUBLIC_READ
+      }
+    }
+  ) {
+    createdDefinition { id name }
+    userErrors { field message code }
+  }
 }
 '
 ```
@@ -143,22 +142,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-	metafieldDefinitionCreate(
-		definition: {
-			name: "StarRatingSnippet"
-			namespace: "$app:reviews"
-			key: "star_rating_snippet"
-			type: "multi_line_text_field"
-			ownerType: PRODUCT
-			access: {
-				admin: PUBLIC_READ
-				storefront: PUBLIC_READ
-			}
-		}
-	) {
-		createdDefinition { id name }
-		userErrors { field message code }
-	}
+  metafieldDefinitionCreate(
+    definition: {
+      name: "StarRatingSnippet"
+      namespace: "$app:reviews"
+      key: "star_rating_snippet"
+      type: "multi_line_text_field"
+      ownerType: PRODUCT
+      access: {
+        admin: PUBLIC_READ
+        storefront: PUBLIC_READ
+      }
+    }
+  ) {
+    createdDefinition { id name }
+    userErrors { field message code }
+  }
 }
 '
 ```
@@ -172,22 +171,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-	metafieldDefinitionCreate(
-		definition: {
-			name: "ReviewCount"
-			namespace: "$app:reviews"
-			key: "review_count"
-			type: "number_integer"
-			ownerType: PRODUCT
-			access: {
-				admin: PUBLIC_READ
-				storefront: PUBLIC_READ
-			}
-		}
-	) {
-		createdDefinition { id name }
-		userErrors { field message code }
-	}
+  metafieldDefinitionCreate(
+    definition: {
+      name: "ReviewCount"
+      namespace: "$app:reviews"
+      key: "review_count"
+      type: "number_integer"
+      ownerType: PRODUCT
+      access: {
+        admin: PUBLIC_READ
+        storefront: PUBLIC_READ
+      }
+    }
+  ) {
+    createdDefinition { id name }
+    userErrors { field message code }
+  }
 }
 '
 ```
@@ -201,22 +200,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-	metafieldDefinitionCreate(
-		definition: {
-			name: "AverageRating"
-			namespace: "$app:reviews"
-			key: "average_rating"
-			type: "rating"
-			ownerType: PRODUCT
-			access: {
-				admin: PUBLIC_READ
-				storefront: PUBLIC_READ
-			}
-		}
-	) {
-		createdDefinition { id name }
-		userErrors { field message code }
-	}
+  metafieldDefinitionCreate(
+    definition: {
+      name: "AverageRating"
+      namespace: "$app:reviews"
+      key: "average_rating"
+      type: "rating"
+      ownerType: PRODUCT
+      access: {
+        admin: PUBLIC_READ
+        storefront: PUBLIC_READ
+      }
+    }
+  ) {
+    createdDefinition { id name }
+    userErrors { field message code }
+  }
 }
 '
 ```
@@ -232,29 +231,26 @@ Open your GraphQL IDE (such as Postman) and make `POST` requests with the follow
 
 ```graphql
 mutation {
-	metafieldDefinitionCreate(
-		definition: {
-			name: "WidgetPreRenderStyleTags"
-			namespace: "$app:reviews"
-			key: "widget_pre_render_style_tags"
-			type: "multi_line_text_field"
-			ownerType: SHOP
-			access: {
-				admin: PUBLIC_READ
-				storefront: PUBLIC_READ
-			}
-		}
-	) {
-		createdDefinition {
-			id
-			name
-		}
-		userErrors {
-			field
-			message
-			code
-		}
-	}
+  metafieldDefinitionCreate(
+    definition: {
+      name: "WidgetPreRenderStyleTags"
+      namespace: "$app:reviews"
+      key: "widget_pre_render_style_tags"
+      type: "multi_line_text_field"
+      ownerType: SHOP
+      access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
+    }
+  ) {
+    createdDefinition {
+      id
+      name
+    }
+    userErrors {
+      field
+      message
+      code
+    }
+  }
 }
 ```
 
@@ -262,29 +258,26 @@ mutation {
 
 ```graphql
 mutation {
-	metafieldDefinitionCreate(
-		definition: {
-			name: "WidgetPreRenderBodyStyleTags"
-			namespace: "$app:reviews"
-			key: "widget_pre_render_body_style_tags"
-			type: "multi_line_text_field"
-			ownerType: SHOP
-			access: {
-				admin: PUBLIC_READ
-				storefront: PUBLIC_READ
-			}
-		}
-	) {
-		createdDefinition {
-			id
-			name
-		}
-		userErrors {
-			field
-			message
-			code
-		}
-	}
+  metafieldDefinitionCreate(
+    definition: {
+      name: "WidgetPreRenderBodyStyleTags"
+      namespace: "$app:reviews"
+      key: "widget_pre_render_body_style_tags"
+      type: "multi_line_text_field"
+      ownerType: SHOP
+      access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
+    }
+  ) {
+    createdDefinition {
+      id
+      name
+    }
+    userErrors {
+      field
+      message
+      code
+    }
+  }
 }
 ```
 
@@ -292,29 +285,26 @@ mutation {
 
 ```graphql
 mutation {
-	metafieldDefinitionCreate(
-		definition: {
-			name: "ReviewsWidgetSnippet"
-			namespace: "$app:reviews"
-			key: "reviews_widget_snippet"
-			type: "multi_line_text_field"
-			ownerType: PRODUCT
-			access: {
-				admin: PUBLIC_READ
-				storefront: PUBLIC_READ
-			}
-		}
-	) {
-		createdDefinition {
-			id
-			name
-		}
-		userErrors {
-			field
-			message
-			code
-		}
-	}
+  metafieldDefinitionCreate(
+    definition: {
+      name: "ReviewsWidgetSnippet"
+      namespace: "$app:reviews"
+      key: "reviews_widget_snippet"
+      type: "multi_line_text_field"
+      ownerType: PRODUCT
+      access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
+    }
+  ) {
+    createdDefinition {
+      id
+      name
+    }
+    userErrors {
+      field
+      message
+      code
+    }
+  }
 }
 ```
 
@@ -322,29 +312,26 @@ mutation {
 
 ```graphql
 mutation {
-	metafieldDefinitionCreate(
-		definition: {
-			name: "StarRatingSnippet"
-			namespace: "$app:reviews"
-			key: "star_rating_snippet"
-			type: "multi_line_text_field"
-			ownerType: PRODUCT
-			access: {
-				admin: PUBLIC_READ
-				storefront: PUBLIC_READ
-			}
-		}
-	) {
-		createdDefinition {
-			id
-			name
-		}
-		userErrors {
-			field
-			message
-			code
-		}
-	}
+  metafieldDefinitionCreate(
+    definition: {
+      name: "StarRatingSnippet"
+      namespace: "$app:reviews"
+      key: "star_rating_snippet"
+      type: "multi_line_text_field"
+      ownerType: PRODUCT
+      access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
+    }
+  ) {
+    createdDefinition {
+      id
+      name
+    }
+    userErrors {
+      field
+      message
+      code
+    }
+  }
 }
 ```
 
@@ -352,29 +339,26 @@ mutation {
 
 ```graphql
 mutation {
-	metafieldDefinitionCreate(
-		definition: {
-			name: "ReviewCount"
-			namespace: "$app:reviews"
-			key: "review_count"
-			type: "number_integer"
-			ownerType: PRODUCT
-			access: {
-				admin: PUBLIC_READ
-				storefront: PUBLIC_READ
-			}
-		}
-	) {
-		createdDefinition {
-			id
-			name
-		}
-		userErrors {
-			field
-			message
-			code
-		}
-	}
+  metafieldDefinitionCreate(
+    definition: {
+      name: "ReviewCount"
+      namespace: "$app:reviews"
+      key: "review_count"
+      type: "number_integer"
+      ownerType: PRODUCT
+      access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
+    }
+  ) {
+    createdDefinition {
+      id
+      name
+    }
+    userErrors {
+      field
+      message
+      code
+    }
+  }
 }
 ```
 
@@ -382,29 +366,26 @@ mutation {
 
 ```graphql
 mutation {
-	metafieldDefinitionCreate(
-		definition: {
-			name: "AverageRating"
-			namespace: "$app:reviews"
-			key: "average_rating"
-			type: "rating"
-			ownerType: PRODUCT
-			access: {
-				admin: PUBLIC_READ
-				storefront: PUBLIC_READ
-			}
-		}
-	) {
-		createdDefinition {
-			id
-			name
-		}
-		userErrors {
-			field
-			message
-			code
-		}
-	}
+  metafieldDefinitionCreate(
+    definition: {
+      name: "AverageRating"
+      namespace: "$app:reviews"
+      key: "average_rating"
+      type: "rating"
+      ownerType: PRODUCT
+      access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
+    }
+  ) {
+    createdDefinition {
+      id
+      name
+    }
+    userErrors {
+      field
+      message
+      code
+    }
+  }
 }
 ```
 
@@ -463,9 +444,9 @@ Open `app/root.tsx` and add the following import:
 
 ```ts
 import {
-	OkendoProvider,
-	getOkendoProviderData,
-} from "@okendo/shopify-hydrogen";
+  OkendoProvider,
+  getOkendoProviderData,
+} from '@okendo/shopify-hydrogen';
 ```
 
 Locate the `loader` function, append `okendoProviderData` to the returned data as shown below, and set `subscriberId` to your Okendo subscriber ID.
@@ -473,40 +454,49 @@ Locate the `loader` function, append `okendoProviderData` to the returned data a
 As explained above, set `okendoProviderData` to either `getOkendoProviderData(...)`, or `await getOkendoProviderData(...)`:
 
 ```ts
-return defer(
-	{
-		...
-		okendoProviderData: /* place `await` here if you want server-rendered widgets */ getOkendoProviderData({
-			context,
-			subscriberId: "<your-okendo-subscriber-id>",
-		}),
-	},
-);
+return defer({
+  // ...
+  okendoProviderData:
+    /* place `await` here if you want server-rendered widgets */ getOkendoProviderData(
+      {
+        context: args.context,
+        subscriberId: '<your-okendo-subscriber-id>',
+      },
+    ),
+});
 ```
 
-Locate the `App` function, add the `meta` tag `oke:subscriber_id` to `head`, and place your Okendo subscriber ID in its content:
+Locate the `Layout` component, add the `meta` tag `oke:subscriber_id` to `head`, and place your Okendo subscriber ID in its content:
 
-```ts
+```tsx
 <head>
-	<meta charSet="utf-8" />
-	<meta name="viewport" content="width=device-width,initial-scale=1" />
-	<meta name="oke:subscriber_id" content="<your-okendo-subscriber-id>" />
-	...
+  <meta charSet="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <meta name="oke:subscriber_id" content="<your-okendo-subscriber-id>" />
+  ...
+</head>
 ```
 
 Append `OkendoProvider` to `body`, and pass it the promise — or the data — returned by `getOkendoProviderData`. If Content Security Policy is active in your project, you also need to provide the `nonce` (available with `const nonce = useNonce()` in Shopify's Hydrogen demo store):
 
 ```tsx
-...
 <body>
-	<OkendoProvider
-		nonce={nonce}
-		okendoProviderData={data.okendoProviderData}
-	>
-		...
-	</OkendoProvider>
+  {data ? (
+    <OkendoProvider nonce={nonce} okendoProviderData={data.okendoProviderData}>
+      <Analytics.Provider
+        cart={data.cart}
+        shop={data.shop}
+        consent={data.consent}
+      >
+        <PageLayout {...data}>{children}</PageLayout>
+      </Analytics.Provider>
+    </OkendoProvider>
+  ) : (
+    children
+  )}
+  <ScrollRestoration nonce={nonce} />
+  <Scripts nonce={nonce} />
 </body>
-...
 ```
 
 ### `app/entry.server.tsx`
@@ -518,110 +508,108 @@ Note that it's necessary to to add the default values (`'self'`, etc.) when [ext
 
 ```ts
 const { nonce, header, NonceProvider } = createContentSecurityPolicy({
-    defaultSrc: [
-      "'self'",
-      "localhost:*",
-      "https://cdn.shopify.com",
-      "https://www.google.com",
-      "https://www.gstatic.com",
-      "https://d3hw6dc1ow8pp2.cloudfront.net",
-      "https://d3g5hqndtiniji.cloudfront.net",
-      "https://dov7r31oq5dkj.cloudfront.net",
-      "https://cdn-static.okendo.io",
-      "https://surveys.okendo.io",
-      "https://api.okendo.io",
-      "data:",
-    ],
-    imgSrc: [
-      "'self'",
-      "https://cdn.shopify.com",
-      "data:",
-      "https://d3hw6dc1ow8pp2.cloudfront.net",
-      "https://d3g5hqndtiniji.cloudfront.net",
-      "https://dov7r31oq5dkj.cloudfront.net",
-      "https://cdn-static.okendo.io",
-      "https://surveys.okendo.io"
-    ],
-    mediaSrc: [
-      "'self'",
-      "https://d3hw6dc1ow8pp2.cloudfront.net",
-      "https://d3g5hqndtiniji.cloudfront.net",
-      "https://dov7r31oq5dkj.cloudfront.net",
-      "https://cdn-static.okendo.io"
-    ],
-    styleSrcElem: [
-      "'self'",
-      "'unsafe-inline'",
-      "https://cdn.shopify.com",
-      "https://fonts.googleapis.com",
-      "https://fonts.gstatic.com",
-      "https://d3hw6dc1ow8pp2.cloudfront.net",
-      "https://cdn-static.okendo.io",
-      "https://surveys.okendo.io"
-    ],
-    scriptSrc: [
-      "'self'",
-      "https://cdn.shopify.com",
-      "https://d3hw6dc1ow8pp2.cloudfront.net",
-      "https://dov7r31oq5dkj.cloudfront.net",
-      "https://cdn-static.okendo.io",
-      "https://surveys.okendo.io",
-      "https://api.okendo.io",
-      "https://www.google.com",
-      "https://www.gstatic.com"
-    ],
-    fontSrc: [
-      "'self'",
-      "https://fonts.gstatic.com",
-      "https://d3hw6dc1ow8pp2.cloudfront.net",
-      "https://dov7r31oq5dkj.cloudfront.net",
-      "https://cdn.shopify.com",
-      "https://cdn-static.okendo.io",
-      "https://surveys.okendo.io"
-    ],
-    connectSrc: [
-      "'self'",
-      "https://monorail-edge.shopifysvc.com",
-      "localhost:*",
-      "ws://localhost:*",
-      "ws://127.0.0.1:*",
-      "https://api.okendo.io",
-      "https://cdn-static.okendo.io",
-      "https://surveys.okendo.io",
-      "https://api.raygun.com",
-      "https://www.google.com",
-      "https://www.gstatic.com",
-    ],
-    frameSrc: [
-      "https://www.google.com",
-      "https://www.gstatic.com"
-    ]
+  shop: {
+    checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
+    storeDomain: context.env.PUBLIC_STORE_DOMAIN,
+  },
+  defaultSrc: [
+    "'self'",
+    'localhost:*',
+    'https://cdn.shopify.com',
+    'https://www.google.com',
+    'https://www.gstatic.com',
+    'https://d3hw6dc1ow8pp2.cloudfront.net',
+    'https://d3g5hqndtiniji.cloudfront.net',
+    'https://dov7r31oq5dkj.cloudfront.net',
+    'https://cdn-static.okendo.io',
+    'https://surveys.okendo.io',
+    'https://api.okendo.io',
+    'data:',
+  ],
+  imgSrc: [
+    "'self'",
+    'https://cdn.shopify.com',
+    'data:',
+    'https://d3hw6dc1ow8pp2.cloudfront.net',
+    'https://d3g5hqndtiniji.cloudfront.net',
+    'https://dov7r31oq5dkj.cloudfront.net',
+    'https://cdn-static.okendo.io',
+    'https://surveys.okendo.io',
+  ],
+  mediaSrc: [
+    "'self'",
+    'https://d3hw6dc1ow8pp2.cloudfront.net',
+    'https://d3g5hqndtiniji.cloudfront.net',
+    'https://dov7r31oq5dkj.cloudfront.net',
+    'https://cdn-static.okendo.io',
+  ],
+  styleSrc: [
+    "'self'",
+    "'unsafe-inline'",
+    'https://cdn.shopify.com',
+    'https://fonts.googleapis.com',
+    'https://fonts.gstatic.com',
+    'https://d3hw6dc1ow8pp2.cloudfront.net',
+    'https://cdn-static.okendo.io',
+    'https://surveys.okendo.io',
+  ],
+  scriptSrc: [
+    "'self'",
+    'https://cdn.shopify.com',
+    'https://d3hw6dc1ow8pp2.cloudfront.net',
+    'https://dov7r31oq5dkj.cloudfront.net',
+    'https://cdn-static.okendo.io',
+    'https://surveys.okendo.io',
+    'https://api.okendo.io',
+    'https://www.google.com',
+    'https://www.gstatic.com',
+  ],
+  fontSrc: [
+    "'self'",
+    'https://fonts.gstatic.com',
+    'https://d3hw6dc1ow8pp2.cloudfront.net',
+    'https://dov7r31oq5dkj.cloudfront.net',
+    'https://cdn.shopify.com',
+    'https://cdn-static.okendo.io',
+    'https://surveys.okendo.io',
+  ],
+  connectSrc: [
+    "'self'",
+    'https://monorail-edge.shopifysvc.com',
+    'localhost:*',
+    'ws://localhost:*',
+    'ws://127.0.0.1:*',
+    'https://api.okendo.io',
+    'https://cdn-static.okendo.io',
+    'https://surveys.okendo.io',
+    'https://api.raygun.com',
+    'https://www.google.com',
+    'https://www.gstatic.com',
+  ],
+  frameSrc: ['https://www.google.com', 'https://www.gstatic.com'],
 });
 ```
 
 ### `app/routes/_index.tsx`
 
-Add the following imports:
+Add the following import:
 
 ```ts
-import {
-	OkendoStarRating,
-	type WithOkendoStarRatingSnippet,
-} from "@okendo/shopify-hydrogen";
+import { OkendoStarRating } from '@okendo/shopify-hydrogen';
 ```
 
 Add the following block just before the `RECOMMENDED_PRODUCTS_QUERY` GraphQL query:
 
 ```ts
 const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = `#graphql
-	fragment OkendoStarRatingSnippet on Product {
-		okendoStarRatingSnippet: metafield(
-			namespace: "okendo"
-			key: "StarRatingSnippet"
-		) {
-			value
-		}
-	}
+  fragment OkendoStarRatingSnippet on Product {
+    okendoStarRatingSnippet: metafield(
+      namespace: "okendo"
+      key: "StarRatingSnippet"
+    ) {
+      value
+    }
+  }
 ` as const;
 ```
 
@@ -629,74 +617,56 @@ Then append `${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}` and `...OkendoStarRatingSni
 
 ```ts
 const RECOMMENDED_PRODUCTS_QUERY = `#graphql
-	${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
-	fragment RecommendedProduct on Product {
-		id
-		title
-		handle
-		priceRange {
-			minVariantPrice {
-				amount
-				currencyCode
-			}
-		}
-		images(first: 1) {
-			nodes {
-				id
-				url
-				altText
-				width
-				height
-			}
-		}
-		...OkendoStarRatingSnippet
-	}
-	query RecommendedProducts ($country: CountryCode, $language: LanguageCode)
-		@inContext(country: $country, language: $language) {
-		products(first: 4, sortKey: UPDATED_AT, reverse: true) {
-			nodes {
-				...RecommendedProduct
-			}
-		}
-	}
+  ${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
+  fragment RecommendedProduct on Product {
+    id
+    title
+    handle
+    priceRange {
+      minVariantPrice {
+        amount
+        currencyCode
+      }
+    }
+    images(first: 1) {
+      nodes {
+        id
+        url
+        altText
+        width
+        height
+      }
+    }
+    ...OkendoStarRatingSnippet
+  }
+  query RecommendedProducts ($country: CountryCode, $language: LanguageCode)
+    @inContext(country: $country, language: $language) {
+    products(first: 4, sortKey: UPDATED_AT, reverse: true) {
+      nodes {
+        ...RecommendedProduct
+      }
+    }
+  }
 ` as const;
 ```
 
-Tweak the type of the `products` prop of `RecommendedProducts`:
-
-```ts
-products: Promise<{
-	products: {
-		nodes: (RecommendedProductsQuery["products"]["nodes"][0] &
-			WithOkendoStarRatingSnippet)[];
-	};
-}>;
-```
-
-Add `OkendoStarRating` to `RecommendedProducts`:
-
-```tsx
-<OkendoStarRating
-	productId={product.id}
-	okendoStarRatingSnippet={product.okendoStarRatingSnippet}
-/>
-```
+> Note: if you get a type error on `product`, restart the dev server to get the types (`storefrontapi.generated.d.ts`) regenerated from the GraphQL fragments.
 
-For instance, we can add it below the product title, like this:
+Add `OkendoStarRating` to the `RecommendedProducts` component — for instance, we can add it below the product title, like this:
 
 ```tsx
 <Image
-	data={product.images.nodes[0]}
-	aspectRatio="1/1"
-	sizes="(min-width: 45em) 20vw, 50vw"
+  data={product.images.nodes[0]}
+  aspectRatio="1/1"
+  sizes="(min-width: 45em) 20vw, 50vw"
 />
 <h4>{product.title}</h4>
 <OkendoStarRating
-	productId={product.id}
-	okendoStarRatingSnippet={product.okendoStarRatingSnippet}
+  productId={product.id}
+  okendoStarRatingSnippet={product.okendoStarRatingSnippet}
 />
 <small>
-	<Money data={product.priceRange.minVariantPrice} />
+  <Money data={product.priceRange.minVariantPrice} />
 </small>
 ```
 
@@ -704,46 +674,41 @@ For instance, we can add it below the product title, like this:
 
 We now have the Okendo Star Rating widget visible on our page:
 
-![Okendo's Star Rating widget](./okendo-star-rating-widget.png)
+![Okendo's Star Rating widget](./readme-res/okendo-star-rating-widget.png)
+
+You can do the same changes to the files `app/routes/collections.$handle.tsx` and `app/routes/collections.all.tsx` to make the items' Okendo Star Rating visible on collection pages.
 
 ### `app/routes/products.$handle.tsx`
 
-Add the following imports:
+Add the following import:
 
 ```ts
-import {
-	OKENDO_PRODUCT_REVIEWS_FRAGMENT,
-	OKENDO_PRODUCT_STAR_RATING_FRAGMENT,
-	OkendoReviews,
-	OkendoStarRating,
-	type WithOkendoReviewsSnippet,
-	type WithOkendoStarRatingSnippet,
-} from "@okendo/shopify-hydrogen";
+import { OkendoReviews, OkendoStarRating } from '@okendo/shopify-hydrogen';
 ```
 
-Add the following block just before the `RECOMMENDED_PRODUCTS_QUERY` GraphQL query:
+Add the following block just before the `PRODUCT_FRAGMENT` GraphQL query:
 
 ```ts
 const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = `#graphql
-	fragment OkendoStarRatingSnippet on Product {
-		okendoStarRatingSnippet: metafield(
-			namespace: "okendo"
-			key: "StarRatingSnippet"
-		) {
-			value
-		}
-	}
+  fragment OkendoStarRatingSnippet on Product {
+    okendoStarRatingSnippet: metafield(
+      namespace: "okendo"
+      key: "StarRatingSnippet"
+    ) {
+      value
+    }
+  }
 ` as const;
 
 const OKENDO_PRODUCT_REVIEWS_FRAGMENT = `#graphql
-	fragment OkendoReviewsSnippet on Product {
-		okendoReviewsSnippet: metafield(
-			namespace: "okendo"
-			key: "ReviewsWidgetSnippet"
-		) {
-			value
-		}
-	}
+  fragment OkendoReviewsSnippet on Product {
+    okendoReviewsSnippet: metafield(
+      namespace: "okendo"
+      key: "ReviewsWidgetSnippet"
+    ) {
+      value
+    }
+  }
 ` as const;
 ```
 
@@ -751,113 +716,86 @@ Then append `${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}`, `${OKENDO_PRODUCT_REVIEWS_
 
 ```ts
 const PRODUCT_FRAGMENT = `#graphql
-	${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
-	${OKENDO_PRODUCT_REVIEWS_FRAGMENT}
-	fragment Product on Product {
-		id
-		title
-		vendor
-		handle
-		descriptionHtml
-		description
-		options {
-			name
-			values
-		}
-		selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions) {
-			...ProductVariant
-		}
-		variants(first: 1) {
-			nodes {
-				...ProductVariant
-			}
-		}
-		seo {
-			description
-			title
-		}
-		...OkendoStarRatingSnippet
-		...OkendoReviewsSnippet
-	}
-	${PRODUCT_VARIANT_FRAGMENT}
+  ${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
+  ${OKENDO_PRODUCT_REVIEWS_FRAGMENT}
+  fragment Product on Product {
+    id
+    title
+    vendor
+    handle
+    descriptionHtml
+    description
+    options {
+      name
+      values
+    }
+    selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions) {
+      ...ProductVariant
+    }
+    variants(first: 1) {
+      nodes {
+        ...ProductVariant
+      }
+    }
+    seo {
+      description
+      title
+    }
+    ...OkendoStarRatingSnippet
+    ...OkendoReviewsSnippet
+  }
+  ${PRODUCT_VARIANT_FRAGMENT}
 ` as const;
 ```
 
-Add `OkendoReviews` to `Product`:
+> Note: if you get a type error on `product`, restart the dev server to get the types (`storefrontapi.generated.d.ts`) regenerated from the GraphQL fragments.
 
-```tsx
-<OkendoReviews
-	productId={product.id}
-	okendoReviewsSnippet={product.okendoReviewsSnippet}
-/>
-```
-
-For instance, we can add it below the product section, like this:
+Add `OkendoStarRating` and `OkendoReviews` to the `Product` component:
 
 ```tsx
 <>
-	<div className="product">
-		<ProductImage image={selectedVariant?.image} />
-		<ProductMain
-			selectedVariant={selectedVariant}
-			product={product}
-			variants={variants}
-		/>
-	</div>
-
-	<OkendoReviews
-		productId={product.id}
-		okendoReviewsSnippet={product.okendoReviewsSnippet}
-	/>
-</>
-```
-
-> Note: if the widgets are rendered client-side (if you don't use `await` when calling `getOkendoProviderData`), you can provide your own placeholder by using the `placeholder` property of `OkendoReviews`.
-
-Tweak the type of the `product` prop of `ProductMain`:
-
-```ts
-product: ProductFragment &
-	WithOkendoStarRatingSnippet &
-	WithOkendoReviewsSnippet;
-```
-
-Add `OkendoStarRating` to `ProductMain`:
+  <div className="product">
+    <ProductImage image={selectedVariant?.image} />
+    <div className="product-main">
+      <h1>{title}</h1>
+      <OkendoStarRating
+        productId={product.id}
+        okendoStarRatingSnippet={product.okendoStarRatingSnippet}
+      />
+      <ProductPrice
+        price={selectedVariant?.price}
+        compareAtPrice={selectedVariant?.compareAtPrice}
+      />
+      ...
+    </div>
+    ...
+  </div>
 
-```tsx
-<OkendoStarRating
-	productId={product.id}
-	okendoStarRatingSnippet={product.okendoStarRatingSnippet}
-/>
+  <OkendoReviews
+    productId={product.id}
+    okendoReviewsSnippet={product.okendoReviewsSnippet}
+  />
+</>
 ```
 
-For instance, we can add it below the product title, like this:
-
-```tsx
-<div className="product-main">
-	<h1>{title}</h1>
-	<OkendoStarRating
-		productId={product.id}
-		okendoStarRatingSnippet={product.okendoStarRatingSnippet}
-	/>
-	<ProductPrice selectedVariant={selectedVariant} />
-```
+> Note: if the widgets are rendered client-side (if you don't use `await` when calling `getOkendoProviderData`), you can provide your own placeholder by using the `placeholder` property of `OkendoStarRating` and `OkendoReviews`.
 
 We now have the Okendo Star Rating and Reviews widgets visible on our product page:
 
-![Okendo's Star Rating and Reviews widgets](./okendo-star-rating-and-reviews-widgets.png)
+![Okendo's Star Rating and Reviews widgets](./readme-res/okendo-star-rating-and-reviews-widgets.png)
 
 ### All Reviews Widget - Client Side Only
-If you would like to include a copy of the Okendo Reviews Widget which displays all reviews for a given store (to be used on a reviews page for example), please add the OkendoReviewsWidget without supplying the `productId`.
 
-Please note the all reviews widget loads on the client not the server.
+If you would like to include a copy of the Okendo Reviews Widget which displays all reviews for a given store (to be used on a reviews page for example), please add the `OkendoReviewsWidget` without supplying the `productId`.
+
+Please note the all reviews widget loads on the client, not the server.
 
 ```tsx
 import { type MetaFunction } from '@remix-run/react';
 import { OkendoReviews } from '@okendo/shopify-hydrogen';
 
 export const meta: MetaFunction = () => {
-  return [{title: `Hydrogen | Okendo All Reviews`}];
+  return [{ title: `Hydrogen | Okendo All Reviews` }];
 };
 
 export default function ReviewsPage() {
@@ -868,4 +806,4 @@ export default function ReviewsPage() {
     </div>
   );
 }
-```
+```

package/package.json

@@ -1,16 +1,17 @@
 {
     "name": "@okendo/shopify-hydrogen",
-    "version": "2.2.6",
+    "version": "2.3.0",
     "description": "Okendo React components for Shopify Hydrogen 2 (Remix)",
     "author": "Okendo",
     "license": "SEE LICENSE IN LICENSE.txt",
     "engines": {
-        "node": ">=16.14"
+        "node": ">=18.0.0"
     },
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
     "files": [
-        "dist"
+        "dist",
+        "readme-res"
     ],
     "types": "dist/index.d.ts",
     "scripts": {