From 7ec27e58ab7872f84f724af71e08c49c34536575 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Mon, 12 Aug 2024 17:07:26 +0700 Subject: [PATCH 01/12] chore: fix bug cart --- app/components/Cart.tsx | 7 ++++--- storefrontapi.generated.d.ts | 8 ++++---- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx index d1480a1..cbbcdb8 100644 --- a/app/components/Cart.tsx +++ b/app/components/Cart.tsx @@ -9,7 +9,7 @@ import {Input} from '@/components/input'; import {cn} from '@/lib/utils'; import clsx from "clsx"; -type CartLine = CartApiQueryFragment['lines']['nodes'][0]; +type CartLine = CartApiQueryFragment['lines']['edges'][0]['node']; type CartMainProps = { cart: CartApiQueryFragment | null; @@ -17,7 +17,7 @@ type CartMainProps = { }; export function CartMain({layout, cart}: CartMainProps) { - const linesCount = Boolean(cart?.lines?.nodes?.length || 0); + const linesCount = Boolean(cart?.lines?.edges?.length || 0); const withDiscount = cart && Boolean(cart.discountCodes.filter((code) => code.applicable).length); @@ -40,6 +40,7 @@ function CartDetails({layout, cart}: CartMainProps) { aside: 'cart-details flex flex-col gap-6 relative justify-between h-screen-in-drawer', }; + if (!cart) return null; return (
@@ -84,7 +85,7 @@ function CartLines({ )} - {lines.nodes.map((line) => ( + {lines?.edges?.map(({node: line}) => ( ))} diff --git a/storefrontapi.generated.d.ts b/storefrontapi.generated.d.ts index e9a84f7..73cbdc7 100644 --- a/storefrontapi.generated.d.ts +++ b/storefrontapi.generated.d.ts @@ -839,8 +839,8 @@ export type CartApiQueryFragment = Pick< >; }; lines: { - nodes: Array< - Pick & { + edges: Array<{ + node: Pick & { attributes: Array>; cost: { totalAmount: Pick; @@ -871,8 +871,8 @@ export type CartApiQueryFragment = Pick< Pick >; }; - } - >; + }; + }>; }; cost: { subtotalAmount: Pick; From 69e6c9892bdbd126ecb10a0ff6e4d4ef5a436f3f Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Mon, 12 Aug 2024 17:07:56 +0700 Subject: [PATCH 02/12] chore: update product card and quick view --- app/components/ProductCard.tsx | 8 ++++---- app/components/QuickView.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/components/ProductCard.tsx b/app/components/ProductCard.tsx index e197c6d..9c5a521 100644 --- a/app/components/ProductCard.tsx +++ b/app/components/ProductCard.tsx @@ -73,7 +73,7 @@ export function ProductCard({ return (
-
+
{image && ( +
-
+
- {enableScrollingText && ( + {shouldScroll && ( <>
+
    + {Array.from({length: 15}).map((_, i) => ( +
  • + {content} +
    • + ))} +
)} - {!enableScrollingText && ( -
{content}
- )} - {enableScrollingText && ( -
    - {Array.from({length: 15}).map((_, i) => ( -
  • - {content} -
    • - ))} -
- )} +
+
+ {content} +
+
); } diff --git a/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeaderResults.tsx b/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeaderResults.tsx index 05b43d9..deeca2e 100644 --- a/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeaderResults.tsx +++ b/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeaderResults.tsx @@ -64,7 +64,7 @@ export function SearchTypeHeaderResults() {
Date: Mon, 12 Aug 2024 17:12:22 +0700 Subject: [PATCH 04/12] chore: upate announcement bar --- app/components/Header/AnnouncementBar.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/app/components/Header/AnnouncementBar.tsx b/app/components/Header/AnnouncementBar.tsx index 46d4cbd..1e7de45 100644 --- a/app/components/Header/AnnouncementBar.tsx +++ b/app/components/Header/AnnouncementBar.tsx @@ -38,9 +38,6 @@ export function AnnouncementBar() { if (contentRef.current && containerRef.current) { const contentWidth = contentRef.current.scrollWidth; const containerWidth = containerRef.current.clientWidth; - console.log('🚀 ~ contentWidth:', contentWidth); - console.log('🚀 ~ containerWidth:', containerWidth); - if (contentWidth > containerWidth || enableScrollingText) { setShouldScroll(true); } else { From b8e4b5e786f5114456509dafe6d87013497dc2d4 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Fri, 16 Aug 2024 17:40:47 +0700 Subject: [PATCH 05/12] update setting for blog section --- app/sections/blogs/index.tsx | 234 +++++++++++++++++++++++++++++++++-- 1 file changed, 224 insertions(+), 10 deletions(-) diff --git a/app/sections/blogs/index.tsx b/app/sections/blogs/index.tsx index ff3ecc9..cf057fa 100644 --- a/app/sections/blogs/index.tsx +++ b/app/sections/blogs/index.tsx @@ -1,3 +1,4 @@ +import {cn} from '@/lib/utils'; import {Image} from '@shopify/hydrogen'; import type { ComponentLoaderArgs, @@ -8,18 +9,85 @@ import type { import {IconImageBlank} from '~/components/Icon'; import {Link} from '~/components/Link'; import {BLOG_QUERY} from '~/data/queries'; +import {cva, VariantProps} from 'class-variance-authority'; import clsx from 'clsx'; import {CSSProperties, forwardRef} from 'react'; +let fontSizeVariants = cva('', { + variants: { + mobileSize: { + xs: 'text-xs', + sm: 'text-sm', + base: 'text-base', + lg: 'text-lg', + xl: 'text-xl', + '2xl': 'text-2xl', + '3xl': 'text-3xl', + '4xl': 'text-4xl', + '5xl': 'text-5xl', + '6xl': 'text-6xl', + '7xl': 'text-7xl', + '8xl': 'text-8xl', + '9xl': 'text-9xl', + }, + desktopSize: { + xs: 'md:text-xs', + sm: 'md:text-sm', + base: 'md:text-base', + lg: 'md:text-lg', + xl: 'md:text-xl', + '2xl': 'md:text-2xl', + '3xl': 'md:text-3xl', + '4xl': 'md:text-4xl', + '5xl': 'md:text-5xl', + '6xl': 'md:text-6xl', + '7xl': 'md:text-7xl', + '8xl': 'md:text-8xl', + '9xl': 'md:text-9xl', + }, + }, +}); + +let variants = cva('heading', { + variants: { + size: { + default: '', + custom: '', + scale: 'text-scale', + }, + weight: { + '100': 'font-thin', + '200': 'font-extralight', + '300': 'font-light', + '400': 'font-normal', + '500': 'font-medium', + '600': 'font-semibold', + '700': 'font-bold', + '800': 'font-extrabold', + '900': 'font-black', + }, + }, + defaultVariants: { + size: 'default', + weight: '400', + }, +}); + type BlogData = { blogs: WeaverseBlog; backgroundColor: string; articlePerRow: number; showSeperator: boolean; + as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; + minSize?: number; + maxSize?: number; }; -type BlogProps = HydrogenComponentProps>> & - BlogData; +export interface BlogProps + extends HydrogenComponentProps>>, + BlogData, + VariantProps, + VariantProps {} let articlesPerRowClasses: {[item: number]: string} = { 1: 'sm:grid-cols-1', @@ -34,6 +102,13 @@ const Blogs = forwardRef((props, ref) => { backgroundColor, articlePerRow, showSeperator, + as: Tag = 'h4', + size, + mobileSize, + desktopSize, + weight, + minSize, + maxSize, loaderData, children, ...rest @@ -41,18 +116,22 @@ const Blogs = forwardRef((props, ref) => { let sectionStyle: CSSProperties = { '--background-color': backgroundColor, + '--min-size-px': `${minSize}px`, + '--min-size': minSize, + '--max-size': maxSize, } as CSSProperties; - const defaultArticles = Array.from({ length: 3 }).map((_, i) => ({ + const defaultArticles = Array.from({length: 3}).map((_, i) => ({ id: i, title: 'Trendy items for this Winter Fall 2025 season', - excerpt: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.", + excerpt: + "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.", image: null, handle: null, })); const res = loaderData?.blog?.articles.nodes ?? defaultArticles; - + return (
((props, ref) => {
)}
-

{idx.title}

+ + {idx.title} + {showSeperator && (
)} -

- {idx.excerpt} -

+

{idx.excerpt}

@@ -131,7 +216,7 @@ export const schema: HydrogenComponentSchema = { toolbar: ['general-settings', ['duplicate', 'delete']], inspector: [ { - group: 'Blogs', + group: 'Blog', inputs: [ { type: 'blog', @@ -163,6 +248,135 @@ export const schema: HydrogenComponentSchema = { }, ], }, + { + group: 'Heading title (optional)', + inputs: [ + { + type: 'select', + name: 'as', + label: 'HTML tag', + configs: { + options: [ + {value: 'h1', label: '

(Heading 1)'}, + {value: 'h2', label: '

(Heading 2)'}, + {value: 'h3', label: '

(Heading 3)'}, + {value: 'h4', label: '

(Heading 4)'}, + {value: 'h5', label: '

(Heading 5)'}, + {value: 'h6', label: '
(Heading 6)'}, + ], + }, + defaultValue: 'h4', + }, + { + type: 'select', + name: 'size', + label: 'Text size', + configs: { + options: [ + {value: 'default', label: 'Default'}, + {value: 'scale', label: 'Auto scale'}, + {value: 'custom', label: 'Custom'}, + ], + }, + defaultValue: 'default', + }, + { + type: 'range', + name: 'minSize', + label: 'Minimum scale size', + configs: { + min: 12, + max: 32, + step: 1, + unit: 'px', + }, + defaultValue: 16, + condition: 'size.eq.scale', + }, + { + type: 'range', + name: 'maxSize', + label: 'Maximum scale size', + configs: { + min: 40, + max: 96, + step: 1, + unit: 'px', + }, + defaultValue: 64, + condition: 'size.eq.scale', + helpText: + 'See how scale text works here.', + }, + { + type: 'select', + name: 'mobileSize', + label: 'Mobile text size', + condition: 'size.eq.custom', + configs: { + options: [ + {value: 'xs', label: 'Extra small (text-xs)'}, + {value: 'sm', label: 'Small (text-sm)'}, + {value: 'base', label: 'Base (text-base)'}, + {value: 'lg', label: 'Large (text-lg)'}, + {value: 'xl', label: 'Extra large (text-xl)'}, + {value: '2xl', label: '2x large (text-2xl)'}, + {value: '3xl', label: '3x large (text-3xl)'}, + {value: '4xl', label: '4x large (text-4xl)'}, + {value: '5xl', label: '5x large (text-5xl)'}, + {value: '6xl', label: '6x large (text-6xl)'}, + {value: '7xl', label: '7x large (text-7xl)'}, + {value: '8xl', label: '8x large (text-8xl)'}, + {value: '9xl', label: '9x large (text-9xl)'}, + ], + }, + defaultValue: '3xl', + }, + { + type: 'select', + name: 'desktopSize', + label: 'Desktop text size', + condition: 'size.eq.custom', + configs: { + options: [ + {value: 'xs', label: 'Extra small (text-xs)'}, + {value: 'sm', label: 'Small (text-sm)'}, + {value: 'base', label: 'Base (text-base)'}, + {value: 'lg', label: 'Large (text-lg)'}, + {value: 'xl', label: 'Extra large (text-xl)'}, + {value: '2xl', label: '2x large (text-2xl)'}, + {value: '3xl', label: '3x large (text-3xl)'}, + {value: '4xl', label: '4x large (text-4xl)'}, + {value: '5xl', label: '5x large (text-5xl)'}, + {value: '6xl', label: '6x large (text-6xl)'}, + {value: '7xl', label: '7x large (text-7xl)'}, + {value: '8xl', label: '8x large (text-8xl)'}, + {value: '9xl', label: '9x large (text-9xl)'}, + ], + }, + defaultValue: '5xl', + }, + { + type: 'select', + name: 'weight', + label: 'Weight', + configs: { + options: [ + {value: '100', label: '100 - Thin'}, + {value: '200', label: '200 - Extra Light'}, + {value: '300', label: '300 - Light'}, + {value: '400', label: '400 - Normal'}, + {value: '500', label: '500 - Medium'}, + {value: '600', label: '600 - Semi Bold'}, + {value: '700', label: '700 - Bold'}, + {value: '800', label: '800 - Extra Bold'}, + {value: '900', label: '900 - Black'}, + ], + }, + defaultValue: '400', + }, + ], + }, ], childTypes: ['heading'], presets: { From 9546b90b5741c053762d4a083b873848c8445f04 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Fri, 16 Aug 2024 17:41:32 +0700 Subject: [PATCH 06/12] update style for image w text section --- app/sections/image-with-text/content.tsx | 2 +- app/sections/image-with-text/image.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/sections/image-with-text/content.tsx b/app/sections/image-with-text/content.tsx index c6b8e18..0f7d083 100644 --- a/app/sections/image-with-text/content.tsx +++ b/app/sections/image-with-text/content.tsx @@ -33,7 +33,7 @@ let ImageWithTextContent = forwardRef< >((props, ref) => { let {alignment, children, ...rest} = props; return ( -
+
{children}
); diff --git a/app/sections/image-with-text/image.tsx b/app/sections/image-with-text/image.tsx index 6b31fcd..b6049ae 100644 --- a/app/sections/image-with-text/image.tsx +++ b/app/sections/image-with-text/image.tsx @@ -10,7 +10,7 @@ import type {VariantProps} from 'class-variance-authority'; import {cva} from 'class-variance-authority'; import {forwardRef} from 'react'; -let variants = cva('w-full h-auto', { +let variants = cva('w-full h-auto flex-1', { variants: { width: { small: 'md:w-[40%]', From 6f73ddbc6e0c34f0353e6d9a7a858f22ee2f074d Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Fri, 16 Aug 2024 17:42:13 +0700 Subject: [PATCH 07/12] update config style global --- app/weaverse/style.tsx | 2 +- tailwind.config.js | 21 ++++++++++++++++++++- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/app/weaverse/style.tsx b/app/weaverse/style.tsx index 5f7d57b..1b6acfb 100644 --- a/app/weaverse/style.tsx +++ b/app/weaverse/style.tsx @@ -128,7 +128,7 @@ export function GlobalStyle() { body, button, input, select, textarea { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; - font-size: calc(var(--body-base-size) * 0.92); + font-size: var(--body-base-size); letter-spacing: var(--body-base-spacing); line-height: var(--body-base-line-height); text-rendering: optimizeSpeed; diff --git a/tailwind.config.js b/tailwind.config.js index 4e21db4..2a8b675 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,9 +12,28 @@ module.exports = { }, }, fontFamily: { - body: ["Open Sans Variable", "ui-sans-serif", "system-ui", "sans-serif"], + body: ["Nunito Sans Variable", "ui-sans-serif", "system-ui", "sans-serif"], heading: ["Cormorant Variable", "ui-serif", "Georgia", "Cambria", "Times New Roman", "Times", "serif"], }, + fontSize: { + scale: [ + "calc(var(--min-size-px) + (var(--max-size) - var(--min-size)) * ((100vw - var(--wv-min-viewport-size, 320) * 1px) / (var(--wv-max-viewport-size, 1920) - var(--wv-min-viewport-size, 320))))", + 1, + ], + xs: ["calc(var(--body-base-size) * 0.75)", 1], + sm: ["calc(var(--body-base-size) * 0.875)", 1.25], + base: ["var(--body-base-size)", "var(--body-base-line-height)"], + lg: ["calc(var(--body-base-size) * 1.125)", 1.75], + xl: ["calc(var(--body-base-size) * 1.25)", 1.75], + "2xl": ["calc(var(--body-base-size) * 1.5)", 2], + "3xl": ["calc(var(--body-base-size) * 1.875)", 2.25], + "4xl": ["calc(var(--body-base-size) * 2.25)", 2.5], + "5xl": ["calc(var(--body-base-size) * 3)", 1], + "6xl": ["calc(var(--body-base-size) * 3.75)", 1], + "7xl": ["calc(var(--body-base-size) * 4.5)", 1], + "8xl": ["calc(var(--body-base-size) * 6)", 1], + "9xl": ["calc(var(--body-base-size) * 8)", 1], + }, extend: { colors: { background: { From f854e96fabaae6374b8e9e1d5ce78b03148778ca Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Fri, 16 Aug 2024 17:43:12 +0700 Subject: [PATCH 08/12] update style remove padding x layout for testimonial --- app/sections/testimonials/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/sections/testimonials/index.tsx b/app/sections/testimonials/index.tsx index cb95adc..03862b4 100644 --- a/app/sections/testimonials/index.tsx +++ b/app/sections/testimonials/index.tsx @@ -44,7 +44,7 @@ const Testimonials = forwardRef((
@@ -92,7 +92,7 @@ export let schema: HydrogenComponentSchema = { inputs: layoutInputs.filter(({ name }) => name !== 'divider' && name !== 'borderRadius' && name !== 'gap'), }, { - group: 'testimonials', + group: 'Testimonials', inputs: [ { type: 'image', From c94556c5614bd4929b4c4e1fb37cda1d695daec7 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Mon, 19 Aug 2024 08:27:22 +0700 Subject: [PATCH 09/12] remove isLoggedIn due to lack of use --- app/components/Header/Header.tsx | 7 ++----- app/components/Header/MenuDrawerHeader.tsx | 2 -- app/components/Header/MenuMegaHeader.tsx | 2 -- app/components/Layout.tsx | 4 +--- 4 files changed, 3 insertions(+), 12 deletions(-) diff --git a/app/components/Header/Header.tsx b/app/components/Header/Header.tsx index 0888df4..a692871 100644 --- a/app/components/Header/Header.tsx +++ b/app/components/Header/Header.tsx @@ -4,9 +4,9 @@ import {UseMenuMegaHeader} from './MenuMegaHeader'; import type {LayoutProps} from '../Layout'; import { AnnouncementBar } from './AnnouncementBar'; -type HeaderProps = Pick; +type HeaderProps = Pick; -export function Header({headerMenu, isLoggedIn, cart}: HeaderProps) { +export function Header({headerMenu, cart}: HeaderProps) { let settings = useThemeSettings(); let typeMenu = settings?.typeMenuHeader; let enableTrialShipping = settings?.enableTrialShipping; @@ -16,7 +16,6 @@ export function Header({headerMenu, isLoggedIn, cart}: HeaderProps) { {typeMenu === 'mega' && ( @@ -24,13 +23,11 @@ export function Header({headerMenu, isLoggedIn, cart}: HeaderProps) { {typeMenu === 'drawer' ? ( ) : ( diff --git a/app/components/Header/MenuDrawerHeader.tsx b/app/components/Header/MenuDrawerHeader.tsx index 44f9b56..f4425ef 100644 --- a/app/components/Header/MenuDrawerHeader.tsx +++ b/app/components/Header/MenuDrawerHeader.tsx @@ -20,12 +20,10 @@ import {SearchToggle} from './SearchToggle'; export function UseMenuDrawerHeader({ header, - isLoggedIn, cart, className, }: { header: EnhancedMenu | null | undefined; - isLoggedIn: Promise; cart: Promise; className?: string; }) { diff --git a/app/components/Header/MenuMegaHeader.tsx b/app/components/Header/MenuMegaHeader.tsx index af41c9c..3921bba 100644 --- a/app/components/Header/MenuMegaHeader.tsx +++ b/app/components/Header/MenuMegaHeader.tsx @@ -20,12 +20,10 @@ import {SearchToggle} from './SearchToggle'; export function UseMenuMegaHeader({ header, - isLoggedIn, cart, className, }: { header: EnhancedMenu | null | undefined; - isLoggedIn: Promise; cart: Promise; className?: string; }) { diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx index 5c8ef2a..f25ced1 100644 --- a/app/components/Layout.tsx +++ b/app/components/Layout.tsx @@ -12,7 +12,6 @@ export type LayoutProps = { children?: React.ReactNode; footerMenu: EnhancedMenu | undefined | null; headerMenu: EnhancedMenu | undefined | null; - isLoggedIn: Promise; }; export function Layout({ @@ -20,7 +19,6 @@ export function Layout({ children = null, footerMenu, headerMenu, - isLoggedIn, }: LayoutProps) { return ( @@ -28,7 +26,7 @@ export function Layout({ {/* */} {/* */} {/* */} - {headerMenu &&
} + {headerMenu &&
}
{children}
From cd5cac8d3eec1110ee89329e98c65eab63c9b7bf Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Mon, 19 Aug 2024 08:28:34 +0700 Subject: [PATCH 10/12] Update loader ErrorBoundary --- app/root.tsx | 118 ++++++++++++++++++++++++++------------------------- 1 file changed, 60 insertions(+), 58 deletions(-) diff --git a/app/root.tsx b/app/root.tsx index ed2c896..b8a95f3 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -5,7 +5,6 @@ import { Outlet, Scripts, ScrollRestoration, - useLoaderData, useMatches, useRouteError, type ShouldRevalidateFunction, @@ -29,12 +28,12 @@ import tailwind from './styles/tailwind.css?url'; import {GlobalStyle} from './weaverse/style'; import '@fontsource-variable/cormorant/wght.css?url'; import '@fontsource-variable/open-sans/wght.css?url'; -import {CustomAnalytics} from '~/components/Analytics'; -import {seoPayload} from '~/lib/seo.server'; import {Button} from '@/components/button'; import {Image} from '@shopify/hydrogen'; +import {CustomAnalytics} from '~/components/Analytics'; +import {seoPayload} from '~/lib/seo.server'; import {getErrorMessage} from './lib/defineMessageError'; -import { parseMenu } from './lib/utils'; +import {parseMenu} from './lib/utils'; /** * This is important to avoid re-fetching root queries on sub-navigations @@ -105,7 +104,7 @@ export async function loader({context, request}: LoaderFunctionArgs) { const headerMenu = header?.menu ? parseMenu(header.menu, header.shop.primaryDomain.url, env) : undefined; - const footerMenu = footer?.menu + const footerMenu = footer?.menu ? parseMenu(footer.menu, footer.shop.primaryDomain.url, env) : undefined; @@ -140,9 +139,10 @@ export async function loader({context, request}: LoaderFunctionArgs) { export const meta = ({data}: MetaArgs) => { return getSeoMeta(data!.seo as SeoConfig); }; -function App() { + +function IndexLayout({children}: {children?: React.ReactNode}) { const nonce = useNonce(); - const data = useLoaderData(); + const data = useRootLoaderData(); return ( @@ -153,16 +153,24 @@ function App() { - - - - - - + {data ? ( + + + {children} + + + + ) : ( + children + )} @@ -170,14 +178,20 @@ function App() { ); } +function App() { + return ( + + + + ); +} + export default withWeaverse(App); -function ErrorBoundaryComponent() { +export function ErrorBoundary() { const routeError = useRouteError(); - const rootData = useRootLoaderData(); - const nonce = useNonce(); - let errorMessage = ''; let errorStatus = 0; + if (isRouteErrorResponse(routeError)) { errorMessage = getErrorMessage(routeError.status); errorStatus = routeError.status; @@ -186,46 +200,34 @@ function ErrorBoundaryComponent() { } return ( - - - - - - - - - - -
-
- -
-
-

{errorStatus}

- {errorMessage && ( - {errorMessage} - )} - -
-
- - - - - + +
+
+ +
+
+

{errorStatus}

+ {errorMessage && ( + + {errorMessage} + + )} + +
+
+ ); } -export let ErrorBoundary = withWeaverse(ErrorBoundaryComponent); const MENU_FRAGMENT = `#graphql fragment MenuItem on MenuItem { From 0d7d69863259707e3ad9cf556677a53da49dbd27 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Mon, 19 Aug 2024 12:47:58 +0700 Subject: [PATCH 11/12] update style footer --- app/components/Footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx index a513ded..72bf779 100644 --- a/app/components/Footer.tsx +++ b/app/components/Footer.tsx @@ -61,7 +61,7 @@ export function Footer({footerMenu}: FooterProps) {
{footerMenu && }
-
+

{footerTextCopyright}

From 470a18779de80c1d89498a7bfe021979f2cdf2ac Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Wed, 21 Aug 2024 16:18:40 +0700 Subject: [PATCH 12/12] fix bug css product media --- app/components/product-form/product-media.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/components/product-form/product-media.tsx b/app/components/product-form/product-media.tsx index 65ffb3d..c82243a 100644 --- a/app/components/product-form/product-media.tsx +++ b/app/components/product-form/product-media.tsx @@ -4,6 +4,9 @@ import { useState } from "react"; import type { MediaFragment } from "storefrontapi.generated"; import { FreeMode, Pagination, Thumbs } from "swiper/modules"; import { Swiper, type SwiperClass, SwiperSlide } from "swiper/react"; +import 'swiper/css/free-mode'; +import 'swiper/css/navigation'; +import 'swiper/css/thumbs'; interface ProductMediaProps { selectedVariant: any;