From 17b49bcdcd6fc4a832e3da055bcc0fe30fc81721 Mon Sep 17 00:00:00 2001 From: "Mark S. Shenouda" Date: Fri, 20 Oct 2023 10:17:00 +0300 Subject: [PATCH] fix: fetch the lang and currency --- .../app/compoents/ShopifyAnalytics.tsx | 24 +++++++++++++++---- starters/shopify-next-tailwind/app/layout.tsx | 6 ++++- .../lib/shopify/queries/layout.ts | 4 ++++ .../lib/shopify/types.ts | 5 ++++ 4 files changed, 33 insertions(+), 6 deletions(-) diff --git a/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx b/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx index 55e1efc7e..a5457735e 100644 --- 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 index b8aaf7210..c2f3215cf 100644 --- 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 ( - +
diff --git a/starters/shopify-next-tailwind/lib/shopify/queries/layout.ts b/starters/shopify-next-tailwind/lib/shopify/queries/layout.ts index f3c38f194..0d707e4f3 100644 --- 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 index f661772e3..2b68c5a70 100644 --- 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; };