Almost finished translations

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
-              ? 'Not Available'
-              : 'Add To Cart'}
+            {locale === 'en'
+              ? variant?.availableForSale === false
+                ? 'Not Available'
+                : '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