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

 2. Configuración de la base de datos

3. Creación usuario Admin

8. 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
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 Tienda

Solució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.
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
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)

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 2. Bloques de contenido
Diagrama 1. Bloques estructurales (en azul)
(en naranja)
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
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
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
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” )
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.
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
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
Diagrama 4
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
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
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 4
Tabla 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_t
emas_de_magento
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
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í:
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.
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
 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
nuestros clientes y poder resolver aquellas dudas que puedan tener.
De esta manera, ofrecemos a nuestros compradores una mayor
seguridad y confianza.
Podéis encontrar más detalles del plugin aquí.

Nuevo plugin en MagentoConnect:

Funciones de mantenimiento
Publicado por grander hace 1 año, 8 mess en: Configuración, Idioma, Magento,
Magento Connect, Novedades, Plugins
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
Los más vendidos, plugin Magento
Nuevo 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
 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:
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.
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();

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í.
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 1
Nos descargamos los archivos necesarios. Podéis hacerlo en la página
oficial (la segunda opción, archivos necesarios) o directamente aquí.
Paso 2
Suponiendo 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/build
yourdomain.com/js/sb/images
yourdomain.com/js/sb/src
Paso 3
Ahora 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.css
Paso 4
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.gif
yourdomain.com/skin/frontend/default/default/images/sb/loading-light.gif
yourdomain.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>

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/pr
oduct/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

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

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
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
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ías
Paso 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.
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
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_roundies

Paso 1. Descargar DD_roundies
Descá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/#download
Paso 2. Mover el javascript a nuestro skin
Ya tenemos guardado DD_roundies_0.0.2a-min.js, ahora cópialo a
la carpeta skin/frontend/default/tu_theme/js
Paslo 3. Llamar al javascript desde el layout
Primero 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/html
Al 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>
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.gif
flag-en-selected.gif
flag-es.gif
flag-es-selected.gif
flag-jp.gif
flag-jp-selected.gif
Paso 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!