Need help when adding Same MD file in Products Fr showing Duplicate content entry slug.

[leafarafael]

After changing slug value of the product in the Fr file the En MD will not appear when language is change, only the Product FR md.

[mearashadowfax]

Hi @leafarafael! Yes, if you have separate folders for each language (e.g., en/products and fr/products, make sure you have a [...slug].astro file in both en/products and fr/products directories. The [...slug].astro file is responsible for rendering the product pages for each language. Also, check the frontmatter of the index.astro and [...slug].astro files in both language folders (e.g., en/products/index.astro and fr/products/index.astro). They should be configured similarly to how it's done for the blog or insights content to ensure proper routing and language switching between the product pages.

[mearashadowfax]

Hi @mearashadowfax ! So I need to move folder of products to pages\en\products[...slug].astro instead of pages\products...? Thanks I will try this.

Not exactly, you have to create pages/products/[...slug].astro, pages/fr/products/index.astro and pages/fr/products/[...slug].astro and make adjustments in the frontmatter.

[leafarafael]

@mearashadowfax, product page is working when changing language, but for example I got product.md (slug: product-01) in EN and product.md (slug-01-fr) in FR. Clicking the EN will go to http://localhost:3000/products/product-01 but when you change to FR it will direct you to http://localhost:3000/fr/products/product-01 404 error page not to http://localhost:3000/fr/products/product-01-fr.

Then if you change to FR from product page then click a product it will direct to http://localhost:3000/products/gpx-5000-fr

Please enlighten me

[mearashadowfax]

@mearashadowfax, product page is working when changing language, but for example I got product.md (slug: product-01) in EN and product.md (slug-01-fr) in FR. Clicking the EN will go to http://localhost:3000/products/product-01 but when you change to FR it will direct you to http://localhost:3000/fr/products/product-01 404 error page not to http://localhost:3000/fr/products/product-01-fr.

Then if you change to FR from product page then click a product it will direct to http://localhost:3000/products/gpx-5000-fr

Please enlighten me

It looks like the issue stems from how the language switching logic is currently implemented. You have to modify language switcher logic in src/components/ui/LanguagePicker.astro by adding:

 // A mapping of slugs for different languages
  const localizedSlugs = {
    "product-01": { en: "product-01", fr: "product-01-fr" },
    "gpx-5000": { en: "gpx-5000", fr: "gpx-5000-fr" },
    // And so on...
  };

// And  then check if the current page has a localized slug mapping
   if (localizedSlugs[currentSlug]) {
     // Use the localized slug for the new language
     const localizedSlug = localizedSlugs[currentSlug][lang];
     pathParts[pathParts.length - 1] = localizedSlug;
   }

Also a minimal reproducible repository would be a good idea if above won't work, so we can see the structure of the project and the exact data being used.

[leafarafael]

Seems updating languagepicker won't fix it, or maybe I'm wrong. Please check the project structure instead here https://github.com/leafarafael/screwfast

[mearashadowfax]

Great! You can try the following:

In src\pages\fr\products\index.astro change line 115 to:

 return <CardSmall productsEntry={product} productsLocale="fr"/>;

In src\components\ui\cards\CardSmall.astro component paste this instead:

---
// Import necessary modules and utilities
import { Image } from "astro:assets";
import Icon from "@components/ui/icons/Icon.astro";
import type { CollectionEntry } from "astro:content";

const { productsEntry, productsLocale = "" } = Astro.props;

interface Props {
  productsEntry: CollectionEntry<"products">;
  productsLocale?: string;
}

// Define classes to be used with the Image component
const imageClass =
  "absolute inset-0 h-full w-full object-cover object-center transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110";
---

<!-- A clickable card that leads to the details of the product-->
<a
  href={productsLocale !== "" ? `/${productsLocale}/products/${productsEntry.slug}/` : `/products/${productsEntry.slug}/`}
  data-astro-prefetch
  class="group relative flex h-48 items-end overflow-hidden rounded-xl shadow-lg outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none md:h-80"
>

You should do the same for a CardWide.astro component and change corresponding line in src\pages\fr\products\index.astro as well.

[mearashadowfax]

Hey @leafarafael! I’ve updated the products Content Collection and improved the language switcher logic for the second language in the recent update. Everything should be working correctly now. Please check and let me know if you encounter any issues!