unchained/manoon-headless
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: eliminate hardcoded locale comparisons for antifragility

Browse Source 
Created centralized helpers:
- src/lib/i18n/pageMetadata.ts: All page metadata (titles, descriptions, alt text)
- src/lib/i18n/productText.ts: Product-specific translated text (shortDescription, benefits)
- src/lib/i18n/metadata.ts: Helper functions for locale handling

Updated all pages to use centralized metadata:
- Homepage: Uses getPageMetadata for title, description, productionAlt
- Products page: Uses getPageMetadata
- Product detail: Uses getPageMetadata + getTranslatedShortDescription/getTranslatedBenefits
- About page: Uses getPageMetadata

ProductDetail component now uses:
- getTranslatedShortDescription() instead of locale comparison
- getTranslatedBenefits() instead of locale comparison

All user-facing text now goes through translation files or centralized helpers.
Adding a new language now requires only:
1. Add to SUPPORTED_LOCALES in locales.ts
2. Add LOCALE_CONFIG entry
3. Add entries to pageMetadata.ts and productText.ts
4. Add translation keys to message files
This commit is contained in:
Unchained
2026-03-24 12:39:38 +02:00
parent 3d895f4d7a
commit 930a9a7614
8 changed files with 237 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/product/ProductDetail.tsx
View File

@@ -9,6 +9,8 @@ import { useTranslations } from "next-intl";
import type { Product } from "@/types/saleor";
import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
import { getProductPrice, getProductPriceAmount, getLocalizedProduct, formatPrice } from "@/lib/saleor";
import { getTranslatedShortDescription, getTranslatedBenefits } from "@/lib/i18n/productText";
import { isValidLocale } from "@/lib/i18n/locales";
import ProductCard from "@/components/product/ProductCard";
import ProductBenefits from "@/components/product/ProductBenefits";
import ProductReviews from "@/components/product/ProductReviews";
@@ -94,6 +96,7 @@ export default function ProductDetail({ product, relatedProducts, locale = "sr"
const [isAdding, setIsAdding] = useState(false);
const [urgencyIndex, setUrgencyIndex] = useState(0);
const { addLine, openCart } = useSaleorCheckoutStore();
const validLocale = isValidLocale(locale) ? locale : "sr";
useEffect(() => {
const interval = setInterval(() => {
@@ -132,15 +135,10 @@ export default function ProductDetail({ product, relatedProducts, locale = "sr"
const priceAmount = getProductPriceAmount(product);
const originalPrice = priceAmount > 0 ? formatPrice(Math.round(priceAmount * 1.30)) : null;
const shortDescription = localized.description
? localized.description.split('.')[0] + '.'
: locale === "en" ? "Premium natural oil for your beauty routine." : "Premium prirodno ulje za vašu rutinu lepote.";
const shortDescription = getTranslatedShortDescription(localized.description, validLocale);
const benefits = product.metadata?.find(m => m.key === "benefits")?.value?.split(',') || [
locale === "en" ? "Natural" : "Prirodno",
locale === "en" ? "Organic" : "Organsko",
locale === "en" ? "Cruelty-free" : "Bez okrutnosti",
];
const metadataBenefits = product.metadata?.find(m => m.key === "benefits")?.value?.split(',');
const benefits = getTranslatedBenefits(metadataBenefits, validLocale);
return (
<>
@@ -148,7 +146,7 @@ export default function ProductDetail({ product, relatedProducts, locale = "sr"
<div className="border-b border-[#e5e5e5] pt-[72px] lg:pt-[72px]">
<div className="container py-5">
<nav className="flex items-center gap-2 text-sm">
<Link href={`/${locale.toLowerCase()}`} className="text-[#666666] hover:text-black transition-colors">
<Link href={`/${validLocale}`} className="text-[#666666] hover:text-black transition-colors">
{t("home")}
</Link>
<span className="text-[#999999]">/</span>