skeleton@1.0.0

Major Changes

• The Storefront API 2023-10 now returns menu item URLs that include the primaryDomainUrl, instead of defaulting to the Shopify store ID URL (example.myshopify.com). The skeleton template requires changes to check for the primaryDomainUrl: by @blittle

  1. Update the HeaderMenu component to accept a primaryDomainUrl and include
     it in the internal url check

  // app/components/Header.tsx
  
  + import type {HeaderQuery} from 'storefrontapi.generated';
  
  export function HeaderMenu({
    menu,
  +  primaryDomainUrl,
    viewport,
  }: {
    menu: HeaderProps['header']['menu'];
  +  primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
    viewport: Viewport;
  }) {
  
    // ...code
  
    // if the url is internal, we strip the domain
    const url =
      item.url.includes('myshopify.com') ||
      item.url.includes(publicStoreDomain) ||
  +   item.url.includes(primaryDomainUrl)
        ? new URL(item.url).pathname
        : item.url;
  
     // ...code
  
  }

  2. Update the FooterMenu component to accept a primaryDomainUrl prop and include
     it in the internal url check

  // app/components/Footer.tsx
  
  - import type {FooterQuery} from 'storefrontapi.generated';
  + import type {FooterQuery, HeaderQuery} from 'storefrontapi.generated';
  
  function FooterMenu({
    menu,
  +  primaryDomainUrl,
  }: {
    menu: FooterQuery['menu'];
  +  primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
  }) {
    // code...
  
    // if the url is internal, we strip the domain
    const url =
      item.url.includes('myshopify.com') ||
      item.url.includes(publicStoreDomain) ||
  +   item.url.includes(primaryDomainUrl)
        ? new URL(item.url).pathname
        : item.url;
  
     // ...code
  
    );
  }

  3. Update the Footer component to accept a shop prop

  export function Footer({
    menu,
  + shop,
  }: FooterQuery & {shop: HeaderQuery['shop']}) {
    return (
      <footer className="footer">
  -      <FooterMenu menu={menu} />
  +      <FooterMenu menu={menu} primaryDomainUrl={shop.primaryDomain.url} />
      </footer>
    );
  }

  4. Update Layout.tsx to pass the shop prop

  export function Layout({
    cart,
    children = null,
    footer,
    header,
    isLoggedIn,
  }: LayoutProps) {
    return (
      <>
        <CartAside cart={cart} />
        <SearchAside />
        <MobileMenuAside menu={header.menu} shop={header.shop} />
        <Header header={header} cart={cart} isLoggedIn={isLoggedIn} />
        <main>{children}</main>
        <Suspense>
          <Await resolve={footer}>
  -          {(footer) => <Footer menu={footer.menu}  />}
  +          {(footer) => <Footer menu={footer.menu} shop={header.shop} />}
          </Await>
        </Suspense>
      </>
    );
  }

Patch Changes

• If you are calling useMatches() in different places of your app to access the data returned by the root loader, you may want to update it to the following pattern to enhance types: (#1289) by @frandiox

  // root.tsx
  
  import {useMatches} from '@remix-run/react';
  import {type SerializeFrom} from '@shopify/remix-oxygen';
  
  export const useRootLoaderData = () => {
    const [root] = useMatches();
    return root?.data as SerializeFrom<typeof loader>;
  };
  
  export function loader(context) {
    // ...
  }

  This way, you can import useRootLoaderData() anywhere in your app and get the correct type for the data returned by the root loader.

• Updated dependencies [81400439, a6f397b6, 3464ec04, 7fc088e2, 867e0b03, ad45656c, f24e3424, 66a48573, 0ae7cbe2, 8198c1be, ad45656c]:

  • @Shopify/hydrogen@2023.10.0
  • @shopify/remix-oxygen@2.0.0
  • @shopify/cli-hydrogen@6.0.0