Merge pull request #21 from snipcart/localization

Added fr localization
snipcart · Mar 21, 2022 · 4d6179e · 4d6179e
2 parents ac55233 + 9a393b7
commit 4d6179e
Show file tree

Hide file tree

Showing 17 changed files with 471 additions and 99 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
 node_modules
-.nuxt
+.nuxt
+.idea
+dist
diff --git a/assets/products-en.ts b/assets/products-en.ts
@@ -0,0 +1,77 @@
+import { Product } from "./products";
+
+const Products: Product[] = [
+  {
+    id: "demo-starry-night",
+    name: "Starry Night",
+    prices: {
+      physical: 79.95,
+      digital: 29.75
+    },
+    description: "High-quality replica of The Starry Night by the Dutch post-impressionist painter Vincent van Gogh.",
+    image: "/images/starry-night.jpg",
+    fileGuid: "09e589c7-3d18-4c2e-9cee-4f447e9f054a",
+    plans: [],
+  },
+  {
+    id: "demo-magazine-subscription",
+    name: "Magazine subscription",
+    prices: {
+      physical: 10.00,
+      digital: 0,
+    },
+    description: "Subscribe to our painter's magazine. You can opt-in for a weekly or monthly subscription.",
+    image: "/images/painting.jpg",
+    plans: [{
+      frequency: 'monthly',
+      id: 'magazine-monthly-plan',
+      interval: 1,
+      name: 'Monthly subscription',
+      price: 20
+    },{
+      frequency: 'weekly',
+      id: 'magazine-weekly-plan',
+      interval: 1,
+      name: 'Weekly subscription',
+      price: 10
+    }],
+  },
+  {
+    id: "demo-rosy",
+    name: "Rosy-Fingered Dawn at Louse Point",
+    prices: {
+      physical: 49.95,
+      digital: 29.75
+    },
+    description: "The title Rosy-Fingered Dawn at Louse Point refers to one of Willem de Kooning's favourite places in Long Island.",
+    image: "/images/rosy.jpg",
+    fileGuid: "98dbd416-159d-4f76-8a59-30703cf6189f",
+    plans: [],
+  },
+  {
+    id: "demo-irises",
+    name: "Irises",
+    prices: {
+      physical: 65.95,
+      digital: 29.75
+    },
+    description: "Irises is yet again, another painting by the Dutch artist Vincent van Gogh.",
+    image: "/images/irises.jpg",
+    fileGuid: "66edfe7f-0851-4418-93e8-785975df7318",
+    plans: [],
+  },
+  {
+    id: "demo-almond",
+    name: "Branches with Almond Blossom",
+    prices: {
+      physical: 99.95,
+      digital: 29.75
+    },
+    description: "Branches with Almond Blossom is another van Gogh painted in 1890.",
+    image: "/images/almond.jpg",
+    fileGuid: "79b1504d-9127-4e7f-bcdb-dff84a337775",
+    plans: [],
+  },
+]
+
+export default Products;
diff --git a/assets/products-fr.ts b/assets/products-fr.ts
@@ -0,0 +1,77 @@
+import { Product } from "./products"
+
+const Products: Product[] = [
+  {
+    id: "demo-starry-night",
+    name: "Nuit étoilée",
+    prices: {
+      physical: 79.95,
+      digital: 29.75
+    },
+    description: "Réplique d'excellente qualité de La Nuit Étoilée par le paintre Vincent van Gogh.",
+    image: "/images/starry-night.jpg",
+    fileGuid: "09e589c7-3d18-4c2e-9cee-4f447e9f054a",
+    plans: [],
+  },
+  {
+    id: "demo-magazine-subscription",
+    name: "Abonnement au magazine",
+    prices: {
+      physical: 10.00,
+      digital: 0,
+    },
+    description: "Abonnez-vous à notre magazine pour paintres. Un abonnement hebdomadaire ou mensuel est disponible.",
+    image: "/images/painting.jpg",
+    plans: [{
+      frequency: 'monthly',
+      id: 'magazine-monthly-plan',
+      interval: 1,
+      name: 'Abonnement mensuel',
+      price: 20
+    },{
+      frequency: 'weekly',
+      id: 'magazine-weekly-plan',
+      interval: 1,
+      name: 'Abonnement hebdomadaire',
+      price: 10
+    }],
+  },
+  {
+    id: "demo-rosy",
+    name: "Rosy-Fingered Dawn at Louse Point",
+    prices: {
+      physical: 49.95,
+      digital: 29.75
+    },
+    description: "Le titre Rosy-Fingered Dawn at Louse Point réfère à un des endroits préférés de Willem de Kooning's à Long Island.",
+    image: "/images/rosy.jpg",
+    fileGuid: "98dbd416-159d-4f76-8a59-30703cf6189f",
+    plans: [],
+  },
+  {
+    id: "demo-irises",
+    name: "Irises",
+    prices: {
+      physical: 65.95,
+      digital: 29.75
+    },
+    description: "Irises est, encore une fois, une peinture de Vincent van Gogh.",
+    image: "/images/irises.jpg",
+    fileGuid: "66edfe7f-0851-4418-93e8-785975df7318",
+    plans: [],
+  },
+  {
+    id: "demo-almond",
+    name: "Branches with Almond Blossom",
+    prices: {
+      physical: 99.95,
+      digital: 29.75
+    },
+    description: "Branches with Almond Blossom est un autre van Gogh peint en 1890.",
+    image: "/images/almond.jpg",
+    fileGuid: "79b1504d-9127-4e7f-bcdb-dff84a337775",
+    plans: [],
+  },
+]
+
+export default Products;
diff --git a/assets/products.ts b/assets/products.ts
@@ -20,79 +20,3 @@ export interface ProductPrices {
   physical: number,
   digital: number
 }
-
-const Products: Product[] = [
-  {
-    id: "demo-starry-night",
-    name: "Starry Night",
-    prices: {
-      physical: 79.95,
-      digital: 29.75
-    },
-    description: "High-quality replica of The Starry Night by the Dutch post-impressionist painter Vincent van Gogh.",
-    image: "/images/starry-night.jpg",
-    fileGuid: "09e589c7-3d18-4c2e-9cee-4f447e9f054a",
-    plans: [],
-  },
-  {
-    id: "demo-magazine-subscription",
-    name: "Magazine subscription",
-    prices: {
-      physical: 10.00,
-      digital: 0,
-    },
-    description: "Subscribe to our painter's magazine. You can opt-in for a weekly or monthly subscription.",
-    image: "/images/painting.jpg",
-    plans: [{
-      frequency: 'monthly',
-      id: 'magazine-monthly-plan',
-      interval: 1,
-      name: 'Monthly subscription',
-      price: 20
-    },{
-      frequency: 'weekly',
-      id: 'magazine-weekly-plan',
-      interval: 1,
-      name: 'Weekly subscription',
-      price: 10
-    }],
-  },
-  {
-    id: "demo-rosy",
-    name: "Rosy-Fingered Dawn at Louse Point",
-    prices: {
-      physical: 49.95,
-      digital: 29.75
-    },
-    description: "The title Rosy-Fingered Dawn at Louse Point refers to one of Willem de Kooning's favourite places in Long Island.",
-    image: "/images/rosy.jpg",
-    fileGuid: "98dbd416-159d-4f76-8a59-30703cf6189f",
-    plans: [],
-  },
-  {
-    id: "demo-irises",
-    name: "Irises",
-    prices: {
-      physical: 65.95,
-      digital: 29.75
-    },
-    description: "Irises is yet again, another painting by the Dutch artist Vincent van Gogh.",
-    image: "/images/irises.jpg",
-    fileGuid: "66edfe7f-0851-4418-93e8-785975df7318",
-    plans: [],
-  },
-  {
-    id: "demo-almond",
-    name: "Branches with Almond Blossom",
-    prices: {
-      physical: 99.95,
-      digital: 29.75
-    },
-    description: "Branches with Almond Blossom is another van Gogh painted in 1890.",
-    image: "/images/almond.jpg",
-    fileGuid: "79b1504d-9127-4e7f-bcdb-dff84a337775",
-    plans: [],
-  },
-]
-
-export default Products;
diff --git a/components/Footer.vue b/components/Footer.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="footer">
     <div class="footer__container">
-      <div class="footer__copy">Nuxt.js static site with Snipcart e-commerce.</div>
+      <div class="footer__copy">{{$t('footer_text')}}</div>
       <div class="footer__socials">
         <a href="https://twitter.com/snipcart">
           <Twitter class="footer__icon" />
@@ -30,4 +30,4 @@ export default Vue.extend({
     Facebook
   }
 });
-</script>
+</script>
diff --git a/components/Header.vue b/components/Header.vue
@@ -50,7 +50,7 @@
         </label>
         <button class="header__button header__account snipcart-customer-signin">
           <div class="header__button-text">
-            {{ loggedIn ? "My account" : "Sign In" }}
+            {{ loggedIn ? $t('my_account') : $t('login') }}
           </div>
         </button>
         <button class="header__button header__checkout snipcart-checkout">

diff --git a/components/ProductBuyButton.vue b/components/ProductBuyButton.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="product__summary">
         <div>
-            <label for="quantity">QUANTITY</label>
+            <label for="quantity">{{$t('quantity')}}</label>
             <input
             type="number"
             name="quantity"
@@ -12,10 +12,10 @@
             />
         </div>
         <div>
-          <label for="format">FORMAT</label>
+          <label for="format">{{$t('format')}}</label>
           <select name="format" id="format" @change="changeFormat">
-            <option value="physical">Physical copy</option>
-            <option value="digital">Digital copy (.jpg)</option>
+            <option value="physical">{{$t('physical_copy')}}</option>
+            <option value="digital">{{$t('digital_copy')}}</option>
           </select>
         </div>
 
@@ -30,7 +30,7 @@
             :data-item-image="product.image"
             :data-item-name="product.name"
             :data-item-quantity="quantity"
-            >Add to cart</button>
+            >{{$t('add_to_cart')}}</button>
         <button
           :class="'product__button snipcart-add-item ' + digitalButtonClasses"
           :data-item-id="`${product.id}-digital`"
@@ -41,7 +41,7 @@
           :data-item-name="`${product.name} (.jpg)`"
           :data-item-quantity="quantity"
           :data-item-file-guid="product.fileGuid"
-        >Add to cart</button>
+        >{{$t('add_to_cart')}}</button>
 </div>
 </template>
 
@@ -83,4 +83,4 @@ export default Vue.extend({
         }
     },
 })
-</script>
+</script>
diff --git a/components/SubscriptionBuyButton.vue b/components/SubscriptionBuyButton.vue
@@ -13,7 +13,7 @@
             :data-item-image="product.image"
             :data-item-name="product.name"
             v-bind="planData"
-            >Subscribe
+            >{{$t('subscribe')}}
         </button>
 </div>
 </template>
@@ -78,4 +78,4 @@ export default Vue.extend({
         }
     }
 })
-</script>
+</script>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -10,7 +10,23 @@
   </div>
 </template>
 
+<script lang="ts">
+
+import Vue from "vue";
+
+export default Vue.extend({
+  head() {
+    return {
+      htmlAttrs: {
+        lang: this.$i18n.locale
+      }
+    }
+  }
+})
+
+</script>
+
 <style lang="scss">
 @import "assets/scss/_styles.scss";
 
-</style>
+</style>
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -1,3 +1,5 @@
+import messages from './translations'
+
 export default {
   mode: "universal",
   /*
@@ -61,8 +63,23 @@ export default {
   ** Nuxt.js modules
   */
   modules: [
-    "@nuxtjs/sentry"
+    "@nuxtjs/sentry",
+    "@nuxtjs/i18n"
   ],
+  i18n: {
+    locales: ['en', 'fr'],
+    defaultLocale: 'en',
+    strategy: 'prefix_except_default',
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: 'i18n_redirected',
+      onlyOnRoot: true,
+    },
+    vueI18n: {
+      fallbackLocale: 'en',
+      messages,
+    },
+  },
   /*
   ** Sentry configuration
   */