okendo / okendo-shopify-hydrogen-demo

Demo store for the Okendo Hydrogen components.
MIT License
14 stars 1 forks source link

Google Rich Snippets Support For Product Ratings #36

Open octave opened 1 week ago

octave commented 1 week ago

It would be great to show how to implement google rich snippets using the summaryData in the Hydrogen demo store, similar to this:

https://support.okendo.io/en/articles/3813081-set-up-google-rich-snippets-for-product-ratings

octave commented 1 week ago

Here is how I did it so far:

Add this to your product query:

reviewsData: metafield(namespace: "okendo", key: "summaryData") {
  value
  type
}

Then in your loader:

type ReviewsData = {
  reviewAverageValue: number;
  reviewCount: number;
};

let reviewsData: ReviewsData | null;
  try {
    reviewsData = product?.reviewsData?.value
      ? (JSON.parse(product.reviewsData.value) as ReviewsData)
      : null;
  } catch (error) {
    console.error('Failed to parse reviews data:', error);
    reviewsData = null;
  }
const aggregateRating = {
  '@type': 'AggregateRating',
  ratingValue: reviewsData?.reviewAverageValue ?? 5,
  ratingCount: reviewsData?.reviewCount ?? 1,
};
Zwyx commented 1 week ago

Hi Octave, indeed we can definitely do that. We should be able to work on it soon. Thanks for the suggestion!