Saltear al contenido principal

Theme switcher

Una de las novedades que trae osCommerce 2.3.1, en el admin, es el «theme switcher», una forma fácil de cambiar de diseño en nuestro nuevo osCommerce.

Se necesita conocer oscommerce de antemano y las carpetas incluídas.

Instalación 5 minutos.

Los pasos a seguir vienen dentro del archivo comprimido, en el manual pdf que incorpora, aunque esta en inglés, es fácil de comprender.

Añadir las 2 carpetas nuevas dentro de Admin e includes.

Para descargar el módulo lo podemos hacer desde este enlace directo  aquí

Vamos a añadir nuestros diseños:

Abriremos este enlace:

http://jqueryui.com/themeroller/

Una vez en la página veremos en la parte izquierda 3 etiquetas:

1- Roll your own: desde donde crearemos nuestros propios diseños que luego descargaremos

2- Gallery: plantillas ya creadas que podremos descargar

3- Help: ayuda para trabajar con los diseños

Para que no sea eterno este tutorial, vamos a elegir de la segunda pestaña un diseño que nos guste y le daremos al botón de descarga que viene debajo de la miniatura.

Asegurarnos que descargamos la versión 1.8.9 en el panel derecho (en el momento de realizar este tutorial),

Descargamos la versión 1.8.9 del diseño elegido y descomprimimos el archivo donde desees.

Una vez descomprimida la carpeta, pinchamos en la carpeta «development-bundle», posteriormente en la carpeta «theme» y veremos 2 carpetas más, una llamada base y otra es el nombre de la plantilla o diseño elegido, esta última carpeta la incluiremos dentro de catalog(o como la llamemos a dicha carpeta)->ext->jquery->ui.

Una vez incluida deberemos modificar dentro de la carpeta buscaremos la hoja de estilo llamada:

jquery-ui-1.8.9.custom.css y remombrarla por jquery-ui.1.8.6.css

Ahora vamos a nuestro admin de oscommerce y entramos en módulos, dentro de la pestaña de módulos iremos a «encabezados de etiquetas» o en inglés «header tags».

A la derecha y arriba tendremos un botón de instalar módulo, pinchamos en él y le diremos que instale «theme switcher».

Una vez instalado el módulo, lo seleccionamos y lo editamos.

theme switcher miniatura

Dentro vais a ver un desplegable y, ahí podremos elegir los temas que tengamos instalado, selecciona el que quieras y luego ve al front-end y, verás como cambia el diseño.

diseño oscommerce

En la imagen superior e inferior a estas líneas pueden ver la diferencia de diseño, también comunicaros que estoy investigando las novedades y dichas imágenes las he modificado utilizando los estilos y algunas paginas php, como aumentar el tamaño de la cabecera y eliminar la columna derecha, por lo que no debe ser igual a la vuestra

diseño oscommerce eggpant

Pueden descargar el módulo o contribución desde aquí

Samuel

Consultor SEO, diseñador web, 2D y 3D, CSS. Apasionado de los gestores de contenido como oscommerce y wordpress, así como de la accesibilidad y usabilidad web. Vivo en Madrid, España. Sigueme en Twitter

Esta entrada tiene 3 comentarios
  1. Hola samuel, tengo un promblema, logre instalar el modulo de temas pero ahora no me sale el tema, segui tus paso y lo pegue en el catalogo y nada que aparece! sera que el tema se debe pegar en otro lugar?? por favor respondeme porque es para un trabajo que estoy haciendo. gracias por tu ayuda!

  2. No, la ruta es la correcta.
    Así de pronto, modificastes el css del tema que descargastes?
    Modificastes el tema css original?

    Puede que el css original dentro de la carpeta «ui» tenga otra numeración… y deberás elegir esa numeración para tu tema.

    Aún así, verifica todo pues se que en la web de oscommerce han salido varios theme switcher,
    dime cual te haz descargado para hecharle un ojo y verificarlo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Volver arriba