Add star rating to collection item

And fix type in collection
okendo · Jul 10, 2024 · 9b042d1 · 9b042d1
1 parent e584b99
commit 9b042d1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/app/routes/collections.$handle.tsx b/app/routes/collections.$handle.tsx
@@ -1,11 +1,15 @@
-import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, Link, type MetaFunction} from '@remix-run/react';
 import {
-  Pagination,
-  getPaginationVariables,
+  OkendoStarRating,
+  type WithOkendoStarRatingSnippet,
+} from '@okendo/shopify-hydrogen';
+import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
+import {
   Image,
   Money,
+  Pagination,
+  getPaginationVariables,
 } from '@shopify/hydrogen';
+import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import type {ProductItemFragment} from 'storefrontapi.generated';
 import {useVariantUrl} from '~/lib/variants';
 
@@ -81,7 +85,7 @@ function ProductItem({
   product,
   loading,
 }: {
-  product: ProductItemFragment;
+  product: ProductItemFragment & WithOkendoStarRatingSnippet;
   loading?: 'eager' | 'lazy';
 }) {
   const variant = product.variants.nodes[0];
@@ -103,6 +107,10 @@ function ProductItem({
         />
       )}
       <h4>{product.title}</h4>
+      <OkendoStarRating
+        productId={product.id}
+        okendoStarRatingSnippet={product.okendoStarRatingSnippet}
+      />
       <small>
         <Money data={product.priceRange.minVariantPrice} />
       </small>

diff --git a/app/routes/collections.all.tsx b/app/routes/collections.all.tsx
@@ -1,4 +1,7 @@
-import { OkendoStarRating, WithOkendoStarRatingSnippet } from '@okendo/shopify-hydrogen';
+import {
+  OkendoStarRating,
+  type WithOkendoStarRatingSnippet,
+} from '@okendo/shopify-hydrogen';
 import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
 import {
   Image,