fix: fetch the lang and currency

thisdot · Oct 20, 2023 · 17b49bc · 17b49bc
1 parent a32a8a2
commit 17b49bc
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 6 deletions.
diff --git a/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx b/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx
@@ -8,25 +8,39 @@ import {
 	getClientBrowserParameters,
 	AnalyticsEventName,
 } from '@shopify/hydrogen-react';
+import { CurrencyCode } from '@/lib/useMoney';
+import { LanguageCode } from '@shopify/hydrogen-react/storefront-api-types';
 
-export function sendPageView(shopId: string) {
+export function sendPageView(
+	shopId: string,
+	currency: CurrencyCode,
+	acceptedLanguage: LanguageCode
+) {
 	sendShopifyAnalytics({
 		eventName: AnalyticsEventName.PAGE_VIEW,
 		payload: {
 			...getClientBrowserParameters(),
 			hasUserConsent: true,
 			shopId: shopId,
-			currency: 'USD',
-			acceptedLanguage: 'EN',
+			currency: currency,
+			acceptedLanguage: acceptedLanguage,
 		},
 	});
 }
 
-function ShopifyAnalytics({ shopId }: { shopId: string }) {
+function ShopifyAnalytics({
+	shopId,
+	currency,
+	acceptedLanguage,
+}: {
+	shopId: string;
+	currency: CurrencyCode;
+	acceptedLanguage: LanguageCode;
+}) {
 	const pathname = usePathname();
 
 	useEffect(() => {
-		sendPageView(shopId);
+		sendPageView(shopId, currency, acceptedLanguage);
 	}, [pathname]);
 
 	useShopifyCookies();

diff --git a/starters/shopify-next-tailwind/app/layout.tsx b/starters/shopify-next-tailwind/app/layout.tsx
@@ -28,7 +28,11 @@ export default async function RootLayout({
 	return (
 		<html lang="en">
 			<body className={inter.className}>
-				<ShopifyAnalytics shopId={data.body.data.shop.id} />
+				<ShopifyAnalytics
+					shopId={data.body.data.shop.id}
+					currency={data.body.data.shop.currencyCode}
+					acceptedLanguage={data.body.data.shopLocales[0].locale}
+				/>
 				<div className="flex flex-col min-h-screen">
 					<div className="">
 						<a href="#mainContent" className="sr-only">

diff --git a/starters/shopify-next-tailwind/lib/shopify/queries/layout.ts b/starters/shopify-next-tailwind/lib/shopify/queries/layout.ts
@@ -8,6 +8,7 @@ export const LAYOUT_QUERY = `#graphql
       id
       name
       description
+      currencyCode
       primaryDomain {
         url
       }
@@ -19,6 +20,9 @@ export const LAYOUT_QUERY = `#graphql
        }
      }
     }
+    shopLocales {
+      locale
+    }
     headerMenu: menu(handle: $headerMenuHandle) {
       id
       items {

diff --git a/starters/shopify-next-tailwind/lib/shopify/types.ts b/starters/shopify-next-tailwind/lib/shopify/types.ts
@@ -1,10 +1,12 @@
 import { FiltersQueryParams } from '@/app/collections/[collectionHandle]/page';
 import { CollectionHero } from '@/components/Hero';
+import { LanguageCode } from '@shopify/hydrogen-react/storefront-api-types';
 
 export type Shop = {
 	id: string;
 	name: string;
 	description: string | null;
+	currencyCode: CurrencyCode;
 	primaryDomain: {
 		url: string;
 	};
@@ -77,6 +79,9 @@ export type ShopifyFooterItem = {
 export type ShopifyLayoutOperation = {
 	data: {
 		shop: Shop;
+		shopLocales: {
+			locale: LanguageCode;
+		}[];
 		headerMenu: ShopifyHeaderMenu;
 		footerMenu: ShopifyFooterMenu;
 	};