3 Columnas Con Modern Theme

[evuska]

hola,

A ver si podéis ayudarme de nuevo ... perdonad que sea tan preguntona :-(

a ver tengo el modern theme pero necesito que esté estructurado en 3 columnas. buff pues no hay forma de conseguirlo.

Gracias a este post: http://www.magentocommerce.com/boards/viewthread/10024 lo tengo medio conseguido pero aún no se me ajusta del todo bien.

os adjunto unas imagenes para que veáis como se ve mi listado de productos y mi pagina de producto.

Creo que el problema para el listado de productos puede estar a nivel de css pero por mucho que modifique el width del estilo ".col-main" no hay ningún cambio en la web :-( ayyy ya no se que más probar.

¿lo habéis conseguido vosotros?

Os agradecería mucho que me echárais una mano

graciaaaaaaaaaas!!

 

[Larry]

No desistas en tu entusiamos de crear tu tienda online :contento2: yo ara tres meses que empece con esto y con constancia y paciencia acabaras pilandole los cuernos al toro jejeje.

Segun veo en tu frontend se te esta comiendo la columna derecha tu grid de articulos.

Prueba una cosa: en sistem > Configuracion > Catalogo hay un menu que es frontend. En el se muestra como apareceran tus productos por defecto en tu home. Prueba de modificar esos parametros a ver si consigues algo.

Por otro lado puede que tengas algo de los Layouts mal configurado. Mira en el Layout de catalogo.xml si tienes:

 <catalog_product_view>
        <!-- Mage_Catalog -->
        <reference name="root">
            <action method="setTemplate"><template>page/3columns.phtml</template></action>
        </reference>
        <reference name="head">
            <action method="addJs"><script>varien/product.js</script></action>

tiene que tener que el template que coje es el de 3 columnas. es importante si no alomejor se te desconfigura como te pasa ahora mismo.

Tambien busca esta entrada en el mismo xml y configurala con tu template de 3 columnas:

    <catalog_product_send>
        <!-- Mage_Catalog -->
        <reference name="root">
            <action method="setTemplate"><template>page/3columns.phtml</template></action>
        </reference>

Ya me contaras :D

 

[evuska]

gracias por responder Larry!!

jaja eso con paciencia lo acabaré pillando :-D La verdad es que llevo poquito trasteando con magento y estoy encantada pero siempre hay alguna cosilla que se tuerce y parece que no sale.

En cuanto a lo que me comentas, ya revise los layouts para asegurarme que tiran del template de 3 columnas y en realidad si parece que lo hace, solo que ahora el contenido central no lo reajusta al nuevo espacio.
En los dos bloques que comentas del catalog.xml yo tenia la etiqueta vacía asi:
<reference name="root">
</reference>
pero si pongo lo que tu dices no cambia nada de nada :-(

una dudilla:
en el fichero 2columns-left.phtml que viene con el modern theme aparece esta línea:
<div class="middle layout-2columns">
----

no entiendo que esté aplicando a ese <div> el estilo "layout-2columns" ¿dónde está definido ese estilo para este theme?? no entiendooooooo


bueno seguiré trasteando a ver si doy con ello.

 

[Larry]

A ver si entiendo... que tipo vista quieres aplicar, la de tres columnas (3column.phtml) o la de ua columna central y una a la izquierda (2colum-left.phtml)? la cosa cambia segun el formato que estes utilizando.

 

[evuska]

jeje ya te he liado no? :-D

lo que necesito es que se vea en 3 columnas (3columns.phtml), lo unico que antes preguntaba que por qué en la vista de 2 columnas con una a la izqda se esta usando un estilo "layout-2columns" que yo no tengo en ningún css :-(. Esto solo era una dudilla que me habia surgido intentando montar lo de las 3 columnas.

bueno pues despues de tanto probar al final parece que me va saliendo, para solucionar el problema en el listado de pdtos he editado list.phtml para hacer que muestre solo 3 productos por línea en la vista de cuadrícula (igual que hace el default theme) en lugar de 4 por fila. Asi ya he conseguido que el contenido del centro se ajuste y no se solape con la nueva columna de la derecha.

También he tenido que tocar algun estilo mas en boxes.css y la cosa parece que marcha bien :-D

bueno por lo menos espero que a alguien le sirva de ayuda.

gracias Larry por el interés :-D :-D :-D

 

[Larry]

respondiendo a tu pregunta sobre los css, en realidad en boxes.css aparecen estos estilos:

.col-left { width:220px; float:left; }
.col-main { float:left; }
.col-right { width:220px; float:right; }
.col-1-layout .col-main { float:none; margin:0; }
.col-2-right-layout .col-main { float:left; width:685px;  }
.col-2-left-layout .col-main { float:right; width:685px; }
.col-3-layout .col-main { width:475px; margin-left:17px;  border:1px solid #c4c1bc;}

Almenos son los que me aparecen en mi boxes.css
Si te fijas en el col-3-layout, que supuestamente es el estilo que vas a utilizar aparecen como estilo interno el .col-main, que hace referencia a la columna central de tu pagina. en ella se especifican los parametros de anchura, margen izquierdo, tamaño del borde y color del borde. Estosson mis parametros, evidentemente tu tienes que crear el estilo que te convenga a ti.

No dudes en postear si tiene smas preguntas. Suerte :jeje:

 

[carconper]

Hola a tod@s:

Soy relativamente nuevo en Magento y totalmente nuevo en el foro. He estado buscando sobre el tema y como no he encontrado solucion y tambien tiene que ver con el tema de la visualizacion en 3 columnas del template Modern pues he decidido postear aqui y plantear mi duda en lugar de abrir un nuevo post. A ver si podeis orientarme un poco o hecharme una mano.

Es sencillo de explicar asique no me extendere. Mi problema es que cuando pongo la visualización en 3 columnas para el template modern la página de inicio, la que se abre directamente al acceder a mi tienda Magento, aparece totalmente en blanco. No carga absolutamente nada de nada.

¿Teneis idea de a que puede deberse esto? ¿Alguna idea del archivo al que puedo hecharle un vistazo para ver que ocurre? El boxes.css ya lo he mirado y remirado, y de momento es lo unico que he tocado, estilos en cascada. No me he metido mas a fondo en los archivos XML y phtml. Pero bueno, no creo que esto sea ningun problema de css.

Bueno, doy las gracias por adelantado.

Un saludo

 

[Xarlie]

Me suena que había que copiar el fichero 3columns.phtml del theme default al theme modern.

 

[carconper]

Perdona que no te haya respondido antes para darte las gracias, he andado fuera en el puente. Pero lo dicho muchisimas GRACIAS!

El problema se ha solucionado parcialmente. Ahora si que se me carga la página de inicio pero totalmente desestructurada. Para que veais a que me refiero os pego un par de imagenes ya que ponerme a explicarlo puede resultar confuso :bleh:


Esta imagen muestra como queda la página con la opcion de "2 columns with left bar":

La segunda imagen muestra el cambio que se da cuando cambiamos a "3 columns". Desaparece el recuadro blanco central y se desplaza todo el contenido, todos los bloques a la izquierda. Ademas el menu superior desaparece (la barra azul superior en la que se encontraban los links de Mi cuenta, My wishlist, Cesta de la compra ... junto con la barra de busqueda inferior.

Cuando accedes a alguna de las categorias del menu vertical estando en el modo 3 columns, la página vuelve a verse bien. Es decir, unicamente se "desestructura" la pagina principal, la que se carga al acceder al sitio.

¿Teneis idea que es lo que puede ser? ¿Que archivos tienen influencia en este tipo de cambios?

Y una ultima preguntilla... que CSS's permiten modificar los fondos (tanto el gris de fondo sobre el que se encuentra todo, como el blanco de la zona central)?

Una vez más gracias @Xarlie por responderme tan rapido y gracias a tod@s los que hayais leido esto.

Un saludo :ok:

 

[Xarlie]

En principio seguramente sea porque los estilos se llaman de forma diferentes en una página y en otra, ahora bien, si comentas que luego con las 3 columnas se ve bien...

Para ir poco a poco, revisa que en ambas páginas con 3 columnas se llama a los mismos ficheros que forman la estructura y los estilos son los mismos.

 

[evuska]

hola carconper!

yo también tuve un poco de jaleillo hasta conseguir ver el modern theme con 3 columnas pero al final lo conseguí :-D
En mi caso la home no la tengo a 3 columnas asi que no se si te voy a poder ayudar.

Para conseguir ajustar bien todo a 3 columnas yo tuve que tocar varios estilos de boxes.css (no te puede decir cuales exactamente pero si quieres te paso el ficherito) y también edite “app\design\frontend\default\modern\template\catalog\product\list.phtml” para mostrar 3 productos por línea en la vista de cuadrícula en lugar de 4 porque si no, no entraban.

 

[carconper]

Muchas gracias a los 2 por vuestra respuesta. Voy a ponerme a toquetear basandome un poco en las orientaciones que me habeis dado. A ver si consigo algo. Os mantendre informados. :cerveza:

 

[carconper]

Aqui estoy de nuevo en las andas. Llevo ya un tiempo haciendome a Magento. lo suyo me esta costando pero me voy dando cuenta que merece la pena emplear todo este tiempo comprendiendo como funciona todo para despues poder sacarle el maximo partido.

Sigo mas o menos con el mismo problema.

Ya copie el archivo 3columns.phtml del default al modern. Con esto no era suficiente asique adecue el 3columns.phtml del modern a mi gusto para que las cosas apreciesen como yo queria.

Tambien hice los cambios oportunos en app\design\frontend\default\modern\template\catal og\product\list.phtml para mostrar 3 productos por linea en lugar de 4. La cuestion es que ahora la pagina esta estructurada tal y como quiero que este pero ... Siempre hay un pero.

El problema es que en la columna derecha no se muestra nada de nada. Para comprobar que dicha columna realmente está ahí, vamos que existe, he modificado el estilo correspondiente a right-col en boxes.css para ponerle un color de fondo llamativo y ver si asi se veia algo. Este es el resultado:

Como se puede comprobar la columna derecha está ahí, porque el color rosa que he asignado a right-col para el background se puede ver. Pero no se ve el contenido que deberia verse en dicha columna. Pego a continuacion el contenido del fichero right-col.phtml (dentro de ../modern/template/callouts/ )

<div class="box">
    <img src="<?php echo $this->getSkinUrl('images/media/col_right_callout.jpg') ?>" width="195" alt="<?php echo __('Keep your eyes open for our special Back to School items and save A LOT!') ?>" style="display:block;" />
	{{block type="cms/block" block_id="registro"}}
</div>

No se ve ni la imagen que deberia verse (col_right_callout.jpg) ni el bloque estatico de nombre registro que he creado.

Sabeis cual puede ser el problema? He intentado cargar el template de 2columns-right para ver si era problema del 3columns que yo he medio creado, pero ocurre lo mismo, no se carga nada en la columna derecha.

Gracias por adelantado

 

[carconper]

Y se me olvidaba...aprovechando la imagen que he colgado... ¿como se quitan los recuadros rojos punteados de al rededor de las palabras en las que aparecen?

 

[Xarlie]

Eso es que en los layouts no tienes definido nada para esa columna, o que la columna no se llama "right".

Lo de los puntitos es la traducción inline de Magento. Tienes que desactivarla desde el menú de configuración.

 

[carconper]

¿Y cómo puedo saber cual es el nombre de dicha columna? Esque me estoy liando un poco. El contenido de ambas columnas donde se establece exactamente?

page.xml define el contenido de la pagina en general y catalog.xml para la navegacion por los productos, no?

en page.xml se definen dos bloques

<block type="core/text_list" name="left" as="left"/>
y
<block type="core/text_list" name="right" as="right"/>

pero estos bloques a que archivo phtml hacen referencia? O simplemente se define el bloque?

El contneido de la columna izquierda y derecha supuestamente estan definidas en los archivos left_col.phtml y right_col.phtml dentro de la carpeta callouts?

Siento el desbarajuste de preguntas pero esq no me aclaro ni yo :S

Gracias por todo Xarlie ;)

 

[Xarlie]

No llaman a un fichero sino a un bloque, que se llama right, left... después los bloques se rellenan con pequeñas zonas, verás que dentro de cada bloque hay diferentes módulos y lo mejor es que estos módulos se pueden llamar desde otras secciones. De esta forma puedes definir una serie de módulos para toda la web (page) y después en la zona de checkout otros módulos en la misma zona, que sólo se cargarán en checkout.

Los callouts, son... como decirlo... "llamadas extras", en la tienda demo es por ejemplo el perro ese que sale :) Se utiliza para meter banners, contenidos adicionales, etc...

 

[carconper]

Muchas gracias Xarlie por tus sabias palabras!! Es un placer que alguien este tan dispuesto siempre a ayudar y a responder.

Bien, entonces, tengo en mente crear un modulo para situarlo en la columna derecha. Un modulo de registro. El tipico de meter usuario y contraseña. En lugar de para realizar el registro, redireccionar al usuario a una pagina independiente de registro, me gustaria crear dicho modulo de manera que pueda realizar el registro directamente en el lugar de la pagina que se encuentre... Lo ves viable? O lo ves muy complicado??

deberia de crear un phtml como los hay para los modulos de comparativa, cesta de la compra, newletter, etc. Una vez hecho esto, desde donde debería de cargar este archivo? Que otros archivos deberia de crear y/o modificar?

Es para saber por donde comenzar... y para tener una idea de si lo veis muy complicado.

Por mi parte nada más y @Xarlie, una vez mas gracias, y espero poder ayudarte con algo algun dia yo tb!

[No se si este post esta un poco offtopic... pero es por seguir el hilo de la contestacion de Xarlie. Si esta offtopic mis disculpas con antelacion]

 

[Xarlie]

La opción más fácil es crear un bloque y llamar al bloque. En el foro ya hemos hablado varias veces de como crear bloques y como hacer referencia a ellos. Básicamente se llama desde los ficheros de layout por su identificador (el que le asignas al crear).

 

[carconper]

Ok. Muchas gracias una vez mas! Hechare un vistazo mas detenidamente al foro completo!

Un saludo