2

En esta entrada, Michael Wassmer, invitado especial, explica cómo construir un catálogo multilingüe de productos utilizando WordPress.

La idea de esta presentación surgió de un debate en nuestro foro sobre compartir campos personalizados e imágenes entre traducciones.

El objetivo: un catálogo multilingüe de productos con WordPress

Para establecer mi pequeño comercio bilingüe no quería utilizar una herramienta de e-comercio compleja como CMS. WordPress era la herramienta justa para lo que necesitaba. Además, estaba proyectando probar el plugin WPML en un proyecto un tanto más complejo que el típico blog o sitio web.

Por lo tanto, en mi catálogo en-línea en inglés y francés, cada producto está detallado en una entrada particular. Para agregar un producto, simplemente se adiciona un entrada en la pantalla de WordPress, con el nombre del producto como título, su descripción en el área de contenido, las imágenes se suben a la galería del producto y se utilizan campos personalizados para datos tales como precio, referencia y tamaño.

He aquí como luce una entrada de un producto en inglés (el idioma por defecto):

post_example

Ahora bien: luego de crear la entrada original del producto ¿cómo obtengo su versión traducida (al francés)? Siguiendo las instrucciones de WPML, simplemente se hace un "clic" en la casilla de idioma debajo de la ventana de contenido, otro "clic" en "mostrar" cerca de "Traducciones" y un último "clic" en "agregar". Esto abre una nueva página de entrada donde se puede ingresar toda la información traducida del producto: título, descripción y demás en francés.

Problema: las traducciones duplican la información del producto

Un momento: he aquí un problema. También se deben ingresar nuevamente los valores de los campos personalizados tales como referencia, precio y tamaño. En mi caso, los valores son los mismos en cada idioma por lo que no tiene sentido ingresarlos nuevamente. Este es un inconveniente obvio que hace perder mucho tiempo si tuviera que ingresar toda la información para cada entrada de cada idioma.

Lo mismo sucede con las imágenes de los productos: no deseo subir todas las fotografías una segunda vez por cada producto de la versión traducida. Lógicamente, las imágenes son las mismas para cada idioma, por lo que debería subirlas una sola vez.

Por lo tanto, guardemos la entrada traducida como está, sin ingresar las traducciones de los campos personalizados y sin subir las imágenes de los productos nuevamente.

Ahora echemos una mirada al código. He aquí un ejemplo sencillo de una página de listado de productos de una categoría (usualmente, el archivo archive.php del Tema de WP) :

<?php while (have_posts()) : the_post(); ?>
  <ul class = "product">
    <li class = "title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <li class = "ref"><?php echo get_post_meta($post->ID, 'Reference', true); ?></li>
    <li class = "price"><?php echo get_post_meta($post->ID, 'Price', true); ?></li>
  </ul>
<?php endwhile; ?>

Este es el bucle clásico: muestra la lista de mis productos y los valores de sus campos personalizados correspondientes: precio y referencia.

Ahora, si hago "clic" en otro idioma del selector de idiomas de la página de mi sitio web (francés, en mi caso), muestra la traducción del título de los artículos pero no los valores correspondientes a referencia y precio. Esto es normal; recuerde que no hemos ingresado la información en la entrada traducida.

Entonces: ¿cómo indico a WordPress que muestre los valores ingresados en la entrada original en inglés?

Solución: compartir los campos personalizados entre las traducciones

WPML es un plugin poderoso que nos aporta una función muy útil para recuperar los valores de la entrada original, aún en las páginas traducidas.

Utilizaremos la función icl_object_id() y sustituiremos el código anterior por el siguiente:

<?php while (have_posts()) : the_post(); ?>
<?php
  // Get the original post ID (in my case the english one)
  $o_ID = icl_object_id($post->ID, 'post', false, 'en'); ?>
  <ul class= "product">
    <li class = "title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <li class = "ref"><?php echo get_post_meta($o_ID, 'Reference', true); ?></li>
    <li class = "price"><?php echo get_post_meta($o_ID, 'Price', true); ?></li>
  </ul>
<?php endwhile; ?>

Básicamente, lo que hicimos fue recuperar el ID de la entrada original correspondiente a cualquier entrada traducida y lo utilizamos para obtener los valores personalizados. Dependiendo del idioma original de su entrada, puede cambiar el último parámetro de icl_object_id (‘de’ para alemán, ‘fr’ para francés, etc.). Puede obtener más información sobre otros parámetros de esa función aquí y un listado de otras funciones en la página de código API.

Esto funcionó para los campos personalizados pero ¿cómo logro lo mismo con las imágenes?

Tomemos nuestro primer ejemplo y también tres imágenes miniatura para cada entrada en la lista:

<?php while (have_posts()) : the_post(); ?>

<?php
  // Get the original post ID (in my case the english one)
  $o_ID = icl_object_id($post->ID, 'post', false, 'en'); ?>

  <ul class= "product">
    <li class = "title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <li class = "ref"><?php echo get_post_meta($o_ID, 'Reference', true); ?></li>
    <li class = "price"><?php echo get_post_meta($o_ID, 'Price', true); ?></li>

<?php

  // Get 3 thumbnails from the original post
  $args = array('post_type' => 'attachment','numberposts' => 3,'post_status' => null,'post_parent' => $o_ID);
  $attachments = get_posts($args);
  if ($attachments) {
    foreach ($attachments as $attachment) {
      echo '<li class="thumbnail">'.wp_get_attachment_image($attachment->ID).'</li>';
    }
  }
?>
</ul>

<?php endwhile; ?>

Resumen

Puede personalizar muy fácilmente este pequeño código para ajustarlo a sus necesidades, mostrando más o menos imágenes o tamaños diferentes.

Eso es todo. Ahora podremos mostrar la lista de productos en cualquier idioma y siempre contendrán los campos personalizados e imágenes, aún si los mismos estuvieran almacenados solamente en la entrada original.

Esto se vuelve aún más interesante para el caso de catálogos más grandes, con más idiomas. Imagine que deba cambiar el precio de un producto en cinco idiomas. Con el procedimiento acostumbrado, debería editar todas las cinco entradas. Con este método simple, siempre dispondrá de una "plantilla de idioma" reutilizable que contenga la información completa sobre sus productos y traducciones.

Michael Wassmer es un diseñador freelance de páginas web con base en Barcelona, España. Puede contactarlo a través del correo electrónico mike@michaelwassmer.net

2 respuestas para “Crear un catálogo multilingüe de productos”

  1. Hola, una pregunta,
    Para agregar los custom fields es necesario algún plugin aparte o es parte de la funcionalidad de WPML o del propio wordpress?

    Gracias.

    • El propio WordPress te permite agregar custom fields (si no lo ves, usa «Screen Options» para mostrarlo). Tambien puedes usar el plugin Types que se integra perfectamente con WPML y te proporciona un interfaz mas comodo de usar: http://www.wp-types.com/