feat: changes in language switcher (#897)

shopware · May 13, 2024 · 8e4e595 · 8e4e595
1 parent 351e28a
commit 8e4e595
Show file tree

Hide file tree

Showing 26 changed files with 119 additions and 30 deletions.
diff --git a/.changeset/green-geckos-chew.md b/.changeset/green-geckos-chew.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Add `localeId` as an option to change the language
diff --git a/.changeset/green-pumas-cough.md b/.changeset/green-pumas-cough.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/cms-base": patch
+---
+
+Make injected translations the most significant priority source
diff --git a/.changeset/stupid-ravens-rhyme.md b/.changeset/stupid-ravens-rhyme.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Add missing product translations
diff --git a/apps/docs/src/getting-started/languages.md b/apps/docs/src/getting-started/languages.md
@@ -124,3 +124,32 @@ If you want to test languages locally, and your local domain differs from what i
 ```
 NUXT_PUBLIC_SHOPWARE_DEV_STOREFRONT_URL=http://127.0.0.1:3000
 ```
+
+## localeId
+
+In more complex scenarios, such as when different prefixes are used on the backend and frontend, the `localeId` attribute can be utilized.
+
+```
+  i18n: {
+    strategy: "prefix_except_default",
+    defaultLocale: "en-GB",
+    detectBrowserLanguage: false,
+    langDir: "./i18n/src/langs/",
+    vueI18n: "./i18n/config",
+    locales: [
+      {
+        code: "en-GB",
+        iso: "en-GB",
+        file: "en-GB.ts",
+      },
+      {
+        code: "testde",
+        iso: "de-DE",
+        file: "de-DE.ts",
+        localeId: "c19b753b5f2c4bea8ad15e00027802d4",
+      },
+    ],
+  },
+```
+
+The `localeId` attribute corresponds to a specific language identifier, which can be located within the Shopware administrative panel. Additional information is available at this link: https://docs.shopware.com/en/shopware-6-en/settings/languages
diff --git a/packages/cms-base/components/SwContactForm.vue b/packages/cms-base/components/SwContactForm.vue
@@ -68,7 +68,7 @@ let translations: Translations = {
   },
 };
 
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const loading = ref<boolean>();
 const formSent = ref<boolean>(false);

diff --git a/packages/cms-base/components/SwListingProductPrice.vue b/packages/cms-base/components/SwListingProductPrice.vue
@@ -28,7 +28,7 @@ let translations: Translations = {
   },
 };
 
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const { product } = toRefs(props);
 

diff --git a/packages/cms-base/components/SwNewsletterForm.vue b/packages/cms-base/components/SwNewsletterForm.vue
@@ -53,7 +53,7 @@ let translations: Translations = {
   },
 };
 
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const loading = ref<boolean>();
 const formSent = ref<boolean>(false);

diff --git a/packages/cms-base/components/SwPagination.vue b/packages/cms-base/components/SwPagination.vue
@@ -21,7 +21,7 @@ let translations: Translations = {
   },
 };
 
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 defineEmits<{
   (e: "changePage", page: number): void;

diff --git a/packages/cms-base/components/SwProductAddToCart.vue b/packages/cms-base/components/SwProductAddToCart.vue
@@ -26,10 +26,9 @@ let translations: Translations = {
   },
 };
 
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const { product } = toRefs(props);
-
 const { addToCart, quantity } = useAddToCart(product);
 
 const addToCartProxy = async () => {

diff --git a/packages/cms-base/components/SwProductCard.vue b/packages/cms-base/components/SwProductCard.vue
@@ -62,7 +62,7 @@ let translations: Translations = {
   },
 };
 
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const { product } = toRefs(props);
 

diff --git a/packages/cms-base/components/SwProductListingFilters.vue b/packages/cms-base/components/SwProductListingFilters.vue
@@ -34,7 +34,7 @@ let translations: Translations = {
   },
 };
 
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const route = useRoute();
 const router = useRouter();

diff --git a/packages/cms-base/components/SwProductPrice.vue b/packages/cms-base/components/SwProductPrice.vue
@@ -28,7 +28,7 @@ let translations: Translations = {
   },
 };
 
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const { product } = toRefs(props);
 

diff --git a/packages/cms-base/components/SwProductReviews.vue b/packages/cms-base/components/SwProductReviews.vue
@@ -21,7 +21,7 @@ let translations: Translations = {
   },
 };
 
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const { product, reviews } = toRefs(props);
 

diff --git a/packages/cms-base/components/SwProductUnits.vue b/packages/cms-base/components/SwProductUnits.vue
@@ -27,7 +27,7 @@ let translations: Translations = {
   },
 };
 
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const purchaseUnit = computed(() => props.product?.purchaseUnit);
 const unitName = computed(() => props.product?.unit?.translated?.name);

diff --git a/packages/cms-base/components/SwVariantConfigurator.vue b/packages/cms-base/components/SwVariantConfigurator.vue
@@ -28,7 +28,7 @@ let translations: Translations = {
   },
 };
 
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const emit = defineEmits<{
   (e: "change", selected: any): void;

diff --git a/packages/cms-base/components/listing-filters/SwFilterPrice.vue b/packages/cms-base/components/listing-filters/SwFilterPrice.vue
@@ -35,7 +35,7 @@ let translations: Translations = {
     max: "Max",
   },
 };
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const prices = reactive<{ min: number; max: number }>({
   min: 0,

diff --git a/packages/cms-base/components/public/cms/element/CmsElementBuyBox.vue b/packages/cms-base/components/public/cms/element/CmsElementBuyBox.vue
@@ -52,7 +52,7 @@ let translations: Translations = {
   },
 };
 
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const { getConfigValue } = useCmsElementConfig(props.content);
 const alignment = computed(() => getConfigValue("alignment"));

diff --git a/packages/cms-base/components/public/cms/element/CmsElementCategoryNavigation.vue b/packages/cms-base/components/public/cms/element/CmsElementCategoryNavigation.vue
@@ -30,7 +30,7 @@ let translations: Translations = {
   },
 };
 
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const { category: activeCategory } = useCategory();
 const loading: Ref<boolean> = ref(true);

diff --git a/packages/cms-base/components/public/cms/element/CmsElementProductDescriptionReviews.vue b/packages/cms-base/components/public/cms/element/CmsElementProductDescriptionReviews.vue
@@ -27,7 +27,7 @@ let translations: Translations = {
     reviews: "Reviews",
   },
 };
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const currentTab = ref<number>(1);
 const { product } = useProduct(props.content.data?.product);

diff --git a/packages/cms-base/components/public/cms/element/CmsElementProductListing.vue b/packages/cms-base/components/public/cms/element/CmsElementProductListing.vue
@@ -33,7 +33,7 @@ let translations: Translations = {
     products: "Products",
   },
 };
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const {
   changeCurrentPage,

diff --git a/templates/vue-demo-store/app.vue b/templates/vue-demo-store/app.vue
@@ -52,7 +52,8 @@ const { refreshCart } = useCart();
 useNotifications();
 useAddress();
 
-const { locale, availableLocales, defaultLocale } = useI18n();
+const { locale, availableLocales, defaultLocale, localeProperties, messages } =
+  useI18n();
 const router = useRouter();
 const {
   getAvailableLanguages,
@@ -66,6 +67,7 @@ const { languageIdChain, refreshSessionContext } = useSessionContext();
 const { data: languages } = await useAsyncData("languages", async () => {
   return await getAvailableLanguages();
 });
+let languageToChangeId: string | null = null;
 
 if (languages.value?.elements.length && router.currentRoute.value.name) {
   storeLanguages.value = languages.value?.elements;
@@ -76,13 +78,26 @@ if (languages.value?.elements.length && router.currentRoute.value.name) {
     defaultLocale,
   );
 
+  provide("cmsTranslations", messages.value[prefix ?? defaultLocale] ?? {});
+
   // Language set on the backend side
-  const sessionLanguage = getLanguageCodeFromId(languageIdChain.value);
-  // If languages are not the same, set one from prefix
-  if (sessionLanguage !== prefix) {
-    await changeLanguage(
-      getLanguageIdFromCode(prefix ? prefix : defaultLocale),
-    );
+  if (localeProperties.value.localeId) {
+    if (languageIdChain.value !== localeProperties.value.localeId) {
+      languageToChangeId = localeProperties.value.localeId;
+    }
+  } else {
+    const sessionLanguage = getLanguageCodeFromId(languageIdChain.value);
+
+    // If languages are not the same, set one from prefix
+    if (sessionLanguage !== prefix) {
+      languageToChangeId = getLanguageIdFromCode(
+        prefix ? prefix : defaultLocale,
+      );
+    }
+  }
+
+  if (languageToChangeId) {
+    await changeLanguage(languageToChangeId);
     await refreshSessionContext();
   }
 

diff --git a/templates/vue-demo-store/components/cms/element/CmsElementProductDescriptionReviews.vue b/templates/vue-demo-store/components/cms/element/CmsElementProductDescriptionReviews.vue
@@ -33,7 +33,7 @@ let translations: Translations = {
     },
   },
 };
-translations = defu(translations, useCmsTranslations()) as Translations;
+translations = defu(useCmsTranslations(), translations) as Translations;
 
 const currentTab = ref<number>(1);
 const { product } = useProduct(props.content.data?.product);

diff --git a/templates/vue-demo-store/i18n/de-DE/product.json b/templates/vue-demo-store/i18n/de-DE/product.json
@@ -30,6 +30,16 @@
       "removedFromWishlist": "{p} wurde aus der Wunschliste entfernt.",
       "addedToCart": "{p} wurde dem Warenkorb hinzugefügt.",
       "reviewAdded": "Vielen Dank für Ihre Bewertung"
-    }
+    },
+    "to": "Bis",
+    "from": "Ab",
+    "pricesIncl": "Preise inkl. MwSt. zzgl. Versandkosten",
+    "pricesExcl": "Preise exkl. MwSt. zzgl. Versandkosten",
+    "deliveryTime": "Lieferzeit",
+    "days": "tage",
+    "noAvailable": "Nicht verfügbar",
+    "productNumber": "Artikelnummer",
+    "addedToCart": "in den Warenkorb gelegt",
+    "qty": "Menge"
   }
 }
diff --git a/templates/vue-demo-store/i18n/en-GB/product.json b/templates/vue-demo-store/i18n/en-GB/product.json
@@ -30,6 +30,16 @@
       "removedFromWishlist": "{p} has been removed from wishlist.",
       "addedToCart": "{p} has been added to cart.",
       "reviewAdded": "Thank you for submitting your review"
-    }
+    },
+    "to": "To",
+    "from": "From",
+    "pricesIncl": "Prices incl. VAT plus shipping costs",
+    "pricesExcl": "Prices excl. VAT plus shipping costs",
+    "deliveryTime": "Available, delivery time",
+    "days": "days",
+    "noAvailable": "No longer available",
+    "productNumber": "Product number",
+    "addedToCart": "has been added to cart.",
+    "qty": "Qty"
   }
 }
diff --git a/templates/vue-demo-store/i18n/pl-PL/product.json b/templates/vue-demo-store/i18n/pl-PL/product.json
@@ -24,12 +24,22 @@
     "addReview": "Dodaj ocenę",
     "noReviews": "Nie ma jeszcze recenzji.",
     "reviewNotAccepted": "Twoja recenzja nie została jeszcze zatwierdzona",
-    "reviewFeedback": "Nasza opinia",    
+    "reviewFeedback": "Nasza opinia",
     "messages": {
       "addedToWishlist": "{p} został dodany do listy życzeń.",
       "removedFromWishlist": "{p} został usunięty z listy życzeń.",
       "addedToCart": "{p} został dodany do koszyka.",
       "reviewAdded": "Dziękujemy za ocenę"
-    }
+    },
+    "to": "Do",
+    "from": "Od",
+    "pricesIncl": "Ceny zawierają VAT plus koszty wysyłki",
+    "pricesExcl": "Ceny nie zawierają VAT plus koszty wysyłki",
+    "deliveryTime": "Czas dostawy",
+    "days": "dni",
+    "noAvailable": "Produkt niedostępny",
+    "productNumber": "Numer produktu",
+    "addedToCart": "został dodany do koszyka",
+    "qty": "Ilość"
   }
 }
diff --git a/templates/vue-demo-store/nuxt.config.ts b/templates/vue-demo-store/nuxt.config.ts
@@ -124,9 +124,10 @@ export default defineNuxtConfig({
         file: "pl-PL.ts",
       },
       {
-        code: "de-DE",
+        code: "testde",
         iso: "de-DE",
         file: "de-DE.ts",
+        localeId: "c19b753b5f2c4bea8ad15e00027802d4",
       },
     ],
   },