Improve demo store SEO & ld+json implementation

packages/cli/src/utils/config.ts

@@ -140,7 +140,9 @@ export async function getRemixConfig(
 
     config.watchPaths.push(
       ...(await fs.readdir(packagesPath)).map((pkg) =>
-        path.resolve(packagesPath, pkg, 'dist', 'development', 'index.js'),
+        pkg === 'hydrogen-react'
+          ? path.resolve(packagesPath, pkg, 'dist', 'browser-dev', 'index.mjs')
+          : path.resolve(packagesPath, pkg, 'dist', 'development', 'index.js'),
       ),
     );
 

packages/hydrogen/src/seo/generate-seo-tags.test.ts

@@ -1,4 +1,4 @@
-import {expect, describe, it, vi} from 'vitest';
+import {expect, describe, afterAll, it, vi} from 'vitest';
 import {generateSeoTags, type Seo} from './generate-seo-tags';
 import type {Product} from 'schema-dts';
 
@@ -9,6 +9,10 @@ describe('generateSeoTags', () => {
 
   vi.stubGlobal('console', consoleMock);
 
+  afterAll(() => {
+    vi.unstubAllGlobals();
+  });
+
   it('removes undefined values', () => {
     // Given
     const input = {
@@ -794,7 +798,7 @@ describe('generateSeoTags', () => {
         maxImagePreview: 'large' as const,
         maxSnippet: 100,
         maxVideoPreview: 100,
-        unavailableAfter: new Date('2023-01-01').toLocaleDateString(),
+        unavailableAfter: '2023-01-01',
       },
     };
 
@@ -808,7 +812,7 @@ describe('generateSeoTags', () => {
           key: 'meta-robots',
           props: {
             content:
-              'noindex,nofollow,noarchive,noimageindex,nosnippet,notranslate,max-image-preview:large,max-snippet:100,max-video-preview:100,unavailable_after:1/1/2023',
+              'noindex,nofollow,noarchive,noimageindex,nosnippet,notranslate,max-image-preview:large,max-snippet:100,max-video-preview:100,unavailable_after:2023-01-01',
             name: 'robots',
           },
           tag: 'meta',

templates/demo-store/app/lib/analytics.server.ts

@@ -0,0 +1,134 @@
+import {AnalyticsPageType, ShopifyAnalyticsProduct} from '@shopify/hydrogen';
+import {ShopifySalesChannel} from '@shopify/hydrogen';
+import type {
+  Article,
+  Blog,
+  Collection,
+  CollectionConnection,
+  Product,
+  ProductVariant,
+  ShopPolicy,
+  Shop,
+} from '@shopify/hydrogen-react/storefront-api-types';
+
+function root({shop}: {shop: Shop}): {
+  shopifySalesChannel: typeof ShopifySalesChannel.hydrogen;
+  shopId: string;
+} {
+  return {
+    shopifySalesChannel: ShopifySalesChannel.hydrogen,
+    shopId: shop.id,
+  };
+}
+
+function home(): {pageType: typeof AnalyticsPageType.home} {
+  return {
+    pageType: AnalyticsPageType.home,
+  };
+}
+
+function product({
+  selectedVariant,
+  product,
+}: {
+  selectedVariant: ProductVariant;
+  product: Product;
+}): {
+  pageType: typeof AnalyticsPageType.product;
+  products: ShopifyAnalyticsProduct[];
+  resourceId: string;
+  totalValue: number;
+} {
+  const anlyticsProduct: ShopifyAnalyticsProduct = {
+    brand: product.vendor,
+    name: product.title,
+    price: selectedVariant.price.amount,
+    productGid: product.id,
+    variantGid: selectedVariant.id,
+    variantName: selectedVariant.title,
+  };
+
+  return {
+    pageType: AnalyticsPageType.product,
+    products: [anlyticsProduct],
+    resourceId: product.id,
+    totalValue: parseFloat(selectedVariant.price.amount),
+  };
+}
+
+function collection({collection}: {collection: Collection}): {
+  pageType: typeof AnalyticsPageType.collection;
+  collectionHandle: string;
+  resourceId: string;
+} {
+  return {
+    pageType: AnalyticsPageType.collection,
+    collectionHandle: collection.handle,
+    resourceId: collection.id,
+  };
+}
+
+function listCollections({
+  handle,
+  collections,
+}: {
+  handle: string;
+  collections: CollectionConnection;
+}): {
+  pageType: typeof AnalyticsPageType.listCollections;
+  resourceHandle: string;
+  collections: {
+    collectionHandle: string;
+    resourceId: string;
+  }[];
+} {
+  return {
+    pageType: AnalyticsPageType.listCollections,
+    resourceHandle: handle,
+    collections: collections?.edges?.map(({node: collection}) => ({
+      collectionHandle: collection.handle,
+      resourceId: collection.id,
+    })),
+  };
+}
+
+function article({article}: {article: Article}): {
+  pageType: typeof AnalyticsPageType.article;
+  resourceHandle: string;
+} {
+  return {
+    pageType: AnalyticsPageType.article,
+    resourceHandle: article.handle,
+  };
+}
+
+function blog({blog}: {blog: Blog}): {
+  pageType: typeof AnalyticsPageType.blog;
+  resourceHandle: string;
+} {
+  return {
+    pageType: AnalyticsPageType.blog,
+    resourceHandle: blog.handle,
+  };
+}
+
+function policy({policy}: {policy: ShopPolicy}): {
+  pageType: typeof AnalyticsPageType.policy;
+  resourceHandle: string;
+} {
+  return {
+    pageType: AnalyticsPageType.policy,
+    resourceHandle: policy.handle,
+  };
+}
+
+export const analyticsPayload = {
+  article,
+  blog,
+  collection,
+  home,
+  listCollections,
+  product,
+  policy,
+  root,
+};