El Blog DWQ

¿Qué es un tema en Magento?

David Gómez Becerril — Thu, 04 Mar 2010 02:42:53 +0000

Un tema en Magento consta de tres cosas:

Archivos de capas (layout) en XML: Se especifica cómo se presenta el diseño.
Plantillas (templates) PHTML: Es una combinación de archivos de PHP y HTML, que especifican cómo elementos específicos (por ejemplo, el carrito de compras) se deben ver en las capas.
Superficies (Skins): Proporcionan las Hojas de Estilo en Cascada (CSS), y las imágenes necesarias para crear el aspecto deseado para la superficie en Magento.

Interfaces y Temas
Temas Predeterminados (Defaults) y no predeterminados
- Tema Predeterminado
- Temas no Predeterminados
Jerarquía en los Temas
Superficies (Skins), Capas (Layouts) y Plantillas (Templates)

Interfaces y Temas

El significado de los términos tema e interfaz en Magento son contrastantes.

Interfaces en Magento

Una interfaz en Magento consta de uno o más temas que componen lo que se ve en su tienda, así como lo del aspecto que tiene para sus clientes. Magento soporta más de un tema a la vez, de modo que una interfaz no es necesariamente sólo un tema.

Temas en Magento

Un tema en Magento es lo que define la apariencia de una tienda. Las interfaces pueden tener múltiples temas que se les asigna en Magento, permitiendo que imágenes de temporada para ser utilizado en determinadas épocas, como Navidad o Día de la Amistad.
Un tema es lo que contiene las capas, plantillas y superficies (skins).

Locales en Magento

Para tiendas multilingües en Magento, también los temas pueden contener locales, que es una traducción de la copia (o contenido) de esa tienda en particular.

Temas Predeterminados (Defaults) y no predeterminados

Sólo para añadir más a la confusión, también hay dos tipos de temas: los temas predeterminados y temas no predeterminados.

Tema Predeterminado

Un tema predeterminado en Magento es el tema principal de una interfaz. Magento busca este tema predeterminado, y se cargará a la interfaz de tu tienda (que es la parte que los clientes verán).

Nota.- El tema predeterminado debe contener todos los elementos que el visitante encontrará al visitar nuestra tienda, como el carrito de compras, pago, y así sucesivamente. Si tu tema no hace uso de estos elementos, entonces no es necesario incluir estos elementos en el tema predeterminado.

Temas No Predeterminados

Un tema no predeterminado permite crear vistas estacionales de las tiendas en línea con la aplicación de tantos o tan pocos elementos de diseño adicionales, tales como CSS o imágenes, como lo necesites. Los Temas no predeterminados también se pueden utilizar para personalizar tu tienda para:

Crear una visión diferente o diseño de páginas de productos determinados, que requieren menos (o más) información que los productos normales.
Proporcionar una forma de mostrar nuevos productos o incluso los productos que “pronto saldrán”, sin permitir a los clientes añadirlos a su tarjeta.
Personalizar determinados aspectos de tu tienda con las especificaciones requeridas de cada país como un botón en una posición diferente en el sitio web que los clientes esperan en un país.

Jerarquía en los Temas

Como puedes tener múltiples temas en Magento, existe una jerarquía de temas implementado para que puedas predecir qué temas se mostrarán en un esquema de herencias. El tema predeterminado proporciona una base para cada aspecto de tu tienda Magento, desde cómo se ve hasta en dónde las cosas son mostradas. Temas posteriores pueden entonces sobreescribir lo que el tema predeterminado le dice a Magento, y cualquier elemento que no se ha sobrescrito se heredará del tema predeterminado.

El tema predeterminado es siempre el tema de nivel más bajo en la jerarquía de Magento. Esto significa simplemente que los temas no predeterminados, van a sobreescribir lo que el tema predeterminado proporciona a Magento.

Superficies (Skins), Capas (Layouts) y Plantillas (Templates)

Superficies, capas y plantillas son lo que Magento necesita en un tema. Cada uno de ellos ayuda a cambiar un tema de Magento de alguna manera. Modificar la superficie cambia la apariencia de tu tienda, al Modificar las plantillas y las capas va a cambiar cómo se visualiza la tienda, y lo que se muestra en ella.

Superficies

Las Superficies de un tema de Magento es lo que hace al tema verse de la manera en la que se ve.

Las Superficies especifican los colores, tipos de letra, y algunas reglas de las capas, cortesía de los archivos CSS y las imágenes. Las superficies del tema de Magento también pueden incluir archivos de JavaScript para cambiar el comportamiento de tu tienda.

Las Superficies de Magento incluyen archivos que afectan la combinación de colores de la tienda y logotipos.

El tema predeterminado de Magento se muestra en la siguiente figura:

Con algunos cambios extensivos en los elementos de la superficie del tema de Magento, podemos hacer que nuestra tienda se vea como el tema moderno de Magento (Modern Theme)

Como puedes ver, los elementos de la superficie en un tema de Magento ofrecen una gran flexibilidad para crear impactos diferentes en los efectos visuales.

Capas y Bloques

La capa de las diversas vistas en Magento, tales como, el carrito de compras, páginas de detalles del producto, y la página de los resultados de producto, están controlados por los archivos de las capas. Los archivos de las capas en Magento están escritos en lenguaje de marcado extensible (XML).

Las capas también se utilizan para agregar, quitar y manipular elementos en vistas de tu tienda de Magento. Mediante la manipulación de archivos de capas, puedes:

Incluir archivos JavaScript en ciertas páginas
Incluir archivos CSS adicionales
Eliminar bloques de contenido, tales como el carrito de compra o las imágenes predeterminadas de algunas páginas en particular

Como ejemplo, observa el tema predeterminado de Magento de la figura 1 o ir a http://demo.magentocommerce.com

Este tema se basa en una capa de tres columnas, donde una columna central se utiliza para el contenido principal de la página, y las dos columnas adicionales que se utilizan para comentarios adicionales. La página de los productos utiliza la capa de dos columnas, y este cambio se logra cambiando los archivos de las capas del tema.

Hay dos tipos de bloques en Magento:

Bloques de contenido que producen el código dentro de cada bloque estructural, y de esto se sirven los archivos de las plantillas de Magento para generar la información pertinente que se requiere para cada bloque.
Los Bloques estructurales especifican la estructura de la página, como el encabezado, las áreas de contenido, y el pie de página.

Una Capa hace uso de ambos tipos de bloques, al igual que las plantillas de Magento.

Plantillas

Como se mencionó antes, las plantillas de Magento especifican que es lo que se debe mostrar en cada bloque de contenido en la forma de bloques de contenido. Los archivos de plantillas estan en PHTML.

El PHP en los archivos de plantilla es sólo para la lógica de presentación, es decir, el PHP se utiliza sólo para hacer cambios en la vista de tu tienda en los archivos de plantilla. Sin embargo, no afecta el funcionamiento de la tienda en sí, por ejemplo, calcular el costo de los artículos en un carrito de la compra.

En el tema predeterminado de Magento, un bloque estructural consta de un elemento de tu
la tienda, como el carrito de compras, una encuesta, o el contenido principal de la página, que se destaca en la siguiente pantalla:

Las Plantillas en Magento se dividen en dos tipos diferentes. En primer lugar, está el esqueleto de las plantillas que proporciona una estructura general de una página, como una columna, dos columnas o tres columnas. En segundo lugar, las plantillas proporcionan el HTML para los bloques de contenido para cada una de las características que han resaltado anteriormente.

Al manipular las plantillas de esta manera, Magento separa a las plantillas de “contenido de la disposición de la tienda, lo que facilita los cambios en la plantilla o bien el trazado, sin que necesites preocuparte si uno afecta al otro.

Referencias

Introducción a Magento

David Gómez Becerril — Fri, 26 Feb 2010 00:23:23 +0000

Antes de internarme en la programación de módulos para Magento se me ocurrió publicar este artículo a manera de introducción para una mejor comprensión de cómo esta esquematizado Magento desde el punto de vista temático.

¿Qué es Magento?
Algunas Características de Magento
Los Desafíos de la Tematización de Magento

¿Qué es Magento?

Magento (http://www.magentocommerce.com) es una plataforma de comercio electrónico de código abierto, que es conocido por su funcionalidad, pero tiene una reputación de ser difícil de tematizar.

Algunas Características de Magento

Magento es un sistema de comercio electrónico rico en características, que se construye sobre el marco de trabajo de Zend. Magento tiene todas las características que se esperaría de un carrito de compras típicas o tienda en línea y algunos añadidos interesantes, incluyendo:

Gestión de tiendas múltiples en un sólo panel de control
Apoyo para la localización de los idiomas y divisas
Una interfaz de programación de aplicaciones (API), que permite la integración con software de terceros
Atributos de motores de búsqueda amigable, como direcciones personalizables y mapas de sitio generados automáticamente
RSS para nuevos productos
Fijación de precios diferenciados, lo que permite los descuentos por cantidad
Tarifas de los envíos de las paqueterías más populares en tiempo real
Integración con muchas pasarelas de pago incluyendo PayPal y authorize.net
Ventas cruzadas
Pago en una sola página
Orden y sistema de información de productos
Redimensionamiento de imágenes y marcas de agua

Los Desafíos de la Tematización de Magento

A pesar de su poder, Magento tiene una serie de deficiencias, estas son:

Los diseñadores pueden tener más dificultades en la tematización que en otras aplicaciones de código abierto, como WordPress.
En cierto modo, su arquitectura modular se puede ver como un defecto, ya que esto significa que las modificaciones que se hacen a un tema requerirá de varios archivos en directorios distintos para ser editados (más que en otros paquetes de software).
La mala calidad o la inexistencia de la documentación (Tratamos de remediar este defecto en este blog y otros foros de la comunidad).
El número de tecnologías que un diseñador del tema tiene que estar familiarizado con la tematización de Magento-XML, PHP, HTML y CSS.
La extensa curva de aprendizaje para los diseñadores que tal vez estén familiarizados con los sistemas más simples de tematización basada en un pequeño número de plantillas.

La belleza de un sistema de código abierto de comercio electrónico como lo es Magento es que puedes ayudar a crear estas nuevas funciones y mejorar sus defectos en la próxima versión!

Es increíblemente gratificante crear un tema personalizado para una tienda con Magento.

Como un sistema de comercio electrónico relativamente nuevo y potente con una creciente comunidad para apoyarlo, Magento se está convirtiendo rápidamente en la próxima gran cosa en el comercio electrónico, así que aprender a cómo crear temas en él es como mantenerse importante para el tiempo por venir.

Referencias

Magento: Producto Agrupado contra Configurable

David Gómez Becerril — Fri, 27 Nov 2009 00:24:57 +0000

En el estado actual del desarrollo de Magento para definir productos desde el panel de administrador y mostrarlo en el Front-end de la tienda, la utilización de productos agrupados no parece tener mucha utilidad en el sentido que le da el ejemplo de la guía de usuario de Magento o incluso en el ejemplo de este mismo blog que de cierta manera son similares. Magento nos dice que se puede crear un traje de tres piezas, pantalón, saco y camisa con botones, que hasta cierto punto es posible crear un producto agrupado de esta manera, pero en la práctica, cada uno de esos productos pertenece a un producto configurable, tanto la camisa, el saco como el pantalón por lo menos tienen uno o dos atributos como talla y color, que para cuestiones de inventario se requiere que cada producto simple con cada uno de los atributos tenga un SKU hijo al SKU padre del producto configurable. Magento no nos permite agrupar productos configurables aún y hasta la versión 1.4 alfa3 esta característica no se ha incluido aunque sigue en camino según lo ha mencionado Yoav Kutner por lo que podemos esperar que en futuras versiones aparezca.

Pero en tanto esto no suceda los productos agrupados y los configurables sólo se diferencian por la manera en la que se presentan en el front-end y con algunas diferencias en la manera de crearlos.

Digamos que se tienen algunos rollos grandes de papel en venta. Hay 3 tipos diferentes del mismo papel. El de 32 pulgadas a $530.00, el de 40pulgadas a $620.00 y el de 48pulgas a $710.00. En el caso de Productos Configurables se tiene que fijar un precio, entonces, si ninguna de las opciones tiene un precio más alto, tienes que entender las matemáticas y añadir la diferencia. Así, en esta situación, debo crear mi producto configurable a 530.00, y tendría que fijar el de 40 con 90.00 y el de 48 con 180. Así, el desplegable diría algo así como:

No sabría el verdadero precio hasta que he seleccionado 40. Y, si el precio cambia siempre para cualquiera de estos tamaños diferentes, tengo que hacer las matemáticas cada vez y sólo puedo actualizar los precios a través del producto configurable. Los precios de los productos simples por separado no tienen ningún efecto en el producto configurable.

En esta situación, sin embargo, podemos hacer uso del producto agrupado para tener básicamente el mismo producto en un sentido, con sus diferentes tamaños. Así pues, podemos hacer que nuestros productos simples de 32, 40 y 48 pulgadas de rollos de papel o de algún otro artículo en condiciones similares, se configuren para que todos ellos tengan visibilidad en “ninguna parte”, y asociarlos con nuestro producto agrupado. Luego entonces, se tiene un único producto con 3 tamaños diferentes de papel en una sola página mostrando los costos con los distintos tamaños.

Por lo tanto, habrá ocasiones que los productos configurables no sean la mejor opción y se opte por probar con los productos agrupados.

Referencias

POO en PHP5 Parte 1: Clases y Objetos

David Gómez Becerril — Sun, 15 Nov 2009 19:47:49 +0000

Debido a mi interés en Magento, aplicación que se programo en php 5 orientada a objetos para desarrollar eCommerce, he decidido empezar una serie de artículos referentes a conceptos fundamentales de la Programación Orientada a Objetos en PHP 5, sí, uno más, pero los que he consultado en español en la web no han sido de mi entera satisfacción.

Para empezar aclaro que he elegido como marco de trabajo (framework) el de Zend para estandarizar los códigos de PHP en los ejemplos, primero porque es el que utiliza Magento y segundo porque uno de los libros que uso de referencia también lo utiliza.

Introducción
Relación entre Clases y Objetos
Referencias

Introducción

Sí bien la programación orientada a objetos (POO) fue originalmente reservada a los licenciados en ciencias de la computación, ahora está encontrando su camino cada vez más en el desarrollo web. ActionScript 3, el lenguaje detrás de Adobe Flash y Flex, es un lenguaje de programación completamente orientado a objetos y los muchos marcos de JavaScript, como jQuery, que recientemente se ha vuelto tan popular, aunque no al 100 por ciento-POO hace un amplio uso de los objetos.

No voy a reseñar una historia de POO o de la evolución de PHP para soportar POO porque mi intensión es adentrarme en los conceptos, pero en la wikipedia se puede encontrar por si hay algún lector interesado.

Relación entre Clases y Objetos

Objetos y clases se encuentran en el corazón de PHP 5 por lo que es importante su entendimiento. El bloque de construcción fundamental de todo código orientado a objetos se llama clase. Esto es simplemente una colección de variables y funciones relacionadas, todo envuelto en un par de llaves y de etiquetados con el nombre de la clase. En POO, una variable asociada a una clase se refiere a una propiedad, y una función se denomina método. La creación de una clase es muy similar a como se hace para la creación de una función en el lenguaje estructurado tradicional. Veremos la sintaxis real en él más adelante, pero la principal diferencia es que una clase agrupa todo junto.

Nota.- No todas las variables en una clase son propiedades. Una propiedad es un tipo especial de variable que puede ser utilizado en cualquier lugar dentro de una clase y, a veces fuera también. La distinción entre las variables comunes y las propiedades se aclara más adelante.

Así pues, si deseas validar la entrada del usuario, puedes crear una clase llamada Validador (por convenio, los nombres de las clases siempre comienzan con una letra mayúscula inicial) para agrupar a una serie de métodos (es decir, las funciones) y realizar pruebas como las siguientes:

¿Es este un número?
¿Está dentro de un rango especificado?
¿Es ésta una dirección válida de correo electrónico?
¿Tiene este texto contenido potencialmente peligroso?

Dado que otros desarrolladores pueden crear clases para propósitos similares, se recomienda que se añada un prefijo a los nombres de las clases y sea de tres o cuatro letras seguido de un guión bajo.

Acceder a la clase con el operador new para crear un Objeto

Cuando se desea utilizar cualquiera de las propiedades o métodos de la clase, es necesario crear una instancia de la clase usando la palabra clave newde esta manera:

$val = new Dwq_Validar();

Esto crea un objeto llamado $val. Como se puede notar, se ve como una variable de PHP ordinaria, entonces, ¿qué es un objeto? En este caso particular, es principalmente un dispositivo que le proporciona el acceso a todos los métodos definidos en la clase Dwq_Validar. Sin $val, no tiene manera de utilizarlos. Además de los métodos, una clase puede tener propiedades. En el caso de Dwq _Validar, una de ellas es almacenar un array de campos requeridos que el usuario ha fallado en rellenar; otra propiedad guarda una serie de mensajes de error. Debido a la forma en que la clase se ha diseñado, este array es rellenado automáticamente, conteniendo la información hasta que estés listo para utilizarla. En términos de programación, se podría pensar de un objeto como un array multidimensional sobrecargado que controla tanto las funciones, como también las variables. Sin embargo, desde un punto de vista conceptual, el objeto $val es la herramienta que valida la entrada al usuario. Utiliza los métodos para ejecutar pruebas específicas de validación, y guarda todos los resultados. En otras aplicaciones, los objetos pueden contemplarse de una manera similar a los objetos de la vida real. Una aplicación de comercio electrónico podría utilizar la clase Productos para representar artículos en existencias, o un foro en línea podría tener una clase Miembros, para representar a colaboradores individuales.

La Clase y Objetos en Acción

Echemos un breve vistazo al ejemplo de la clase Dwq_Validar en acción. Como se ha dicho antes, es necesario crear una instancia de la clase para poder usarla. Esto se conoce como una instancia de un objeto. Como habrás notado, cuando se instanció más arriba el objeto $val, he colocado un par de paréntesis vacíos después del nombre de la clase. De la misma manera como pasas argumentos a las funciones, también puedes pasar argumentos a un objeto en el momento de instanciar. La clase Dwq_Validar acepta dos argumentos, ambos opcionales. El argumento opcional primero es un array de entradas de formulario requerido. Así pues, el script para instanciar el objeto Dwq_Validar para validar, una forma simple puede ser como esta:

// Crear un array de campos de formulario requerido

$requeridos = array( 'edad', 'nombre', 'comentarios');

// Crear una instancia de un objeto validador, y pasarle el array $requeridos

$val = new Dwq_Validar($requeridos);

Acceder a las Propiedades y Métodos con el Operador ->

La manera de acceder a las propiedades y métodos de un objeto es con el operador -> (un guión seguido por un signo mayor que, sin espacio entre ellos). Incluso si no sabes nada sobre POO, no te debe tomar mucho tiempo deducir lo que el siguiente código hace (trata de adivinar, y luego lee el siguiente párrafo para ver si estaba en lo cierto):

// utiliza clase de métodos para validar campos individuales

$val->isInt('edad');

$val->removeTags('nombre', 0, 0, 1);

$val->checkTextLength('comentarios', 5, 500);

$val->removeTags('comentarios', 0, 0, 1);

$val->isEmail('email');

// validar la entrada y obtener cualquier mensaje de error

$filtered = $val->validateInput();

$missing = $val->getMissing();

$errors = $val->getErrors();

El objeto $val comienza comprobando si la edad es un número entero. A continuación, quita las etiquetas HTML en el campo del nombre, comprueba que el campo de comentarios contenga entre 5 y 500 caracteres, y quita todas las etiquetas de ella antes de comprobar que el campo de correo electrónico contenga un formato de dirección de correo electrónico correcto. Las tres últimas líneas validan la entrada, y obtienen los nombres de los campos faltantes y detalles de los errores. Puede parecer misterioso en el momento, pero es mucho más fácil de leer que decenas de líneas de instrucciones condicionales.

Otra ventaja es que los objetos son independientes unos de otros, incluso si son instancias de la misma clase. Puedes crear dos instancias independientes de la clase Dwq_Validar para validar la entrada del usuario tanto de los arrays $_POST y $_GET. Dado que los objetos están separados, se puede identificar de donde ha venido un mensaje de error y tomar las medidas adecuadas.

En resumen se puede decir que la relación más común entre Clase y Objeto encontrada en la mayoría de las fuentes es la de que una clase se puede ver como una plantilla de código utilizada para generar objetos y el objeto es un dato que ha sido estructurado de acuerdo a la plantilla definida en una clase.

Cada objeto se comporta como una caja negra, manteniendo los datos transmitidos a cada uno completamente separados del otro. La analogía de caja negra también se aplica a uno de los conceptos principales detrás de la POO: encapsulación. Concepto que será el tema del próximo artículo relacionado a POO en PHP5.

Referencias

Photoshop: Convertir Fotos de Tamaño Pequeño a Tamaño Poster

David Gómez Becerril — Mon, 26 Oct 2009 17:09:03 +0000

En general, disminuir de tamaño una foto no tiene ningún problema, es decir, llevar una foto 8×10 a 4×5 no causa la menor pérdida de calidad. Aumentar el tamaño de la foto es donde te encuentras los problemas (la foto usualmente se distorsiona, se ve difuminada o hasta pixeleada). Sin embargo, con la técnica del guru en fotografía digital Jim Di Vitale puedes convertir tus fotos de cámara digital al tamaño de Posters. He aquí como:

Paso 1: Abre la foto de tu cámara digital que quieres convertir al tamaño de un Poster. La foto aquí mostrada fue tomada con una cámara Sony a 3 megapixeles. Tiene 7.2 pulg. de ancho por 4.2 pulg. de alto a 300ppi.
Paso 2: Oprime las teclas “Control+Alt+I” o ve al menú de imagen y selecciona tamaño de imagen (Image Size). Cuando el cuadro de dialogo aparece, asegúrate de que el cuadro Resample Image este activo. Selecciona el campo de unidades del recuadro Document Size como se muestra en la imagen de tu derecha y selecciona porcentaje (percent) y escribe 110 en el campo de ancho (Width), lo cual incrementara toda la imagen en un 10% y lo creas o no, la imagen no pierde su calidad.
Paso 3: Para obtener la foto al tamaño del Poster te llevara repetir el paso anterior varias veces lo cual toma algo de tiempo. Por ello te recomiendo que crees tu propia acción automática para que lo hagas oprimiendo una sola tecla. Hazlo como sigue:
Ve a la paleta de acciones (Action) oprime el icono para crear acción nueva que se encuentra en la parte inferior de esa paleta. Aparece el cuadro de dialogo como se muestra a tu derecha, yo la nombre como Incremento 10% y elegí la funcion F11, oprime el botón Record y repite el paso 2 de esta sección, cuando termines oprime el botón de stop como se muestra en la figura de tu derecha. Ahora cada que oprimas la función F11 del teclado la foto que tengas activa se incrementara en un 10%.
Paso 4: He aquí la foto final aumentada a un tamaño de 7.2 pulg. X 4.2 pulg. al tamaño de un Poster de 36 pulg. X 24 pulg. sin perder el mínimo de calidad. Tuve que oprimir 17 veces la función F11 para obtener este tamaño. Gracias a la creación de la acción, toma muy poco tiempo hacerlo.

Fg.1 Abre la foto a convertir

Fg.2 Oprimir teclas Ctrl+Alt+I

Fg.3 Crear Acción Nueva

Fg.4 Acción Nueva Creada

Fg.5 Foto final a tamaño poster

Emails Transaccionales Personalizados en Magento

David Gómez Becerril — Sat, 19 Sep 2009 07:36:06 +0000

Los emails transaccioneales en Magento son los mensajes que se envían por email a los clientes cuando se suscriben al boletín de noticias, el envío de facturas, confirmación de compra recibida, etc, es decir, son los mensajes de las transacciones de negocios que ha realizado el cliente desde tu tienda virtual a su cuenta de correo electrónico. Magento tiene sus plantillas predeterminadas para esta acción con su propio logotipo y su propio mensaje, es importante que en la configuración de tu tienda virtual con Magento las personalices con el logo de tu empresa y el mensaje personalizado que se ajuste al perfil de tu empresa.

En este artículo te mostraré una manera de hacerlo. Voy asumir que has cargado alguna de las versiones en español en tu local, para mí caso es el español de es_MX.

Crear emails transaccionales a través del Panel de Administrador

En el panel de administración de Magento ir a:

Sistema-> Correos electrónicos transaccionales, se te presentará una lista de correos electrónicos predeterminada, en mí caso sólo se mostró uno, el de Send product to a friend. Necesitarás crear un email personalizado así que la única forma de evitar escribir nuestras plantillas personalizadas a partir de cero es utilizando el código existente de la plantilla.
Sugerencia: Si deseas ver la plantilla antes de copiar, primero haz clic en el botón de vista previa de la derecha.

Para crear la nueva plantilla, haz clic en “Agregar plantilla nueva ” arriba de la lista a la derecha de “Correos electrónicos transaccionales”. Esta es la parte donde Magento te ayuda con la opción de cargar una plantilla predeterminada para que puedas personalizarla.

Una vez que hayas cargado la plantilla predeterminada en el campo de “Nombre de Plantilla” escribe un nombre único añadiendo un prefijo propio, pero dejando el nombre predeterminado también. Por ejemplo: “mi tienda :: New account”.

De esa manera podrás identificar fácilmente de entre las plantillas predeterminadas y las personalizadas.

Después puedes personalizar fácilmente el texto del mensaje y el estilo en el “Asunto de la Plantilla” y “Contenido de la plantilla”.

El “contenido de plantilla” es el cuerpo del mensaje que el usuario recibirá en la transacción, así que asegúrate de cambiar el correo electrónico, nombre de la empresa, etc. Tendrás que subir el logotipo de de tu empresa en la carpeta de imágenes del skin que estés utilizando.
Una vez que hayas terminado con la edición, guarda los cambios y repite el proceso para el resto de las plantillas de correo electrónico.

Asignación de las plantillas para diferentes tiendas y Vistas de Tienda

Sólo tienes que ir a Sistema -> Configuración -> Y elegir la sección del sistema donde desees determinar la plantilla personalizada que creaste, como en “Contactos”, “Ventas “, “Boletín de noticias”, etc. Después de que hayas terminado con el establecimiento de sus plantillas nuevas y guardado la configuración, haces clic en “Guardar configuración”.

Eso es todo. Puedes comprobar realizando alguna transacción en tu tienda virtual para ver los mensajes de correos electrónicos enviados desde esa tienda.

Referencias

Custom Transactional Emails

En Magento Cómo Crear un Producto Configurable

David Gómez Becerril — Fri, 18 Sep 2009 07:31:28 +0000

He encontrado en el sitio de Magento varias maneras para crear un producto configurable, en este artículo expondré la manera en la que a mí me funcionó en tres o cinco pasos.

Introducción
Paso 1 crear o configurar el o los atributos
Paso 2 Guardar en Arreglo de Atributos
Paso 3 Crear el producto configurable
Paso 4 Exportar perfil de productos
Paso 5 Después de importar los productos
Referencias de Magento

Introducción

Lo primero es establecer los atributos que necesitas. Para mí ejemplo será ‘Tamaño’ (Chico, Mediana y Grande) y ‘Color’ (Negro, Azul y Rojo). Tengo dos atributos de cada uno con tres opciones, significa que tengo que crear 9 productos simples para cada producto configurable.
Voy asumir que tienes cargada alguna de las traducciones en español, en mi caso es ‘es_MX’.

Nota.- Para la creación de mis productos configurables, los precios no son afectados por sus propiedades como el tamaño y el color. Si en tu caso las propiedades de tus productos si afectan el precio, entonces te recomiendo cargar la extensión ‘Simple Configurable Products’ y hacerlo antes de seguir los pasos que mostraré en este artículo.

Paso 1 crear o a configurar el o los atributos

Voy a crear o a configurar primero el atributo en el Panel de administrador:

Bajo Catálogo -> Gestionar Atributos, puedo crear estos dos nuevos atributos con la configuración siguiente:

Propiedades del Atributo:

Alcance: Global
Tipo de entrada: Dropdown
Valor único: No
Valores requeridos: Sí
Validación de entrada de la tienda del Propietario: Ninguno
Aplicar a: Todos los productos (podrías elegir ‘Productos Configurable ‘)
Usar para crear productos configurable: Sí

Propiedades Frontend:

Poner todo en ‘no’ excepto ‘Visible on Product View Page on Front-end’, que se establece como ‘Sí’

Gestión de Etiqueta/Opciones:

Bajo Gestión de Títulos (Tamaño, Color, etc.)
Admin: Tamaño (o como se quieras llamar a la suya)
Tienda: Tamaño (ídem)

Gestión de Opciones (valores de su atributo):

Esto es lo que se ve como las opciones de menú desplegable, así que tengo tres:

Admin
Chico Chico 1
Mediano Mediano 2
Grande Grande 3

Paso 2 Guardar en Arreglo de Atributos

Ahora ir a Catálogo-> Atributos-> Gestión de Arreglo de Atributos

Abre el arreglo de atributos que utilizas para tu producto (que bien puede estar en ‘default’ o crear uno nuevo con el nombre de ‘Con Opciones’ por ejemplo)

Ahora debes ver tu atributo ‘Tamaño’ en la parte de ‘Atributos sin asignar’ a la derecha.
Arrastrarlo y sueltalo en el lugar de “Grupo-> General” para que aparezca en la parte del administrador. Yo tengo el mío en un grupo nuevo.

Repite esto para ‘color’ o cualquier otro atributo que necesites crear.
Guardar arreglo de atributos.

Paso 3 Crear el producto configurable

Para crear el producto configurable ir a:

Catálogo -> Gestionar Productos -> Añadir producto

Elije el arreglo de atributos creados para tu producto.
Selecciona el tipo de producto como ‘Configurable’
Haz clic en Continuar
Marca la casilla(s) del atributo(s) que deseas incluir en este nuevo producto (en mi caso ‘medida’ y ‘color’)
Haz clic en Continuar
Rellena todos los campos habituales para la creación de un nuevo producto: nombre, descripción, SKU, peso, imágenes, etc. (Si cargaste la extensión ‘Simple Configurable Products’ deja vacio el campo de precio, sino también llénalo normalmente)
Cuando el producto se ha completado – haz clic en el botón “Guardar y continuar editando”
En esta parte es donde empezamos a añadir productos simples a nuestro producto configurable:
Haz clic en ‘Productos asociados’ en la columna de la izquierda.
Debes ver una sección titulada ‘Creación Rápida de productos simples’
Elige si quieres que Magento genere automáticamente los SKU únicos y los nombres de cada uno de los productos asociados.

Puedes permitir esto por el nombre, así Magento crea nombres de los productos como: ‘Chamarra Mediana Roja ‘, añadiendo el tamaño y el color atribuido al nombre de la base del producto.
También se puede elegir hacer la SKU única manualmente y hacerla más corta. Eso será cuestión de preferencias de cada quien si se desactivar o no el “autogenerar” en el SKU.

Ya estamos en posición seguir una secuencia para generar el producto configurable de tu tienda virtual en Magento como la mostrada a continuación en esta sección de ‘Creación Rápida de productos simples’:

Editar el SKU (si se desactivó el autogenerar, sino pasar al siguiente paso)
Añadir el peso del producto – para el cálculo del envío.
Estatus: Habilitado
Visibilidad: En ninguna parte (¡Importante!)
Precio: El mismo que el del producto configurable (si se cargo la extensión ‘Simple Configurable Products’ entonces se debe poner el precio de esta variación en el producto).
Tamaño: Elige la primera de las variaciones de tu atributo (Tamaño). Por ejemplo, en mi caso es Chico
Color: Elige la primera de las variaciones de tu atributo (Color). Por ejemplo, en mi caso es Negro.
Cantidad: La cantidad en existencia para este producto
Disponibilidad de stock: ‘Disponible’
Haz clic en ‘Creación Rápida’

Repite los pasos del 1 al 10 para cada variación del producto. Por ejemplo, Negro- Mediano, Negro- Grande, etc.

En este caso, he empleado unos 2 minutos en añadir todos los productos con todas sus variantes.

Cuando hayas terminado, haz clic en “Guardar” de la parte superior de la página, y revisa tu trabajo en la gestión de productos donde se debe ver el producto configurable y las nueve variaciones de productos simples para este ejemplo. Si todo se ve bien, comprobar que en la parte del frontend funcionen las opciones para el producto configurable creado.

NOTA.- Si en tu configuración cargaste la extensión ‘Simple Configurable Products’ entonces cuando un posible cliente vaya a la página del producto que va a ver, a medida que elija el tamaño de la lista desplegable, el precio cambiará para reflejar esa opción.

Si bien la secuencia mostrada en este último paso es simple y fácil de hacer puede resultar algo tedioso cuando tenemos una cantidad muy grande de productos configurables. Una forma más rápida de hacerlo es importando los productos a través de un archivo CSV.

Paso 4 Exportar perfil de productos

Exporta el perfil en un archivo CSV bajo Sistema -> Importar/Exportar -> Perfiles para ver cómo Magento lo estructura. (Debido a que se está trabajando con la versión en español el archivo está en formato utf-8 si quieres trabajar en MS Excel hay que convertirlo en formato ANSI).

En el archivo exportado puedes escribir toda la información de todos tus productos e importarlo nuevamente.

Paso 5 Después de importar los productos

Cómo importar los productos mediante el archivo csv esta fuera del alcance de este artículo pero en otro artículo posterior tal vez lo explique. Una vez que se han importado todos los productos (configurables y simples) ir a catálogo -> Gestión de Productos y selecciona uno de los productos configurables que acabas de importar.

Referencias

Definir Productos en Magento

David Gómez — Mon, 24 Aug 2009 15:24:29 +0000

En Magento, hay tres tipos de productos que puedes crear:

Producto Simple
Producto Configurable
Producto Agrupado

Producto Simple

El Producto Simple es la base para los productos Configurables y Agrupados. Un producto Simple es sólo un producto individual que se va a vender en la tienda virtual, donde los atributos son determinados por el propietario de la tienda. Tendrá los atributos del sistema (como todos los productos requieren), y pueden tener atributos simples también. Un ejemplo de un producto simple sería una chamarra. Se presenta en tu sitio web como un tema independiente, se ha definido que es azul. Cuando los clientes llegan a la página de este producto, se puede ver el color en la sección de información del producto, su única opción es sí o no a comprar.

Producto Configurable

Un producto configurable ofrece mucha más interacción con el cliente. Sigamos con el ejemplo de la chamarra, ya que será la base para nuestro producto configurable. Además de esta chamarra azul, produces versiones ligeramente diferentes: una versión en color rojo, así como una con mangas desarmables (en azul y rojo). Se crearían otros tres productos simples nuevos (rojo, azul/mangas desarmables, y rojo/mangas desarmables), así, si sólo utilizas la función de producto simple, tendrías cuatro páginas de productos, una para cada combinación de color. Sin embargo, usando Producto Configurable, puedes combinar las cuatro páginas en una sola, de modo que es más probable que el cliente encuentre la chamarra que desea, mientras que al mismo tiempo la navegación en tu tienda se hace mucho más sencilla. Una vez creadas las cuatro chamarras simples, puedes crear una chamarra configurable, y asociarlas en una. El color y las mangas desarmables no se fijan en la cuenta de los productos configurables al crearla, será el cliente quien lo fijará cuando compre. Así, cuando los clientes llegan a esta página, en lugar de ver los atributos enumerados en la sección de información del producto, se verá un menú desplegable para el color (con opciones de color azul y rojo) y un desplegable para mangas (con opciones para fijas o desarmables). La combinación de atributos que elijan determinará cuál de los cuatro productos simples se fincará en el pedido. El producto configurable no es por lo tanto un producto en absoluto, sino más bien una característica para mostrar varios productos simples.

Producto Agrupado

Un Producto Agrupado es muy similar a un producto configurable. Es sólo una característica a utilizar para mostrar varios productos simples en una sola página del producto. Sin embargo, se muestra en una forma diferente. Sigamos con el ejemplo de la chamarra. Olvídense de las tres nuevas versiones que comenzaron a llevar, y volvamos al diseño clásico de color azul con mangas fijas. Junto con esta chamarra, también se venden pantalones y gorras de juego, los tres hacen un uniforme. Con productos simples se tienen tres páginas separadas para cada pieza. Pero como son parte de un uniforme se pueden ver juntas. Esto puede lograrse fácilmente utilizando productos agrupados. Basta con crear un grupo y nombrarlo como uniforme paramédico. En tu página web, la página de este producto Agrupados listará los tres productos simples, cada uno con su propio campo de cantidad. De esta manera, los clientes son alertados de la presencia del conjunto, e incluso anima a comprar las piezas, sin embargo, todavía tienen la opción de comprar las piezas por separado (de hecho, se puede obligar a comprar las tres piezas juntas).

¿Cómo cambiar el texto predeterminado en la plantilla de Magento?

David Gómez — Wed, 19 Aug 2009 19:14:58 +0000

Para cambiar el texto predeterminado primero ingreso una línea de texto nueva en Inglés en el archivo adecuado ¿Cómo puedo saber cuál es el archivo adecuado? Yo uso notepad + + (npp) como mi editor de código fuente (puedes utilizar el de tu preferencia). Así, con la herramienta “Buscar y Buscar en archivos” (Ctrl + F) introduzco el texto predeterminado “xxxx” que estoy interesado en cambiar y mi npp mostrará los archivos csv, phtml y xml que lo están utilizando.

Veamos un ejemplo:

Paso 1: Buscar texto en archivos de Magento

Quiero cambiar el texto contenido en que es:

Sign up for our newsletter:

Por lo tanto con la herramienta de búsqueda (Ctrl + F) en mi npp encuentro cuatro archivos con el texto, en_US/Mage_Newsletter.csv; es_MX/Mage_Newsletter.csv y las dos plantillas iguales pero en rutas diferentes: subscribe.phtml.

Ten en cuenta que la plantilla que voy a modificar se encuentra en la ruta:

/magento/APP/diseño/frontend/myInterface/default/plantilla/newsletter/subscribe.phtml

Paso 2: Agregar texto en archivos csv de Magento encontrados

Como ya he identificado los archivos en los que debo ingresar el texto nuevo que deseo agregar voy al archivo csv:

En el archivo en_US/Mage_Newsletter.csv

Y agrego lo siguiente:

"Enter your email address to receive product news, promotions and more:","Enter your email address to receive product news, promotions and more:"

Luego en es_MX/Mage_Newsletter.csv

"Enter your email address to receive product news, promotions and more:","Introduzca su email para recibir noticias sobre productos, promociones y mucho más:"

Paso 3: Cambiar texto en plantilla phtml de Magento encontradas

Entonces en el archivo subscribe.phtml. Se encuentra esta línea:

__('Sign up for our newsletter:') ?>

Lo he cambiado por la nueva línea que he introducido en los archivos csv como:

__('Enter your email address to receive product news, promotions and more:') ?>

Notece que he utilizado el texto en Inglés para que la aplicación de Magento lo tome en cuenta a la hora de utilizar la traducción.

¡Y… eso es todo!

Empiezo con HTML 5

David Gómez — Tue, 28 Jul 2009 07:27:49 +0000

Hoy doy inicio a una serie de artículos relacionados con HTML 5, que ha sido uno de los temas que más me han llamado la atención en los últimos meses. Y es que me parece tan interesante hacia dónde va ir el desarrollo web en término de estándares que pareciera una tarea casi imposible de lograr por tantos intereses de por medio que se manejan tanto de las empresas desarrolladoras de navegadores Apple, Mozilla, y Opera así como de los grupos de la W3C para establecer de la mejor manera posible los elementos que conformarán el HTML 5.

Como mi conocimiento esta limitado a lo que se va publicando en inglés, la mayor parte de mis referencias es hacía esos sitios escritos en inglés. Y es precisamente esta la razón por las que me he animado a empezar a publicar lo que voy leyendo y lo que empiece a utilizar en sitios nuevos para aportar con mi granito de arena en el idioma Español.

Y haciendo una brevísima historia de los inicios del HTML 5, les dejos esta pequeña traducción de 1.4 History HTML 5

Breve Historia de HTML 5

A finales del año 2003 se iniciaron los trabajos en HTML 5, como un demostración de concepto que era posible extender los formularios del HTML 4 para proporcionar muchas de las características que presenta el Formato (X) 1.0, sin la necesidad de pedirle a los navegadores que implementen motores de regenerado que eran incompatibles con las existentes páginas Web en HTML. En esta muy temprana etapa, el anteproyecto ya estaba a disposición del público, ya había solicitudes de todas partes para que se les pusiera al tanto, mientras que la especificación se encontraba únicamente como derechos de autor de Opera Software.

A principios del 2004, algunos de los principios por los que se basaba este esfuerzo, tan sólo como una propuesta de anteproyecto inicial cubriendo únicamente características relacionadas con los formularios, fueron presentados a la W3C en conjunción por Mozilla y Opera como un taller para discutir el futuro de las Aplicaciones Web en la Web. La propuesta fue rechazada sobre el fundamento de que dicha propuesta entraba en conflicto con la dirección previamente elegida para la evolución de la Web.

Inmediatamente después, ya agrupados Apple, Mozilla y Opera anunciaron su intención de continuar trabajando en dicho esfuerzo. Una lista de emails pública fue creada, y el anteproyecto fue cambiado a el sitio WHATWG. Por consiguiente los derechos de autor fueron corregidos para que pertenecieran a las tres empresas participantes y permitir reutilizar las especificaciones.

En el 2006, la W3C expresó interés en las especificación, creando un grupo de trabajo encargado de laborar con la WHATWG en el desarrollo de las especificaciones del HTML 5. El grupo de trabajo empezó en el 2007. Apple, Mozilla y Opera permitieron a la W3C públicar las especificaciones bajo los derechos de autor de la W3C, mientras que se mantienen versiones menos restrictivas en el sitio de la WHATWG.

Desde entonces, ambos grupos han trabajado juntos.