Use shop.primaryDomain to mark internal links in demo store (#1036)

Use shop.primaryDomain to mark internal links --------- Co-authored-by: Bret Little <[email protected]>
Shopify · Jul 10, 2023 · c3b5cde · c3b5cde
1 parent 2601408
commit c3b5cde
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/.changeset/silly-stingrays-join.md b/.changeset/silly-stingrays-join.md
@@ -0,0 +1,5 @@
+---
+'demo-store': patch
+---
+
+Fix demostore to check for `shop.primaryDomain` host for navigation menu items.
diff --git a/templates/demo-store/app/lib/utils.ts b/templates/demo-store/app/lib/utils.ts
@@ -145,7 +145,7 @@ function resolveToFromType(
 /*
   Parse each menu link and adding, isExternal, to and target
 */
-function parseItem(customPrefixes = {}) {
+function parseItem(primaryDomain: string, customPrefixes = {}) {
   return function (
     item:
       | MenuFragment['items'][number]
@@ -161,13 +161,9 @@ function parseItem(customPrefixes = {}) {
     }
 
     // extract path from url because we don't need the origin on internal to attributes
-    const {pathname} = new URL(item.url);
+    const {host, pathname} = new URL(item.url);
 
-    /*
-      Currently the MenuAPI only returns online store urls e.g — xyz.myshopify.com/..
-      Note: update logic when API is updated to include the active qualified domain
-    */
-    const isInternalLink = /\.myshopify\.com/g.test(item.url);
+    const isInternalLink = host === new URL(primaryDomain).host;
 
     const parsedItem = isInternalLink
       ? // internal links
@@ -188,7 +184,9 @@ function parseItem(customPrefixes = {}) {
     if ('items' in item) {
       return {
         ...parsedItem,
-        items: item.items.map(parseItem(customPrefixes)).filter(Boolean),
+        items: item.items
+          .map(parseItem(primaryDomain, customPrefixes))
+          .filter(Boolean),
       } as EnhancedMenu['items'][number];
     } else {
       return parsedItem as EnhancedMenu['items'][number]['items'][number];
@@ -203,6 +201,7 @@ function parseItem(customPrefixes = {}) {
 */
 export function parseMenu(
   menu: MenuFragment,
+  primaryDomain: string,
   customPrefixes = {},
 ): EnhancedMenu | null {
   if (!menu?.items) {
@@ -211,7 +210,7 @@ export function parseMenu(
     return null;
   }
 
-  const parser = parseItem(customPrefixes);
+  const parser = parseItem(primaryDomain, customPrefixes);
 
   const parsedMenu = {
     ...menu,

diff --git a/templates/demo-store/app/root.tsx b/templates/demo-store/app/root.tsx
@@ -222,11 +222,11 @@ async function getLayoutData({storefront}: AppLoadContext) {
   const customPrefixes = {BLOG: '', CATALOG: 'products'};
 
   const headerMenu = data?.headerMenu
-    ? parseMenu(data.headerMenu, customPrefixes)
+    ? parseMenu(data.headerMenu, data.shop.primaryDomain.url, customPrefixes)
     : undefined;
 
   const footerMenu = data?.footerMenu
-    ? parseMenu(data.footerMenu, customPrefixes)
+    ? parseMenu(data.footerMenu, data.shop.primaryDomain.url, customPrefixes)
     : undefined;
 
   return {shop: data.shop, headerMenu, footerMenu};