magento -generalidades

48
Como instalar Magento Publicado por grander hace 2 años en: Instalación , Tutoriales Como no podía ser de otra manera, el primer tutorial hace referencia a la instalación de Magento. Este es un pequeño tutorial sobre como instalar Magento en un servidor. Pasos: 1. Comprueba que las características del servidor son las que Magento requiere. Puede consultar los requisitos de Magento aquí . 2. Descárgte la última versión: Magento 1.0.19870.1.zip . 3. Descomprime los archivos del fichero .zip y súbelos a su servidor utilizando cualquier programa de gestión de archivos FTP (podemos utilizar el conocido y gratuito Filezilla). Si quieres que el acceso a tu tienda sea http://www.ejemplo.com sube los archivos al directorio raiz (sin ninguna carpeta). 4. Crea una base de datos MySQL para Magento y anota el usuario y password (estos datos los tendrás que utilizar durante la instalación). Este paso puede variar según el proveedor de hosting (si no sabes como hacerlo, ponte en contacto con tu hosting). 5. Asegúrate que los archivos magento/var/.htaccess y las carpetas magento/app/etc, magento/var y todos los archivos y carpetas de magento/media se encuentran en modo escritura en su servidor. Para poner un archivo en modo escritura, consulta las propiedades del archivo y/o carpeta y ponlos en modo escritura (chmod 777). 6. Utiliza tu navegador habitual para acceder a la carpeta magento/install. Si has subido directamente los archivos al directorio raiz, la dirección será http://www.ejemplo.com/install. Por el contrario, la dirección será http://www.ejemplo.com/magento/install. 7. Finalmente, completa la información que Magento te pide durante la instalación. A continuación podemos ver los screenshots de este último paso:

Upload: andres-moro

Post on 30-Jun-2015

867 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Magento -generalidades

Como instalar Magento

Publicado por grander hace 2 años en: Instalación, Tutoriales Como no podía ser de otra manera, el primer tutorial hace referencia a la instalación de Magento. Este es un pequeño tutorial sobre como instalar Magento en un servidor.Pasos:1. Comprueba que las características del servidor son las que Magento requiere. Puede consultar los requisitos de Magento aquí.2. Descárgte la última versión: Magento 1.0.19870.1.zip.3. Descomprime los archivos del fichero .zip y súbelos a su servidor utilizando cualquier programa de gestión de archivos FTP (podemos utilizar el conocido y gratuito Filezilla). Si quieres que el acceso a tu tienda sea http://www.ejemplo.com sube los archivos al directorio raiz (sin ninguna carpeta).4. Crea una base de datos MySQL para Magento y anota el usuario y password (estos datos los tendrás que utilizar durante la instalación). Este paso puede variar según el proveedor de hosting (si no sabes como hacerlo, ponte en contacto con tu hosting).5. Asegúrate que los archivos magento/var/.htaccess y las carpetas magento/app/etc, magento/var y todos los archivos y carpetas de magento/media se encuentran en modo escritura en su servidor. Para poner un archivo en modo escritura, consulta las propiedades del archivo y/o carpeta y ponlos en modo escritura (chmod 777).6. Utiliza tu navegador habitual para acceder a la carpeta magento/install. Si has subido directamente los archivos al directorio raiz, la dirección será http://www.ejemplo.com/install. Por el contrario, la dirección será http://www.ejemplo.com/magento/install.7. Finalmente, completa la información que Magento te pide durante la instalación. A continuación podemos ver los screenshots de este último paso:

1. Aceptación de las condiciones legales

Page 2: Magento -generalidades

2. Configuración de la base de datos

3. Creación usuario Admin8. Y, instalación finalizada! Ya puedes acceder al admin y empezar a configurar su tienda.

Guia de diseño para Magento I

Publicado por grander hace 1 año, 4 mess en: Configuración, Tutoriales

Terminología de diseño en Magento

Para comprender la documentación, es crucial que comprendas bien los términos usados para describir aspectos del sistema Magento. Los términos introducidos en este capítulo seguramente son nuevos para ti, así que tómate tu tiempo y lee minuciosamente. Pero lo más importante, no te preocupes si no puede comprender a fondo el concepto de todos estos nuevos términos. Este capítulo sirve sólo para presentártelos todos juntos de una vez y los siguientes profundizarán y expandirán esas definiciones. Puedes acceder a la

Page 3: Magento -generalidades

terminología cubierta en este capítulo desde la tabla de contenidos, o haciendo scroll.

Website y Tienda

Un Website es una colección de tiendas que comparten los mismos clientes y la información de las compras que hacen, así como su carrito de compras. Por otro lado una Tienda es una colección de Vistas de Tienda. Estos términos son muy generales y pueden adoptarse para definir las necesidades únicas de cada comerciante.Algunos escenarios para definir los diferentes usos de un website, tienda y vistas de tienda son los siguientes:

Escenario 1

Supongamos que una compañía llamada Dubloo SA. comienza a tener presencia online con 3 tiendas de ropa separadas, cada una atendiendo a un mercado de diferente nivel de precios. Dubloo SA. quiere que sus tres tiendas compartan la información de clientes y pedidos.

- Entiéndase Store como Tienda y Store View como Vista de TiendaSolución: En este escenario, Dubloo SA. tendrá un Website y tres tiendas. “Tienda” (Store) definiría el nivel de precio y “Website” sería el paraguas de Dubloo SA.

Escenario 2

Ahora una compañía llamada Mis Laptops quiere abrir dos Websites separados. Ambos venden laptops pero a diferentes precios. También quieren ofrecer en cada sitio la opción de idioma: inglés y español. Cada producto será mostrado en el idioma que los visitantes hayan seleccionado. Necesitarán sincronizar la información de clientes y pedidos por sitio.

Page 4: Magento -generalidades

Solución: En este escenario, la compañía Mis Laptops tendría dos “Websites”: “Mis Laptops” y “Laptops Baratas”. Cada Website, tendrá una tienda llamada del mismo nombre (una donde se venderan laptops de costo medio y otras donde se venderán solo las de bajo costo). Cada tienda a su vez tendrá dos “Vistas de Tienda”: “Tienda en Ingles” y “Tienda en Español”.

Escenario 3

Una compañía llamada Instrumentos Bongo quiere tener presencia online. Sin otras ramas de tiendas internas.

Solución: Instrumentos Bongo es la “tienda” (Store) y también el “Website”.

Interfaz

Page 5: Magento -generalidades

Una interfaz es una colección de temas que determinan el aspecto visual y funcionalidades del frontend de tu tienda. Una interfaz puede ser asignada tanto en el nivel de Website y/o en el nivel de Vista de Tienda por medio del panel de administración. (En inglés por el momento: Learn how to assign an interface to the website/store)Si asignas una interfaz en el nivel de Website, todas tus tiendas la heredarán. Pero después puedes asignar una interfaz en el nivel tienda, sobrescribiendo la del Website.Digamos que operas cuatro tiendas diferentes bajo un Website llamado “Remedios John”. Estudiando los efectos de cada método como se muestra abajo, podrás determinar fácilmente el método a emplear para las necesidades de diseño de tu negocio.

Nivel de “website”

Si quieres crear un look and feel unificado para tus 4 tiendas, asignarás una interfaz en el nivel de Website, en cuyo caso las 4 tiendas la heredarán.

Nivel “Tienda”(Store)

Si quieres incorporar un look and feel para CADA tienda, puedes asignar una interfaz por tienda, en cuyo caso las 4 tiendas tendrán cada una un único look and feel.

Temas

Un tema es cualquier combinación de archivos de distribución (Layouts), plantillas (Templates) y/o estilos (Skins) que crean la experiencia visual de tu tienda. Magento está construido con la capacidad de cargar múltiples temas al mismo tiempo, aunque los distingue en dos grandes tipos:

Tema predeterminado (Default Theme)

Page 6: Magento -generalidades

Cada interfaz viene con un tema predeterminado (por defecto) llamado “default” el cual es el tema principal de una interfaz. Cuando asignas una interfaz a una tienda, la aplicación automáticamente busca el tema con el nombre “default” y lo carga en el front-end. Para personalizar el diseño de tu tienda, puedes modificar este tema o crear un tema no predeterminado (Non-default Theme) adicional y cargarlo junto con el default. El tema “default” debe contener todos los “layouts” requeridos, “templates” y “skins” para funcionar sin errores y, por lo tanto, es el tema más bajo en la jerarquía de temas.

Tema no predeterminado (Non-default Theme)

Un tema no predeterminado o non-default puede contener tantos o tan pocos archivos como necesites. Este tipo de tema está pensado para darle un diseño de temporada a una tienda sin tener que recrear todos los archivos por completo. Creando unas pocas imágenes y actualizando algún archivo de estilo en CSS, puedes hacer que tu tienda deje verse como siempre, para convertirse, por ejemplo, en una tienda adornada para la temporada de Navidad.Un tema consiste en cualquiera o todo lo siguiente:

Layouts (estructuras):

Ubicado en “app/design/frontend/your_interface/your_theme/layout/”. Estos son archivos XML que definen la estructura de bloques para diferentes páginas así como controlan la información META y la codificación de páginas. Para ver en profundidad los “layouts”, lee Intro to Layouts)

Templates (plantillas):

Ubicados en “app/design/frontend/your_interface/your_theme/template/”. Son archivos PHTML que contienen marcas XHTML y cualquier código PHP necesario para crear la lógica de la presentación visual.

Skins: (máscaras)

Ubicados en “skin/frontend/your_interface/your_theme/”. Son imágenes, estilos en CSS y archivos de Javascript para bloques específicos que complementan tus XHTML.

Bloques

Diagrama 1. Bloques estructurales (en azul)Diagrama 2. Bloques de contenido

(en naranja)

Page 7: Magento -generalidades

Los bloques son la forma en que Magento distingue la colección de funcionalidades en el sistema y crea una forma modular para manejarla desde ambos puntos de vista: el visual y el funcional. Hay dos tipos de bloques y funcionan juntos para crear la salida visual.

Bloques de estructura

Son bloques creados con el único propósito de asignar una estructura visual a una página de una tienda. Por ejemplo, definir que el bloque de encabezado se ubicará en la parte superior del Website, definir una columna izquierda para el listado de categorìas, una columna principal para mostrar los productos y un pie de pagina al final inferior del Website (Diagrama 1).

Bloques de contenido

Son bloques que producen el contenido real dentro de cada bloque estructural. Son representaciones de cada elemento que funciona en una página, es decir, representaciones del buscador, el mini carrito de compra, el listado de categorìas, las etiquetas de productos, etc (Diagrama 2). Emplean archivos de templates para generar XHTML a ser insertados en sus bloques de estructura padres.En vez de incluir template tras template como en cualquier aplicación típica de comercio electrónico (eCommerce), Magento reúne y ordena el contenido de las páginas a través de bloques.Fuente: http://www.magentocommerce.com/wiki/groups/201/terminologia_de_diseno_en_magento

Page 8: Magento -generalidades

Guia de diseño para Magento II

Publicado por grander hace 1 año, 3 mess en: Magento, Tutoriales Esta vez, os ofrecemos la segunda entrega de la Guia de diseño para Magento. Podéis consultar el número uno aquí.

Trabajando con temas de Magento

En este capitulo entraremos en detalles sobre cómo Magento manipula los temas y te enseñaremos cómo crear y gestionar el tuyo. Recuerda siempre usar la tabla de contenidos si deseas saltarte a algún punto específico.

Temas diferentes entre sí

El término “tema” probablemente te suene familiar. Ya sea como audiencia, como creador, o ambos, haz experimentado el mar de aplicaciones disponibles por medio de sus temas. Un tema generalmente tiene dos tipos de usuario:1. El público: aquellos que experimentan desde el punto de vista de la estética y usabilidad, navegando por medio de la tienda.2. El creador (administrador): la persona que trabaja mediante una capa adicional del tema y forma parte de la construcción del mismo.Para el primer tipo de usuario, la experiencia en una tienda está definida por la habilidad de la aplicación para cumplir con sus demandas tácticas y emocionales. Para el segundo, quien debe tomar

Page 9: Magento -generalidades

el rol de creador, la experiencia en una tienda es la eficiencia con la que puede completar un conjunto de tareas de desarrollo.Reconocemos que la rentabilidad de una tienda está determinada por la experiencia acumulada de ambos tipos de usuarios, por lo tanto, la experiencia de usuario no puede darse el lujo de ser pasada por alto.Contamos con que como diseñador o diseñadora, ya tienes cubierta de la mejor manera el trabajo gráfico de tu tienda, por tanto, imaginamos que podríamos ayudarte en el proceso construyendo un gestor de temas impresionante para maximizar la eficiencia de tu flujo de trabajo y llevar tu creatividad al siguiente nivel. Aquí tienes algunas prestaciones que te dejaran babeando:

1. Máximo poder de personalización

Con magento puedes mejorar el aspecto de tu tienda en el nivel de categorías y en el nivel de productos, brindándote un mejor poder de marketing y promoción, así como una tienda con un diseño único. ¿Alguna vez imaginaste poder presentar cada producto en su propia página de información personalizada? Magento te da el poder de hacer eso y más, proporcionandote una rápida forma de personalizar la presentación por producto y la presentación por categorías

2. Temas múltiples

Magento le da la posibilidad de cargar múltiples temas a su tienda, permitiendo cambiar entre el diseño normal y aquellos que sólo usa en eventos o temporadas específicas. Todo esto por mediante unos pocos clics.

3. Flujo de trabajo ininterrumpido

Con la completa programación orientada a objetos de Magento, todos los modulos pueden ser usados en los archivos de un tema por medio de “etiquetas de temas”. Y como Magento viene lleno de prestaciones, nunca tendrás que depender de un programador para finalizar tareas tán simples para ti. Magento tambien se nutre de de una extenza red de conocimientos alimentada por los miembros de la comunidad (incluyendo al Equipo Oficial de Magento), asi que no tendrás que pensarlo dos veces si necesitas orientacion a lo largo del camino.

4. Minimiza el tiempo de depuración

Todo diseñador puede recordar aquellas preciosas horas y minutos que gasta buscando etiquetas sin cerrar encontradas por su validador de código. El validador puede decirte qué esta mañ, pero nunca te dirá dónde está pasando. El backend modular de Magento trae consigo un sistema de plantillas modular que minimiza la cantidad de

Page 10: Magento -generalidades

código (X)HTML que necesitas manejar. Menos desorden significa menos alboroto y más integridad para cosas importantes en la vida.Sin embargo, realmente la mejor parte de lo Magento ofrece, es el hecho de ser una aplicación que crece en su propia flexibilidad, dejándote sin nada de qué preocuparse, salvo de elaborar tu siguiente grandioso diseño. Recuerda que “el cielo es el límite para esta aplicación” y esperamos que te diviertas aplicando esta frase a tu tienda.

¿Cómo crear un Tema?

Primero, vamos a abrir algunos directorios. Abre los siguientes directorios del root de Magento y échale una mirada:

Directorio 1: app/design/frontend/default/default/ — Este directorio contiene el material de layout(diagramación), traducción (locale) y plantillas.

Directorio 2: skin/frontend/default/default/ — Este directorio contiene las imagenes, archivos CSS y bloques específicos en Javascript.

Cuando se trabaja con temas, estos dos directorios siempre serán tu punto de partida.Como debes haber notado, hemos dividido los archivos de temas en dos partes: separando los archivos que deben ser accesibles vía web(como Imágenes y archivos Javascript) de aquellos que pueden estar ocultos. De esta forma, Magento te ofrece medidas de alta seguridad en cada parte de tu tienda.Bien, sigamos y examinemos los dos directorios. A primera vista notarás el uso de los nombres de directorio “default/default” en ambos, directorio 1 y 2, así:

Directorio 1: app/design/frontend/default/default/ Directorio 2: skin/frontend/default/default/

En ambos casos, * indica el nombre de la interfaz y * indica el nombre del tema. Así que si estuvieses trabajando en un tema llamado “mi_tema” dentro de una interfaz llamada “mi_interfaz”, te encontrarías trabajando dentro del directorio “app/design/frontend/mi_interfaz/mi_tema/”Puedes guardar la cantidad de temas que desees dentro de tu directorio de interfaz, pero al momento de cargarlos al sistema, tu tienda solo puede manejar el tema llamado “default” y un tema adicional de tu elección (Nota: la capacidad de cargar un número ilimitado de temas estará disponible en las próximas versiones). Entonces puedes trabajar con dos temas, así que puedes mantener el tema predeterminado(default) para tu tienda durante todo el año y usar el tema adicional para alguna temporada o evento específico, la llegada de navidad o fiestas patrias serían razones muy convincentes para cambiar el tema de tu tienda ( Para aprender sobre cómo trabajan los temas múltiples y como sacarle provecho, lee “Saludemos a los temas múltiples” )

Page 11: Magento -generalidades

Creando un nuevo tema predeterminado

Diagrama 1

Para crear un nuevo tema predeterminado(default), primero debes copiar uno desde donde comenzarás el tuyo. Crea un duplicado del directorio app/design/frontend/default/default/ y dale un nuevo nombre (recuerda que los nombres el nombres de interfaz y tema deben ser alfanuméricos, comenzar con una letra del abecedario [a-z] y no puede contener espacios. Por ejemplo: “Mi tema nuevo” y “02123_mi_tema” están mal. “Mi_tema_nuevo” esta bien ya que no contiene espacios ni comienza con un número). La aplicación reconocerá tu tema por este nombre de directorio,Ahora haz lo mismo con el directorio skin/frontend/default/default. Y ya está! Acabas de crear exitosamente un nuevo tema. Para aprender sobre cómo asignar este tema a tu tienda, lee “Asignando un nuevo tema”, más abajo.

Creando un tema que no sea predeterminado

Para crear un tema que no es predeterminado, no necesitas duplicar el directorio de ningún tema “default”. La mayoría de veces solo querrás hacer cambios a archivos específicos y por tanto sólo necesitarás duplicar aquellos archivos para tomarlos como punto de inicio de tu tema nuevo. Sin embargo, una regla que debes recordar siempre seguir, es asegurarte que preservas las relaciones de estructura entre archivos. Por ejemplo, si todo lo que tu tema no predeterminado contiene es un archivo de nombre “home.phtml” del módulo catálogo dentro del directorio app/design/frontend/tu_interfaz/tu_tema_no_predeterminado/ necesitarás crear los directorios “template/catalog” dentro del cual guardarás tu archivo. Cuando abres un directorio de tema de Magento (Diagrama 1), verás cómo los directorios están estructurados y deberás asegurarte que la estructura de directorios dentro de tu nuevo tema es la misma. Sólo así, el tema cargará correctamente.

Page 12: Magento -generalidades

Asignando una interfaz y tema a la tienda

Ahora que ya haz creado tu propio tema, sea predeterminado (default) o no predeterminado (non-default), necesitarás asignarlo a tu website/tienda para que se realicen los cambios. Navega a tu panel de administración de Magento (por ejm: www.midominio.com/admin), luego a la pestaña de configuración de diseño (Sistema → Configuración → Pestaña de diseño) o (System → Configuration → Design tab) en la versión en inglés.Diagrama 2

En la esquina superior de la columna de la izquierda del Diagrama 2, notarás una caja llamada “Nivel de configuración actual” o “Current Configuration Scope”. Tienes dos opciones:

Para gestionar el diseño en el nivel Website, selecciona el nombre de tu website del combo, luego aplica los cambios que siguen.

Para gestionar el diseño en el nivel Tienda, selecciona el nombre de tu Vista de Tienda del combo, luego aplica los cambios que siguen.

Paso 1

De la pestaña de diseño, in “Nombre de paquete actual” o “Current package name”, escribe el nombre de la “interfaz” en la que reside tu nuevo tema. Si dejas esta caja de texto vacía, Magento automáticamente cargará la interfaz llamada “default”

Paso 2

Page 13: Magento -generalidades

En Default (debajo de Cabeceras de Tema o Themes heading), ingresa el nombre del nuevo “tema” que quisieras cargar en tu website/tienda. Si dejas esta caja de texto vacía, Magento automáticamente cargará solo el tema llamado “default” (Recuerda que no importa cómo configures la pestaña de diseño, Magento automáticamente cargará el tema llamado “default”, eso quiere decir que si asignas un tema en el administrador, será cargado en la cima de la jerarquía, pero siempre cargará junto al tema default. Sin embargo, esto cambiará en las próximas versiones del sistema para brindarte un control total sobre qué temas son cargados en tu tienda). En caso de que elijas cargar el tema por separado en función del tipo de archivo(layout, tema, skin o archivos de traducción), escribe el nombre del tema del cual se obtendrán aquellos tipos de archivo.

Paso 3

Cuando todo esté listo, haz clic en el botón “Guardar config” o “Save config” y recarga tu tienda en el navegador – Vola! Ahora verás tu tema reflejado en el frontend.Ahora que sabemos cómo crear y gestionar temas, pasemos a conocer cómo puedes manipular esos temas con Magento.

Saludemos a los temas múltiples!

Nota: la capacidad para temas ilimitados estará disponible en los próximos versiones. Aunque al momento de escribir esta guía sólo se podían cargar dos temas, en futuras versiones se mantendrá el mismo, así que puedes sacarle provecho a esta parte de la documentación.Las temporadas que rondan los días de fiesta son de lejos las que ofrecen la más amplia oportunidad de venta para una tienda de comercio electrónico (eCommerce). Los clientes hacen cola para comprar un regalo de Navidad para su familia y amigos, y las madres hacen cola para comprar trajes de Halloween para la noche de “truco o trato” de sus hijos. Con el fin de adaptarse a los compradores de temporada, tu tienda debe reflejar fielmente la ocasión y así inspirarles ganas de explorar tu tienda. Una tienda como el Diagrama 3 simplemente no causa gracia durante la Navidad - Lo que una tienda necesita para esta fiesta es un poco de rojo, nieve y al infaltable Santa Claus, tal como la tienda del Diagrama 4.Diagrama 3

Page 15: Magento -generalidades

Con Magento hemos creado la capacidad de que una tienda manipule múltiples temas de tu elección, justo para esos momentos en los que un arreglo extra es muy necesario. Siempre preservarás el diseño predeterminado de tu tienda (el que usas para el resto del año), pero cargando otros temas podrás mejorarlo a uno navideño.Viendo de cerca ambas capturas presentadas arriba, notarás similitudes en el diseño subyacente. La fachada a pasado a Navideña en el Diagrama 4, pero debajo de ella todavía puedes ver la estructura predeterminada que se usa fuera de temporada. Las únicas diferencias reales entre ambos diseños de tienda son sólo un poco de Estilos en CSS, imágenes navideñas y cambios en el texto de los archivos de tema. Dado que los cambios son, en realidad, pequeños, no hay necesidad de un tema completamente nuevo. Lo único que necesitas es reemplazar unos pocos archivos para lograr ese toque de Diciembre en tu tienda. La funcionalidad de temas múltiples de Magento fue creada precisamente para esa necesidad, poniendo en tus manos el poder para activar o desactivar los temas de temporada, preservando tu tema predeterminado.

Jerarquía de temas

Magento maneja la carga de varios temas asignando lo que se llama jerarquía de temas. De esta forma los archivos de un tema que se

Page 16: Magento -generalidades

encuentra en la cima de la jerarquía se mantendrán y reemplazarán a los archivos de temas que se encuentren debajo. Por ello es que en el tema navideño la distribución seguía siendo la del tema fuera de temporada ya que en la temporada navideña no hemos creado un archivo que lo reemplace.La jerarquía es determinada por ti en la pestaña de Gestión de Diseño y en las próximas versiones tendrás capacidad de manejarla a tu antojo completamente. Recuerda que por ahora el tema predeterminado o default sigue cargándose siempre al principio (en la base inferior de toda la jerarquía) y sobre él se carga el segundo tema asignado en el Administrador (colocándolo en la cima de la jerarquía).Cuando asignas múltiples temas a tu tienda, estás tomando ventaja del hecho que, mientras tu objetivo al construir un tema es crear la más usable y visualmente placentera interfaz gráfica, el objetivo de Magento es asegurarse que la aplicación es capaz de localizar y cargar todos los archivos que el tema requiere para mantener corriendo a la aplicación sin errores.Por ejemplo, si tu página de listado de categorías llama a una plantilla llamada “view.phtml” (en cuyo caso esta plantilla se convierte en un archivo requerido), pero la aplicación es incapaz de encontrar el archivo en el tema de mayor jerarquía, lo buscará en el tema que le sigue en la jerarquía. Si esto falla, la aplicación seguirá buscando en jerarquías cada vez más inferiores hasta que pueda localizar el archivo llamado “view.phtml” y cargarlo dentro de la tienda, dando por finalizada la búsqueda. Este método de construir un diseño es llamado “recurso de emergencia” (más conocido por su nombre técnico “fallback”) porque la aplicación, al no encontrar el recurso necesario, da una mirada al siguiente posible para cargarlo en la tienda. (Nota: al momento de escribir esta guía, el tema con mayor jerarquía es el tema que asignes por el administrador y el de menor jerarquía es el tema default que Magento automáticamente carga en la tienda. En próximas versiones, Magento te brindará la capacidad de tener un control total sobre la jerarquía de tus temas)Digamos que tienes 3 temas asignados a tu tienda y cada uno de esos temas contienen los siguientes archivos:Tabla 1

También vamos a asumir que los tres temas han sido asignados en esta jerarquía:Tabla 2

Page 17: Magento -generalidades

Si vemos de cerca, notaremos que hay unos pocos archivos redundantes como templates/templates/3-col-layout.phtml y css/base.css en la Tabla 1. Ahora vamos a organizar la tabla para que los archivos redundantes queden ordenados en paralelo uno con otro.Tabla 3

Estarás pensando “Ok, perfecto. ¿Pero esto qué significa?”. Bueno, déjanos recordarte que los archivos en la Tabla 3 son cómo “tu” ves los archivos en cada folder y no es cómo Magento los ve.Entonces observemos cómo Magento ve la misma estructura de archivos en la Tabla 4Tabla 4

Habrás notado cómo Magento ignora la versión del archivo redundante de baja jerarquía y reconoce sólo la versión de alta jerarquía. Esto es porque ya ha encontrado el archivo requerido y no necesita buscarlo más abajo, por tanto termina la búsqueda de ese archivo mientras continua buscando los demás que no ha encontrado aún.Fuente: http://www.magentocommerce.com/wiki/groups/201/trabajando_con_temas_de_magento

Page 18: Magento -generalidades

SlideShow para Magento en el HomePage

Publicado por grander hace 1 año, 4 mess en: Configuración, Tutoriales Una forma muy dinámica de promocionar varios artículos en nuestra tienda es instalar un SlideShow o galería de imágenes que, de forma automática, vaya pasando imágenes de productos o promociones. Hay una forma muy fácil de instalar un Slidshow en nuestra tienda de Magento.Básicamente, tenemos que seguir los siguientes pasos:1. En primer lugar, creamos un bloque estático en nuestro admin: CMS > Bloques Estáticos > Agregar un nuevo bloque y agregamos el código siguiente:<script type="text/javascript">  start_slideshow(1, 3, 2000);  function start_slideshow(start_frame, end_frame, delay) { setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay); }  function switch_slides(frame, start_frame, end_frame, delay) { return (function() { Effect.Fade('slide' + frame); if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; } setTimeout("Effect.Appear('slide" + frame + "');", 850); setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850); }) } </script>

Este código corresponde a la programación del script. Si queremos añadir más imágenes o cambiar el tiempo de transiciones, debemos tocar la segunda línea: (1, 3, 2000);<div id="introhomepage" style="height: 230px; position: relative;" onmouseover="stop_slideshow()" onmouseout="start_slideshow(1, 3, 1000)"><div id="slide1" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: block; z-index: 3; opacity: 1;"><a href="http://www.yourdomain.com/path/to/webpage.html"><img src="{{skin url=" border="0" alt="" /></a></div><div id="slide2" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 2; opacity: 0;"><a

Page 19: Magento -generalidades

href="http://www.yourdomain.com/path/to/webpage.html"><img src="{{skin url=" border="0" alt="" /></a></div><div id="slide3" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 1; opacity: 0;"><a href="http://www.yourdomain.com/path/to/webpage.html"><img src="{{skin url=" border="0" alt="" /></a></div></div>En el código html, tenemos que editarlo para añadir la ruta de nuestras imágenes y también cada uno de los links a los que dirige la imagen.2. Una vez hemos editado y guardado este nuevo bloque estático, simplemente, tenemos que añadir el bloquela en el Home. Para hacerlo, vamos a CMS > Gestionar las páginas > HomePage y añadimos el bloque añadiendo el siguiente código: {{block type="cms/block" block_id="el_identificador" template="cms/content.phtml"}}

En block_id tenemos que poner el mismo nombre del identificador que hemos añadido en el anterior paso.En el foro oficial, hay un post que habla de este slideshow y algunas dudas y problemas que han tenido varios usuarios.

Multilanguage store en Magento

Publicado por grander hace 1 año, 9 mess en: Configuración, Idioma, Tutoriales Una clara ventaja de las tiendas electrónicas es que tu mercado potencial se amplía exponencialmente. Para vender internacionalmente, tu tienda tiene que ofrecer dos cosas:

aceptación de la divisa del país de destino (con los sistemas de pago que existen actualmente como Paypal, esto no es ningún problema);

idioma del país de destino.

Configurar estos dos puntos en Magento es realmente fácil. Hoy hablaré de configurar varios idiomas en Magento. Por defecto, Magento oferce la posibilidad de que el visitante pueda escoger idioma mediante un menú desplegable (en el caso de tener instalados varios idiomas), así:

Page 20: Magento -generalidades

Para configurar una tienda con varios idiomas debemos añadir un idioma como store view. Pasos:

1. Descargar e instalar el idioma deseado. Podéis hacerlo aquí. Copiarás dos carpetas: app\design\frontend\default\default\locale y app\locale.

2. Ahora vamos a añadir un store view con un idioma. Sistema > Gestionar tiendas. Ahora debemos crear una vista de tienda (create store view) y completar la información necesaria:Store: Main Store, Name: Idioma, Code: idioma, Status: Enabled,Sort order: 0 (opcional, 0 lo pondrá en la primera posición en el menú desplegable, 1 en la segunda, etc.). Y guardamos.

3. Ahora vamos a Sistema > Configuración. En la parte superior izquierda, tenemos un menú desplegable con el alcance de la configuración actual. En este menú veremos ahora la nueva vista. Accedemos a la nueva vista y en opciones locales deseleccionamos ‘usar sitio web’ y luego seleccionamos el país local. Finalmente, guardamos.

Podemos realizar esta opción tantas veces como idiomas queramos. Como siempre, cualquier duda o sugerencia, nos dejáis un mensaje.

Page 21: Magento -generalidades

Aplicaciones imprescindibles para Magento

Publicado por grander hace 2 meses, 3 semanas en: Herramientas, Magento, Magento Connect, Plugins Es evidente que cada e-commerce tiene unas necesidades distintas, pero me gustaría destacar algunas de las aplicaciones gratuitas imprescindibles o muy recomendadas para cualquier tienda online y que encontrarás en MagentoConnect:- Pago Contrareembolso. Para aumentar al ratio de conversión, muchos e-commerce ofrecen la posibilidad de pagar Contrareembolso, es decir, el comprador paga el artículo en el momento de la recepción. Para habilitar esta opción en nuestra tienda tenemos dos plugins en MagentoConnect:

IDEALIAGroup Cash on Delivery (ya comentamos esta aplicación con anterioridad aquí)

Cash on delivery

- Facebook. Sabemos la importancia de las redes sociales. Existe una aplicación para actualizar nuestro perfil con los productos que tenemos en stock en Magento: Facebook Product Directory community version.- Contacto Rápido. Con este plugin podrás añadir un formulario de contacto que se ejecutará como un Lightbox. Puedes instalar el plugin desde MagentoConnect aquí.Si crees que falta alguna aplicación imprescindible, mándanosla e iremos aumentando la lista.Nota: Por supuesto, antes de instalar cualquier aplicación en un entorno de trabajo real, realizad una copia de seguridad y probad de instalar la aplicación en un entorno de pruebas.

Nuevo sistema de pago: Pago Contrareembolso

Publicado por grander hace 7 meses en: Magento Connect, Plugins

Page 22: Magento -generalidades

Después de algún tiempo sin actualizar el blog, volvemos para seguir ofreciendo artículos que ayuden tanto a usuarios avanzados como a iniciados.En esta ocasión, me gustaría comentar un nuevo plugin que podremos encontrar en MagentoConnect y que nos permitirá añadir el método de pago contrareembolso de una forma realmente senzilla: Cash on Delivery. Para instalar este plugin, simplemente tendréis que ir a Sistema > Magento Connect > Magento Connect Manager en el Panel de Administración e introducir la clave de instalación: magento-community/IG_CashOnDelivery (al ser un plugin estable, debéis tener instalar versiones estables en Settings).El Blog de Magento ha traducido también esta aplicación para que la podáis disfrutar en español. Podéis descargar el archivo .csv aquí. Para instalar el idioma español de esta aplicación, simplemente subid el archivo a app/locale/es_ES.Nota: una vez habéis subido el archivo del idioma español, tenemos que refrescar el cache en Sistema > Gestor de la cache > Control de la cache > Toda la cache > Refrescar y guardamos la configuración.

LiveChat para Magento

Publicado por grander hace 1 año, 4 mess en: Magento, Magento Connect, Plugins Magento es una plataforma de código abierto con una comunidad, día tras día, mayor y, consecuentemente, con aportaciones y plugins nuevos constantemente. Como comentábamos en anteriores posts, Magento dispone de MagentoConnect, una herramienta realmente útil para instalar de forma muy fácil nuevos plugins o templates.En este caso, os quiero presentar un plugin genial para incorporar un chat en directo en nuestras tiendas y, así, poder hablar en directo con

Page 24: Magento -generalidades

Aunque sencilla, muy interesante aplicación que podemos encontrar en MagentoConnect. Este plugin permite a los propietarios de la tienda deshabilitar el front mientras se realizan tareas de mantenimiento. De esta manera, mientas actualizamos la versión de Magento, actualizamos el stock o, simplemente, estamos realizando pruebas, los usuarios no podrán entrar en la tienda y evitaremos ventas erróneas.Este plugin lo instalamos mediante MagentoConnect. Os dejo el enlace aquí de la dirección oficial para consultar este plugin y la key extension en el caso que deseéis instalarlo.

Nuevo plugin en MagentoConnect, Los más vendidos

Publicado por grander hace 1 año, 9 mess en: Magento, Magento Connect, Plugins

Page 25: Magento -generalidades

Los más vendidos, plugin MagentoNuevo plugin en MagentoConnect realmente interesante. Esta extensión añade un nuevo bloque en nuestro front, mostrando una selección de los productos más vendidos.Aunque la versión es estable, parece ser que aun muestra algunos errores en algunos casos. En cualquier caso, una extensión realmente interesante y muy útil. Podéis instalar esta extensión en el administrador de MagentoConnect, utilizando la extension key que encontraréis aquí.Espero que os sirva de ayuda. Ya sabéis, podéis hacernos llegar cualquier duda o sugerencia e intentaremos solucionarlo.

eBayAPI, nuevo plugin en MagentoConnect

Publicado por grander hace 1 año, 10 mess en: Magento, Magento Connect, Plugins

Page 26: Magento -generalidades

Navegando por MagentoConnect he encontrado un plugin realmente interesante para todos aquellos que además de vender en una tienda online propia, aprovechan eBay para vender restos de stock o, simplemente, el mismo producto. Cuando tienes una tienda online y además vendes en eBay, siempre surgen los problemas de stock, clientes que solamente compran por eBay (teniendo que pagar las comisiones pertinentes)… Este plugin te ayuda a unir Magento con eBay. Una vez una puja ha terminado en eBay, el ganador realiza el checkout en tu tienda; de esta manera, tienes un mayor control del stock y, además, estás conduciendo a todos los compradores a tu tienda, una manera muy fácil para promocionar tu tienda!Podéis consultar el pluging en cuestión aquí. El plugin es muy reciente y aún está en fase de pruebas, os recomiendo esperar un poquito antes de adquirirlo. Su precio es de 49,90$, unos 34€.Os dejo unos screenshots del plugin:

Page 27: Magento -generalidades

Integrar Wordpress en Magento

Publicado por eri hace 1 año, 11 mess en: Instalación, Plugins, Tutoriales En Internet existen infinidad de Frameworks que nos permiten realizar tareas concretas pero, ¿qué pasa si el Framework que nosotros utilizamos no dispone de ciertas funcionalidades que requerimos para nuestro sitio Web?Precisamente por eso resulta interesante el hecho de poder integrar Frameworks con otros Frameworks.El caso que nos ocupa se trata de integrar Magento (digamos, nuestro Framework) con el famoso Wordpress. De esa forma podemos disponer de un poderoso sistema de blog en nuestra tienda virtual.

Page 28: Magento -generalidades

Dicho eso, empecemos:Existe una extensión de Magento llamada “Lazzymonks Wordpress Integration” (en fase Beta) que nos facilitará mucho la tarea de integración, por eso, lo primero será descargar dicha extensión.

Atención: Como siempre desde Magento nos advierten que antes de realizar una actualización o instalar una extensión, realicemos una

copia de seguridad de nuestra instalación.Paso 1: Descargamos la extensión con Magento Connect, su Extension Key es “magento-community/Mage_Blog”. Si no sabes como instalar una extensión de Magento pásate por nuestro toturial Magento Connect, una herramienta realmente útil!.Paso 2: Nos desplazamos al directorio raíz de nuestra instalación de Magento, allí localizamos el archivo “index.php”.En el nos desplazamos a la siguiente línea (línea 37 aprox.):

require_once $mageFilename;

Y justo después de ella añadimos las 2 siguientes líneas: define(’WP_USE_THEMES’, true); require(’ruta/a/tu/wordpress/wp-blog-header.php’);

Donde “ruta/a/tu/wordpress/” es el directorio exacto donde se encuentra nuestra instalación de Wordpress. Si lo instalamos en el directorio raíz de Magento “magento/wordpress” quedaría así:

“require(’./wordpress/wp-blog-header.php’);”Paso 3: Entramos en el directorio de Wordpress y localizamos el archivo “wp-settings.php”:

“wordpress/wp-settings.php”Allí debemos quitarle el “&” a las siguientes líneas:

Línea 399:$wp_the_query =& new WP_Query();

Línea 414:$wp_rewrite =& new WP_Rewrite();

Línea 421:$wp =& new WP();

Línea 456:$wp_locale =& new WP_Locale();

Page 29: Magento -generalidades

En el mismo archivo, nos desplazamos a la línea 386 y borramos o comentamos (añadiendo “#” delante) estas líneas:

Línea 386:// Escape with wpdb.$_GET = add_magic_quotes($_GET );$_POST = add_magic_quotes($_POST );$_COOKIE = add_magic_quotes($_COOKIE);$_SERVER = add_magic_quotes($_SERVER);

Paso 4: Nos desplazamos al directorio wp-includes del directorio raíz de Wordpress y abrimos el archivo “l10n.php”.

“wordpress/wp-includes/l10n.php”Allí buscamos la línea 116 y donde pone:function __($text, $domain = ‘default’) {return translate($text, $domain);}Lo cambiamos para que quede así:if (!function_exists(’__’)) {function __($text, $domain = ‘default’) {return translate($text, $domain);}}Paso 5: Ahora debemos retocar Wordpress para integrarlo en Magento, para ello copiamos el theme que se encuentra en “wordpress_module_files/wordpress-theme” dentro de “wordpress\wp-content\themes”.Paso 6: Entramos en el admin de Wordpress y vamos a “opciones”.Allí cambiamos el valor de “Dirección del blog (URL)” a “http://www.tusitio.com/magento/blog” (o la ruta adecuada a tu site, siempre manteniendo la parte de “/blog”). Guardamos los cambios y nos dirigimos a “Enlaces Permanentes” (permalinks).Asegúrate que dentro de “Enlaces Permanentes” está activa la opción “Predeterminado”.Finalmente nos dirigimos a “Diseño” y seleccionamos el theme que instalamos en el paso 5.Paso 7: Y ya está, ya puedes acceder a tu blog desde tu navegador habitual en:

“http://www.tusitio.com/magento/blog”Puedes visitar el artículo original aquí.

Page 30: Magento -generalidades

Cómo instalar ShadowBox en Magento

Publicado por grander hace 1 año, 11 mess en: Instalación, Magento, Plugins, Tutoriales ShadowBox es una herramienta realmente interesante para nuestra tienda. Básicamente, es una herramienta para mejorar el diseño de nuestra tienda al mostrar las fotos de nuestros productos. Podéis ver un ejemplo aquí. Simplemente, es el típico efecto de sombra para mostrar una imagen:

Pasos a seguir para instalar este efecto en nuestra tienda Magento:Paso 1Nos descargamos los archivos necesarios. Podéis hacerlo en la página oficial (la segunda opción, archivos necesarios) o directamente aquí.Paso 2Suponiendo que tenemos instalado Magento en el directorio raíz:- creamos una nueva carpeta dentro del directorio js llamada “sb”yourdomain.com/js/sb- dentro de la nueva carpeta, subimos las subcarpetas /build, /images y /src. Quedará de la siguiente manera:yourdomain.com/js/sb/buildyourdomain.com/js/sb/imagesyourdomain.com/js/sb/srcPaso 3Ahora abrimos la carpeta CSS del template que estemos utilizando (este tutorial supone que estás utilizando el default) y subimos el archivo shadowbox.css (este archivo lo encontramos en /build/css/ del .zip original que te ha descargado previamente) en esta carpeta. Quedará de la siguiente manera:yourdomain.com/skin/frontend/default/default/css/shadowbox.cssPaso 4

Page 31: Magento -generalidades

En este mismo template, en la carpeta /images creamos un nuevo directorio llamado “sb” y subimos las imágenes de Shadowbox, quedando de la siguiente manera:yourdomain.com/skin/frontend/default/default/images/sb/loading.gifyourdomain.com/skin/frontend/default/default/images/sb/loading-light.gifyourdomain.com/skin/frontend/default/default/images/sb/overlay-85.png

Paso 5

Ahora debemos modificar el archivo Shadobox.js que encontrarás en:

yourdomain.com/js/sb/shadowbox.js

Alrededor de la linea 81, remplazamos:

loadingImage: ‘images/loading.gif’,

por:

loadingImage: SKIN_URL + ‘images/sb/loading.gif’,

Alrededor de la linea 131, remplazamos:

overlayBgImage: ‘images/sb/overlay-85.png’,

por:

overlayBgImage: SKIN_URL + ‘images/sb/overlay-85.png’,

Graba y cierra.

Paso 6

- Ahora vamos a modificar el template de Magento para usar Shadowbox. Abre:

yourdomain.com/app/design/frontend/default/default/layout/page.xml

Alrededor de la linea 42, busca:

<action method=”addJs”><script>mage/cookies.js</script></action>

e inserta esto a continuación:

<action method=”addJs”><script>sb/src/js/lib/yui-utilities.js</script></action>

<action method=”addJs”><script>sb/src/js/adapter/shadowbox-prototype.js</script></action>

<action method=”addJs”><script>sb/src/js/shadowbox.js</script></action>

Page 32: Magento -generalidades

Alrededor de la linea 49, busca:

css/menu.css

e inserta esto a continuación:

css/shadowbox.css

Graba y cierra.

- Ahora abrimos: yourdomain.com/app/design/frontend/default/default/template/catalog/product/view/media.phtml

Alrededor de la linea 51, reemplazamos:

<?php foreach ($this->getGalleryImages() as $_image): ?>

<li>

<a href=“<?php echo $this->helper(’catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile()); ?>” title=“<?php echo $_product->getName();?>”><img src=“<?php echo $this->helper(’catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(68, 68); ?>” width=“68″ height=“68″ alt=“”/></a>

</li>

<?php endforeach; ?>

por:

<?php foreach ($this->getGalleryImages() as $_image): ?>

<li>

<a href=“<?php echo $this->helper(’catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile()); ?>” rel=“shadowbox[rotation]“ title=“<?php echo $_product->getName();?>”><img src=“<?php echo $this->helper(’catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(68, 68); ?>” width=“68″ height=“68″ alt=“”/></a>

</li>

<?php endforeach; ?>

Graba y cierra.

- Ahora abrimos: yourdomain.com/app/design/frontend/default/default/template/page/html/head.phtml

Page 33: Magento -generalidades

Reemplazamos:

<script type=“text/javascript”>

var BLANK_URL = ‘<?php echo $this->helper(’core/js‘)->getJsUrl(’blank.html‘) ?>’;

var BLANK_IMG = ‘<?php echo $this->helper(’core/js‘)->getJsUrl(’spacer.gif‘) ?>’;

</script>

por:

<script type=“text/javascript”>

var BLANK_URL = ‘<?php echo $this->helper(’core/js‘)->getJsUrl(’blank.html‘) ?>’;

var BLANK_IMG = ‘<?php echo $this->helper(’core/js‘)->getJsUrl(’spacer.gif‘) ?>’;

var SKIN_URL = ‘<?php echo $this->helper(’core/js‘)->getJsSkinUrl(”) ?>’;

</script>

<!– Added Shadowbox –>

<script type=“text/javascript”>

window.onload = function(){ Shadowbox.init(); };

</script>

<!– end Added Shadowbox –>

Graba y cierra.¡¡Y a disfrutar de una herramienta que será las delicias de nuestros visitantes!!Podéis consultar el tutorial original aquí. Muchas gracias Chad Coleman.

Pack completo del lenguaje español para Magento

Publicado por grander hace 1 año, 10 mess en: Magento, Magento Connect, Novedades

Page 34: Magento -generalidades

Simplemente, quería comunicaros que el pack oficial de la lengua castellana para Magento lo podemos encontrar en MagentoConnect. Con este pack disponemos de una traducción al 100% muy fácil de instalar en nuestra tienda. Podéis consultar el anterior tutorial publicado en El Blog De Magento sobre como funciona MagentoConnect. Para obtener la key de la extensión y así instalar este pack id aquí.

Ship to this address

Cuando nos encontramos en el onepage checkout, y llegamos al paso de billing information (información de facturación), al final del todo

Page 35: Magento -generalidades

tenemos que seleccionar una de estas dos opciones: ship to this address o Ship to different address. De forma predeterminada, Magento marca la segunda opción por defecto, lo cual para unos podría tener su lógica pero para otros no.Entiendo que se trata de una manera de asegurarse de que el cliente no omita por despiste este paso (información de envío). A través del diseño de la interfaz podemos llevar al usuario por el “camino” que estratégicamente marcamos. Pero en realidad, para un comercio online estándar, la gran mayoría de sus clientes compran y ordenan enviar su pedido a sus propias casas (este balance cambiaría en un comercio orientado a regalos, por ejemplo).Así que, en la mayoría de los casos, lo más general es que la opción marcada por defecto sea ship to this address.Cambio en el código:  Como ya sabemos que cambiar el código fuente de la aplicación puede interferir en futuras actualizaciones, es conveniente apuntarlo en nuestra lista de “archivos del core modificados, revisar después de cada actualización”.Abrimos el archivo billing.php, localizado en app/code/core/mage/checkout/block/onepage/. Y sustituimos: public function isUseBillingAddressForShipping() { if (($this-&gt;getQuote()-&gt;getIsVirtual()) || !$this-&gt;getQuote()-&gt;getShippingAddress()-&gt;getSameAsBilling()) { return false; } return true; }por: public function isUseBillingAddressForShipping() { if (($this-&gt;getQuote()-&gt;getIsVirtual()) || !$this-&gt;getQuote()-&gt;getShippingAddress()-&gt;getSameAsBilling()) { return true; } else { return false; } }

Guardamos y comprobamos que por defecto está marcado ship to this address.

Ordenar por “Mejor valor”

Publicado por Pablo Montero hace 1 año, 2 mess en: Configuración, Tutoriales, Útiles Seguramente alguna vez nos hemos preguntado cómo funciona Sort by Best Value (ordenar por mejor valor). A priori, uno podría pensar que la plataforma ordena los productos según la puntuación (o rating

Page 36: Magento -generalidades

o estrellitas amarillas) que los usuarios han dado a los productos.

Pero esto no es así. De hecho, Magento ofrece de forma predeterminada 3 formas de ordenación: Mejor valor, Precio y Orden alfabético. Pero de momento no contempla la ordenación por puntuación.Entonces, ¿de qué forma Magento determina el orden para “Mejor valor”? Pues de forma manual. Desde el backend, el administrador puede darle un valor a cada producto y así “ordenar manualmente” los productos que más le interese mostrar primero, segundo… hasta el último. ¿Y desde dónde damos los valores a cada producto? Está un poco escondido, pero sigue estos pasos:Paso 1. Accede a tu panel de administración de Magento.Paso 2. Accede al menú Catálogo / Administrar CategoríasPaso 3. Selecciona una categoría que te interese ordenar. Puedes dar un orden distinto según en la categoría que te encuentres.Paso 4. En las pestañas de la categoría, selecciona “Productos de la categoría”.Paso 5. En la tabla que lista los productos, observa la columna de la derecha, “Posición”. Aquí es donde puedes determinar los valores por los cuales ordenar los productos.

Page 37: Magento -generalidades

En realidad, esta forma de orden puede ser muy útil, ya que nos permite mostrar determinados productos en primeras posiciones, las cuales un cliente las verá en primer lugar. Si traduces “Best value” por otro concepto, por ejemplo “Recomendados”, ya tenemos una nueva forma de ordenación. Seguro que puede tener usos bastantes útiles. Ejemplo rebuscado: si vendemos camisetas de fútbol con el nombre impreso del jugador, podríamos ordenar por “Últimos goleadores”.

Esquinas redondeadas con DD_roundies

Publicado por Pablo Montero hace 1 año, 3 mess en: Desarrollo, Herramientas, Magento, Útiles

Page 38: Magento -generalidades

DD_roundies es uno de los muchos scripts que existen para redondear fácilmente las esquinas de algunos elementos que conforman el diseño de una página web. En mi opinión esta librería javascript es la más completa y eficaz en su desempeño: es super ligera (9Kb), establece directamente los radios de los navegadores modernos (-moz-border-radius, -webkit-border-radius, border-radius), soporte excelente para IE (excepto IE8), las reglas del redondeo se configuran en un momento, se puede desactivar el script si no quieres que funcione sobre Internet Explorer, y tiene múltiples funcionalidades que son explicadas por su autor en este post.Vamos a implementar DD_roundies con Magento en 4 pasos sencillos, y configuraremos varias reglas con un ejemplo rápido. En la siguiente imagen, tenemos a la derecha la caja de login en su diseño original del theme default, mientras que a la izquierda tenemos la caja de login redondeada con DD_roundies:

Esquinas redondeadas con DD_roundiesPaso 1. Descargar DD_roundiesDescárgate el javascript de la página del autor. Elige el  archivo comprimido pues sólo nos ocupará 9Kb. Desde tu navegador, puedes guardar el documento mediante el menú Archivo / Guardar como.http://www.dillerdesign.com/experiment/DD_roundies/#downloadPaso 2. Mover el javascript a nuestro skinYa tenemos guardado DD_roundies_0.0.2a-min.js, ahora cópialo a la carpeta skin/frontend/default/tu_theme/jsPaslo 3. Llamar al javascript desde el layoutPrimero abre el archivo page.xml, situado en app/design/frontend/default/tu_theme/layout. Y localiza el bloque <block type="page/html_head" name="head" as="head">Después de la última línea contenida en dicho bloque, introduce esta línea y guarda el archivo:<action method="addItem"><type>skin_js</type><name>js/DD_roundies_0.0.2a-min.js</name></action>Paso 4. Añade las reglas del script en head.Abre el archivo head.phtml, situado en app/design/frontend/default/tu_theme/template/page/htmlAl final del todo, pega el siguiente script que hemos usado en la imagen de ejemplo:<script> DD_roundies.addRule('.login-box .col-1, .login-box .col-1 .form-button', '18px', true); DD_roundies.addRule('.col-1 .content', '18px 18px 0 0', true);</script>

Page 39: Magento -generalidades

Como puedes observar, hemos añadido 2 reglas (una por cada línea). Cada regla tiene 3 valores (’valor1′, ‘valor2′, ‘valor3′), de los cuales los 2 primeros son obligatorios.Valor 1: especificas qué selectores CSS quieres redondear (puedes añadir más de un selector si los separas por comas). En el ejemplo, tenemos: .login-box .col-1 y .login-box .col-1 .form-button para la primera regla; y .col-1 .content para la segunda regla.Valor 2: especificas qué radio tienen las esquinas. 18px redondea las 4 esquinas a la vez, mientras que 18px 18px 0 0 redondea en éste orden: 18px la esquina superior izquierda, 18px la esquina superior derecha, 0px no redondea la esquina inferior derecha, y 0px no redondea la esquina inferior izquierda.Valor 3: si pone true, se aplicará el redondeo en todos los navegadores; por contra, si pone false, el redondeo no se aplicará en el  Internet Explorer.Para finalizar, pregúntate si te conviene aplicar esta técnica en tu diseño. Redondear las esquinas es un recurso más, que puedes o no utilizar para el aspecto visual de tu web. Redondear por redondear no va a mejorar un diseño mal planteado. Use at your own risk!

Customizando el Store Switcher

Publicado por Pablo Montero hace 1 año, 3 mess en: Desarrollo, Idioma, Traducción, Tutoriales, Útiles Vamos a ha dar un aire distinto a la selección de store view (generalmente, cada ‘vista de tienda’ se emplea como ‘vista de idioma’), que en el theme default de Magento viene presentada en forma de dropbox. Algo parecido a esto:

Ahora queremos presentarlo así: Una lista (mostrada en línea) de todos los store view (idiomas), y que cada uno

vaya acompañado de un icono-banderita. Rollover sobre los iconos-banderitas. Dar una clase selected a la la vista de tienda en la que nos encontramos.

En este ejemplo tenemos 3 store view, español (con clase selected), inglés y japonés:

Paso 1.Diseña o consigue tus iconos. En este ejemplo hemos usado el pack de famfamfam. Recuerda el rollover, para el estado normal del icono hemos duplicado la imagen y la hemos desaturado. Guarda los archivos en skin/frontend/default/tu_theme/images. Para este ejemplo, tenemos 6 archivos que los he llamado así:flag-en.gifflag-en-selected.gif

Page 40: Magento -generalidades

flag-es.gifflag-es-selected.gifflag-jp.gifflag-jp-selected.gifPaso 2.Edita tu archivo languages.phtml, situado en app/design/frontend/default/tu_theme/template/page/switch; reemplaza todo con lo siguiente y guarda:<?php if(count($this->getStores())>1): ?><div class="language-switcher"> <ul> <?php foreach ($this->getStores() as $_lang): ?> <li> <?php if($_lang->getId()==$this->getCurrentStoreId()): ?> <span class="<?php echo $_lang->getCode() ?> selected"> <?php echo $this->htmlEscape($_lang->getName()) ?></span> <?php else: ?> <a class="<?php echo $_lang->getCode() ?>" href="<?php echo $_lang->getCurrentUrl() ?>"> <?php echo $this->htmlEscape($_lang->getName()) ?></a> <?php endif; ?> </li> <?php endforeach; ?> </ul></div><?php endif; ?>Paso 3.Edita tu archivo boxes.css, situado en skin/frontend/default/tu_theme/css. Añade lo siguiente y guarda:.language-switcher li { display:inline; }.language-switcher a.es { background:url(../images/flag-es.gif) no-repeat; padding-left:20px; }.language-switcher .es.selected,.language-switcher a:hover.es { background:url(../images/flag-es-selected.gif) no-repeat; padding-left:20px; }.language-switcher a.en { background:url(../images/flag-en.gif) no-repeat; padding-left:20px; }.language-switcher .en.selected,.language-switcher a:hover.en { background:url(../images/flag-en-selected.gif) no-repeat; padding-left:20px; }.language-switcher a.jp { background:url(../images/flag-jp.gif) no-repeat; padding-left:20px; }.language-switcher .jp.selected,.language-switcher a:hover.jp { background:url(../images/flag-jp-selected.gif) no-repeat; padding-left:20px; }Listo. Sólo falta darle tus últimos retoques de CSS y con esto finaliza este minitutorial.P.D.: Me gustaría hacer lo mismo para el currency switcher (cambio de moneda), pero parece ser que funciona de otra forma. ¡Si alguien se anima que nos lo cuente!