Almost finished translations

site/components/common/Footer/Footer.tsx

@@ -9,6 +9,7 @@ import { Logo, Container } from '@components/ui'
 import { I18nWidget } from '@components/common'
 import ThemeSwitcher from '@components/ui/ThemeSwitcher'
 import s from './Footer.module.css'
+import navBarLinks from '../../../static_data/navBarLinks.json'
 
 interface Props {
   className?: string
@@ -16,29 +17,18 @@ interface Props {
   pages?: Page[]
 }
 
-const links = [
+interface FooterLink {
-  {
+  label: string
-    name: 'Home',
+  href: string
-    url: '/',
-  },
-  {
-    name: 'About',
-    url: '/about'
-  },
-  {
-    name: 'News',
-    url: '/news'
-  },
-  {
-    name: 'Contact',
-    url: '/contact'
 }
-]
 
 const Footer: FC<Props> = ({ className, pages }) => {
   const { sitePages } = usePages(pages)
   const rootClassName = cn(s.root, className)
 
+  const { locale = 'it' } = useRouter()
+  const links = navBarLinks[locale as keyof typeof navBarLinks]
+
   return (
     <footer className={rootClassName}>
       <Container>
@@ -55,7 +45,16 @@ const Footer: FC<Props> = ({ className, pages }) => {
           </div>
           <div className="col-span-1 lg:col-span-7">
             <div className="grid md:grid-rows-4 md:grid-cols-3 md:grid-flow-col">
-              {[...links, ...sitePages].map((page) => (
+              {[...links].map((page: FooterLink) => (
+                <span key={page.href} className="py-3 md:py-0 md:pb-4">
+                  <Link href={page.href!}>
+                    <a className="text-accent-9 hover:text-accent-6 transition ease-in-out duration-150">
+                      {page.label}
+                    </a>
+                  </Link>
+                </span>
+              ))}
+              {[...sitePages].map((page) => (
                 <span key={page.url} className="py-3 md:py-0 md:pb-4">
                   <Link href={page.url!}>
                     <a className="text-accent-9 hover:text-accent-6 transition ease-in-out duration-150">

site/components/common/Layout/Layout.tsx

@@ -17,7 +17,7 @@ import { MenuSidebarView } from '@components/common/UserNav'
 import type { Page } from '@commerce/types/page'
 import type { Category } from '@commerce/types/site'
 import type { Link as LinkProps } from '../UserNav/MenuSidebarView'
-import navBarLinks from '../../../static_data/navBarLinks.json';
+import navBarLinks from '../../../static_data/navBarLinks.json'
 import Script from 'next/script'
 
 const Loading = () => (
@@ -111,13 +111,13 @@ const Layout: React.FC<Props> = ({
 }) => {
   const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
   const { locale = 'it' } = useRouter()
-  const navBarlinks = navBarLinks.links;
+  const navBarlinks = navBarLinks[locale as keyof typeof navBarLinks]
 
   return (
     <CommerceProvider locale={locale}>
       <div className={cn(s.root)}>
         <Navbar links={navBarlinks} />
-        <main className="fit">{children}</main>
+        <main>{children}</main>
         <Footer pages={pageProps.pages} />
         <ModalUI />
         <CheckoutProvider>

site/components/common/Navbar/NavBarFiltersDrawer.tsx

@@ -1,44 +1,63 @@
-import { Drawer, DrawerOverlay, DrawerContent, DrawerHeader, DrawerBody, Link, Box, Stack, Heading, Divider } from "@chakra-ui/react"
+import {
-import React, { useEffect, useState } from "react"
+  Drawer,
-import filtersData from '../../../static_data/navBarMenuData.json';
+  DrawerOverlay,
-import NavBarFiltersItem from './NavBarFiltersItem';
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  Link,
+  Box,
+  Stack,
+  Heading,
+  Divider,
+} from '@chakra-ui/react'
+import { useRouter } from 'next/router'
+import React, { useEffect, useState } from 'react'
+import filtersData from '../../../static_data/navBarMenuData.json'
+import NavBarFiltersItem from './NavBarFiltersItem'
 
 export default function NavBarFiltersDrawer(props: {
-  onClose: () => void;
+  onClose: () => void
-  isOpen: boolean;
+  isOpen: boolean
 }) {
+  const { locale = 'it' } = useRouter()
 
   const [placement, setPlacement] = React.useState('left' as const)
-    const [regions, setRegions] = React.useState<NavItem[]>([]);
+  const [regions, setRegions] = React.useState<NavItem[]>([])
-    const [categories, setCategories] = React.useState<NavItem[]>([]);
+  const [categories, setCategories] = React.useState<NavItem[]>([])
 
   useEffect(() => {
-      setRegions(filtersData.regions);
+    setRegions(filtersData.regions)
-      setCategories(filtersData.categories);
+    setCategories(
-    }, []);
+      filtersData.categories[locale as keyof typeof filtersData.categories]
+    )
+  }, [])
 
   return (
     <>
-        <Drawer placement={placement} onClose={props.onClose} isOpen={props.isOpen}>
+      <Drawer
+        placement={placement}
+        onClose={props.onClose}
+        isOpen={props.isOpen}
+      >
         <DrawerOverlay />
         <DrawerContent>
           <DrawerBody>
-              <Stack mt={5} direction={"column"} spacing={"20"}>
+            <Stack mt={5} direction={'column'} spacing={'20'}>
               <Box>
-                  <Heading size={"lg"} mb={5}>Regions</Heading>
+                <Heading size={'lg'} mb={5}>
-                  {
+                  {locale === 'it' ? 'Regioni' : 'Regions'}
-                    regions.map(region => (
+                </Heading>
+                {regions.map((region) => (
                   <NavBarFiltersItem key={region.label} {...region} />
-                    ))
+                ))}
-                  }
               </Box>
               <Box>
-                  <Heading mb={5} size={"lg"}>Categories</Heading>
+                <Heading mb={5} size={'lg'}>
-                  {
+                  {locale === 'it' ? 'Categorie' : 'Categories'}
-                    categories.map(category => (
+                </Heading>
+                {categories.map((category) => (
                   <NavBarFiltersItem key={category.label} {...category} />
-                    ))
+                ))}
-                  }
               </Box>
             </Stack>
           </DrawerBody>
@@ -49,9 +68,9 @@ export default function NavBarFiltersDrawer(props: {
 }
 
 interface NavItem {
-    label: string;
+  label: string
-    subLabel?: string;
+  subLabel?: string
-    children?: Array<NavItem>;
+  children?: Array<NavItem>
-    href?: string;
+  href?: string
-    enabled: boolean;
+  enabled: boolean
-  };
+}

site/components/common/Navbar/Navbar.tsx

@@ -17,12 +17,18 @@ interface NavbarProps {
 }
 
 const Navbar: FC<NavbarProps> = ({ links }) => {
-
+  const {
-  const { isOpen: isOpenDrawer, onOpen: onOpenDrawer, onClose: onCloseDrawer } = useDisclosure()
+    isOpen: isOpenDrawer,
+    onOpen: onOpenDrawer,
+    onClose: onCloseDrawer,
+  } = useDisclosure()
 
   return (
     <>
-      <NavBarFiltersDrawer onClose={onCloseDrawer} isOpen={isOpenDrawer} ></NavBarFiltersDrawer>
+      <NavBarFiltersDrawer
+        onClose={onCloseDrawer}
+        isOpen={isOpenDrawer}
+      ></NavBarFiltersDrawer>
       <NavbarRoot>
         <Container clean className="mx-auto max-w-8xl px-6">
           <div className={s.nav}>
@@ -38,10 +44,13 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
                 </Link>
                 {links?.map((l) => (
                   <Link href={l.href} key={l.href}>
-                    {
+                    {l.label === 'Regions' || l.label === 'Regioni' ? (
-                      l.label === 'Regions' ? (<a onClick={onOpenDrawer} className={s.link}>{l.label}</a>)
+                      <a onClick={onOpenDrawer} className={s.link}>
-                        : <a className={s.link}>{l.label}</a> 
+                        {l.label}
-                    }
+                      </a>
+                    ) : (
+                      <a className={s.link}>{l.label}</a>
+                    )}
                   </Link>
                 ))}
               </nav>

site/components/common/Searchbar/Searchbar.tsx

@@ -40,7 +40,11 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
       <input
         id={id}
         className={s.input}
-        placeholder="Search for products..."
+        placeholder={
+          router.locale === 'en'
+            ? 'Search for products...'
+            : 'Cerca Prodotti...'
+        }
         defaultValue={router.query.q}
         onKeyUp={handleKeyUp}
       />

site/components/product/ProductSidebar/ProductSidebar.tsx

@@ -13,6 +13,7 @@ import { Box, Stack, Text as ChakraText } from '@chakra-ui/react'
 import { Metafield } from '@commerce/types/common'
 
 import productDetailsMetafields from '../../../static_data/productDetailsMetafields.json'
+import { useRouter } from 'next/router'
 
 interface ProductSidebarProps {
   product: Product
@@ -24,6 +25,7 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
   const { openSidebar } = useUI()
   const [loading, setLoading] = useState(false)
   const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>({})
+  const { locale = 'it' } = useRouter()
 
   useEffect(() => {
     selectDefaultOptionFromProduct(product, setSelectedOptions)
@@ -56,7 +58,9 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
 
       <Box>
         <Stack>
-          {productDetailsMetafields.metafields[0].names.map((meta: any) => (
+          {productDetailsMetafields.metafields[
+            locale as keyof typeof productDetailsMetafields.metafields
+          ].map((meta: any) => (
             <Box key={meta.key}>
               <ChakraText
                 as={'span'}
@@ -76,16 +80,22 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
       <div style={{ marginTop: 20 }}>
         {process.env.COMMERCE_CART_ENABLED && (
           <Button
-            aria-label="Add to Cart"
+            aria-label={
+              locale === 'en' ? 'Add to Cart' : 'Aggiungi al Carrello'
+            }
             type="button"
             className={s.button}
             onClick={addToCart}
             loading={loading}
             disabled={variant?.availableForSale === false}
           >
-            {variant?.availableForSale === false
+            {locale === 'en'
+              ? variant?.availableForSale === false
                 ? 'Not Available'
-              : 'Add To Cart'}
+                : 'Add To Cart'
+              : variant?.availableForSale === false
+              ? 'Non Disponibile'
+              : 'Aggiungi al Carrello'}
           </Button>
         )}
       </div>

site/components/product/ProductView/ProductView.tsx

@@ -13,6 +13,7 @@ import ProductTag from '../ProductTag'
 import ProductModel from '../ProductModel/ProductModel'
 import Lightbox from 'yet-another-react-lightbox'
 import 'yet-another-react-lightbox/styles.css'
+import { useRouter } from 'next/router'
 
 interface ProductViewProps {
   product: Product
@@ -37,6 +38,7 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
     ?.pop()
 
   const [isLightboxOpen, setLightboxOpen] = useState(false)
+  const { locale = 'it' } = useRouter()
 
   return (
     <>
@@ -101,7 +103,9 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
         </div>
         <hr className="mt-7 border-accent-2" />
         <section className="py-12 px-6 mb-10">
-          <Text variant="sectionHeading">Related Products</Text>
+          <Text variant="sectionHeading">
+            {locale === 'en' ? 'Related Products' : 'Prodotti Correlati'}
+          </Text>
           <div className={s.relatedProductsGrid}>
             {relatedProducts.map((p) => (
               <div

site/pages/product/[slug].tsx

@@ -12,7 +12,7 @@ import { ProductView } from '@components/product'
 
 import productDetailsMetafields from '../../static_data/productDetailsMetafields.json'
 
-const withMetafields = productDetailsMetafields.metafields[0].names.map(
+const withMetafields = productDetailsMetafields.metafields.it.map(
   (metafield: any) => {
     return {
       namespace: metafield.namespace,

site/static_data/navBarLinks.json

@@ -1,6 +1,24 @@
 {
 
-    "links": [
+    "it": [
+        {
+            "label": "Regioni",
+            "href": "#"
+        },
+        {
+            "label": "Chi Siamo",
+            "href": "/about"
+        },
+        {
+            "label": "News",
+            "href": "/news"
+        },
+        {
+            "label": "Contatti",
+            "href": "/contact"
+        }
+    ],
+	"en": [
         {
             "label": "Regions",
             "href": "#"
@@ -18,5 +36,4 @@
             "href": "/contact"
         }
     ]
-
 }

site/static_data/navBarMenuData.json

@@ -24,7 +24,8 @@
     }
   ],
 
-    "categories": [
+  "categories": {
+    "it": [
       {
         "label": "Abbigliamento e Accessori",
         "children": [
@@ -211,5 +212,194 @@
         ],
         "enabled": true
       }
+    ],
+    "en": [
+      {
+        "label": "Clothing and Accessories",
+        "children": [
+          {
+            "label": "Baby Clothing",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Women's Clothing",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Men's Clothing",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Jewellery",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Shoes and Bags",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Watches and Precious",
+            "href": "#",
+            "enabled": true
+          }
+        ],
+        "enabled": true
+      },
+      {
+        "label": "House",
+        "children": [
+          {
+            "label": "Household Appliances",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Garden",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Lamps and Chandeliers",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Furniture and Furnishings",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Household Items",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Fabrics",
+            "href": "#",
+            "enabled": true
+          }
+        ],
+        "enabled": true
+      },
+      {
+        "label": "Electronic",
+        "children": [
+          {
+            "label": "Audio and Video",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Console and Videogames",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Photography",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Computer Science",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Telephony",
+            "href": "#",
+            "enabled": true
+          }
+        ],
+        "enabled": true
+      },
+      {
+        "label": "Work",
+        "children": [
+          {
+            "label": "Work Equipment",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Hardware and Crafts",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Gardening",
+            "href": "#",
+            "enabled": true
+          }
+        ],
+        "enabled": true
+      },
+      {
+        "label": "Sport and Hobby",
+        "children": [
+          {
+            "label": "Animals",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Sporting Goods",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Games and Toys",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Books and Magazines",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Musical Instruments",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "CD, DVD, Vinyl",
+            "href": "#",
+            "enabled": true
+          }
+        ],
+        "enabled": true
+      },
+      {
+        "label": "Vehicles",
+        "children": [
+          {
+            "label": "Car, Motorcycle and Bicycle Accessories",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Car",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Bicycle",
+            "href": "#",
+            "enabled": true
+          },
+          {
+            "label": "Motorcycle and Scooter",
+            "href": "#",
+            "enabled": true
+          }
+        ],
+        "enabled": true
+      }
     ]
   }
+}

site/static_data/productDetailsMetafields.json

@@ -1,8 +1,6 @@
 {
-  "metafields": [
+  "metafields": {
-    {
+    "it": [
-      "locale": "it",
-      "names": [
       {
         "name": "Tipo",
         "key": "tipo",
@@ -63,7 +61,68 @@
         "key": "made_in",
         "namespace": "custom"
       }
-      ]
+    ],
+    "en": [
+      {
+        "name": "Type",
+        "key": "tipo",
+        "namespace": "custom"
+      },
+      {
+        "name": "Material",
+        "key": "materiale",
+        "namespace": "custom"
+      },
+      {
+        "name": "Color",
+        "key": "colore",
+        "namespace": "custom"
+      },
+      {
+        "name": "Cosmetic Condition",
+        "key": "condizioni_estetiche",
+        "namespace": "custom"
+      },
+      {
+        "name": "Height",
+        "key": "altezza",
+        "namespace": "custom"
+      },
+      {
+        "name": "Thickness",
+        "key": "spessore",
+        "namespace": "custom"
+      },
+      {
+        "name": "Width",
+        "key": "larghezza",
+        "namespace": "custom"
+      },
+      {
+        "name": "Weight",
+        "key": "peso",
+        "namespace": "custom"
+      },
+      {
+        "name": "Original Packaging and Accessories",
+        "key": "confezione_accessori",
+        "namespace": "custom"
+      },
+      {
+        "name": "Description",
+        "key": "descrizione",
+        "namespace": "custom"
+      },
+      {
+        "name": "Vintage",
+        "key": "vintage",
+        "namespace": "custom"
+      },
+      {
+        "name": "Made In",
+        "key": "made_in",
+        "namespace": "custom"
       }
     ]
   }
+}