Soporte MultiLenguaje — 2. Consumir contenido multilenguaje de Content Island con TypeScript vanilla

00:00 / 00:00

Consumiendo el contenido (vanilla)

En lugar de usar un framework como Astro, Nuxt o Next, vamos a trabajar con TypeScript vanilla. Esto nos permite mantener el ejemplo simple, sin requerir conocimientos previos de ningún ecosistema en particular.

1. Crear el proyecto

Primero, crea una carpeta vacía, por ejemplo: myproducts

Inicializamos un proyecto con Vite:

npm create vite@latest .

Limpia el código base eliminando lo que no vas a usar (como el logo y CSS por defecto) y deja un archivo HTML sencillo.

Instalamos las dependencias del proyecto:

npm install

Ahora instalamos el cliente de Content Island:

npm install @content-island/api-client

2. Definir el modelo de datos

Vamos a consumir los productos que creamos anteriormente en Content Island. Para ello, define la interfaz del modelo:

./src/model.ts

import type { Media } from "@content-island/api-client";

export interface Product {
  id: string;
  language: "en" | "es";
  name: string;
  description: string;
  price?: number;
  image: Media;
}

Refactorizamos el tipo de idioma para reutilizarlo más fácilmente:

import type { Media } from "@content-island/api-client";

+ export type Language = "en" | "es";

export interface Product {
  id: string;
-  language: "en" | "es";
+  language: Language;
  name: string;
  description: string;
  price?: number;
  image: Media;
}

3. Inicializar el cliente

Creamos un archivo para configurar el cliente de Content Island.

./api.ts

import { createClient } from "@content-island/api-client";

const client = createClient({
  accessToken: "your_api_token_here", // Reemplaza con tu token real
});

Importante: en un proyecto real, el api token debería almacenarse de forma segura, por ejemplo, en variables de entorno.

Importamos el modelo:

import { createClient } from "@content-island/api-client";
+ import type { Product, Language } from "./model";

4. Obtener el contenido

Creamos una función para obtener los productos. Si no tuviéramos multilenguaje, sería algo así:

./api.ts

export const getProducts = async (): Promise<Product[]> => {
  const response = await client.getContentList<Product>({
    contentType: "Product",
  });
  return response;
};

Pero como sí usamos varios idiomas, modificamos la función para que reciba el código de idioma:

- export const getProducts = async (): Promise<Product[]> => {
+ export const getProducts = async (language: Language): Promise<Product[]> => {
  const response = await client.getContentList<Product>({
    contentType: "Product",
+   language,
  });
  return response;
};

5. Mostrar los productos

Como estamos trabajando con vanilla TypeScript, mostrar los productos en el navegador es un poco más manual que si usáramos un framework como Astro, Nuxt o Next. Pero no te preocupes: es fácil de seguir y lo construiremos paso a paso.

./main.ts

import "./style.css";
import type { Language } from "./model";
import { getProducts } from "./api";

const displayProducts = async (language: Language) => {
  const products = await getProducts(language);

  const appContainer = document.getElementById("app");
  if (!appContainer) {
    console.error("App container (#app) not found in the DOM.");
    return;
  }

  let productsContainer = document.getElementById("products");
  if (!productsContainer) {
    productsContainer = document.createElement("div");
    productsContainer.id = "products";
    appContainer.appendChild(productsContainer);
  }

  productsContainer.innerHTML = "";

  products.forEach((product) => {
    const productElement = document.createElement("div");
    productElement.innerHTML = `
      <img src="${product.image.url}" alt="${product.name}" style="max-width:300px" />
      <h2>${product.name}</h2>
      <p>${product.description}</p>
      <small>Price: ${product.price}</small>
    `;
    productsContainer.appendChild(productElement);
  });
};

Lo invocamos al final de main.ts:

./main.ts añadir al final del archivo

displayProducts("en"); // Cambia a "es" para ver los productos en español

Ejecutamos el proyecto:

npm run dev

Y ya podemos ver el listaado de productos en el navegador, en este caso en inglés, podríamos cambiar a español modificando el código anterior, pero lo idea es que el usuario pueda elegir el idioma desde la interfaz de usuario.

6. Añadir un selector de idioma

Vamos a hacer que el usuario pueda elegir el idioma desde la interfaz.

Para ello, creamos un selector de idiomas que se muestre al inicio y permita cambiar el idioma de los productos mostrados.

./main.ts

const setupLanguageSelector = () => {
  const appContainer = document.getElementById("app");
  if (!appContainer) {
    console.error("App container (#app) not found.");
    return;
  }

  const languageSelector = document.createElement("select");
  languageSelector.id = "language-selector";
  languageSelector.innerHTML = `
    <option value="en">English</option>
    <option value="es">Español</option>
  `;

  languageSelector.addEventListener("change", (event) => {
    const selectedLanguage = (event.target as HTMLSelectElement)
      .value as Language;
    displayProducts(selectedLanguage);
  });

  appContainer.prepend(languageSelector);
};

Y lo llamamos junto con displayProducts:

setupLanguageSelector();
displayProducts("en");

Resultado

Si todo está bien configurado, al ejecutar el proyecto verás una lista de productos. Al cambiar el idioma desde el selector, el contenido se actualizará automáticamente.

En esta guía hemos visto una forma sencilla y directa de consumir contenido multilenguaje desde Content Island usando TypeScript sin frameworks.