[Solucionado] Posicion, titulos, detalle y precios de articulos

[redoli]

Muy buenas a todos, me gustaría modificar varios aspectos visuales cuando entro al catálogo de la tienda que estoy creando VestidosVintage, me gustaría que tanto los títulos descripciones cortas y botones de añadir a carrito y ver apareciesen debajo del articulo, para poder así poner 2 o 3 artículos por cada línea.

 

Me gustaría también poder cambiar el tamaño de las imágenes que se muestran en el catálogo ya que ahora mismo me parecen un tanto grandes, asi estaría todo algo mejor bajo mi punto de vista.

 

He estado buscando información pero no he encontrado mucho, mis conocimientos son bastante básicos y demasiado trabajo me ha costado hacer lo que veis ^^.

 

P.D: Tengo como arreglo imposible el cambiar la traduccion de Categories del menu de la izq, he probado dsd traducciones, traducciones de modulos, traducciones de front office, todos sitios, entrando desde ftp para editar directamente los archivos y no hay manera de quitar el maldito Categories, alguna idea?

Edited November 6, 2012 by redoli (see edit history)

[nadie]

Muy buenas a todos, me gustaría modificar varios aspectos visuales cuando entro al catálogo de la tienda que estoy creando VestidosVintage, me gustaría que tanto los títulos descripciones cortas y botones de añadir a carrito y ver apareciesen debajo del articulo, para poder así poner 2 o 3 artículos por cada línea.

 

Me gustaría también poder cambiar el tamaño de las imágenes que se muestran en el catálogo ya que ahora mismo me parecen un tanto grandes, asi estaría todo algo mejor bajo mi punto de vista.

 

 

¿Esto lo comentas en referencia a los listados de productos o no?

 

Un Saludo,

[nadie]

Si quieres dejar los listados de productos directamente en formato "Grid", tal como te enseño en esta imagen:

 

 

Depende como se te ve actualmente....

 

 

 

 

Haremos los siguiente...

[nadie]

Paso 1

 

Lo primero que vamos hacer es reducir las medidas de la imagen, en este caso actualmente coje el tipo "home", vamos hacer que coja el tipo "medium".

 

Para ellos vamos al fichero:

 

/themes/uhupage free021/product-list.tpl

 

Buscamos esto:

 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

 

Y lo dejamos asi:

 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'medium')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$mediumSize.width}" height="{$mediumSize.height}"{/if} />

 

Y Guardamos los cambios.

 

(Recuerda forzar compilación en tu panel panel de administración para que se apliquen los cambios al modificar un *.tpl)

[nadie]

Paso 2

 

Ahora veras que la imagen "se vera" mas pequeña...

 

En el paso 2, vamos a modificar el css.

 

Vamos a ir al fichero:

 

themes/uhupage free021/css/product_list.css

 

Buscamos esto:

 

ul#product_list li div.center_block {
float: left;
width: 80%;
}

 

Y lo dejamos asi:

 

ul#product_list li div.center_block {
width: 100%;
}

 

En el mismo fichero:

 

themes/uhupage free021/css/product_list.css

 

Buscamos ahora esto:

 

ul#product_list li {
background: none;
border: none;
padding: 6px;
min-height: 130px;
height: auto;
clear: both;
margin-bottom: 10px;
}

 

Y lo dejamos asi:

 

ul#product_list li {
background: none;
border: none;
padding: 6px;
min-height: 130px;
height: auto;
float:left;
margin-bottom: 10px;
width:31%;
}

[nadie]

Ahora en el mismo fichero:

 

themes/uhupage free021/css/product_list.css

 

Buscamos esto:

 

ul#product_list li div.right_block {
float: right;
width: 11em;
text-align: right;
margin-left: 1em;
margin-top: 0;
}

 

Y lo dejamos asi:

 

ul#product_list li div.right_block {
width: 12em;
margin-left: 1em;
margin-top: 0;
}

[nadie]

Por cierto,

 

¿Sigues por hay?

[nadie]

En el mismo fichero...

 

Busca esto:

 

 

ul#product_list li p.product_desc {
margin-bottom: 0;
font-size: 0.92em;
}

 

Y dejalo asi:

 

ul#product_list li p.product_desc {
margin-bottom: 0;
font-size: 0.92em;
height: 45px;
}

[nadie]

También puedes probar a usar directamente este modulo gratuito: http://www.prestashop.com/forums/topic/141303-free-prestashop-module-products-in-categories-as-list-or-grid-using-jquery/

[redoli]

Buenas nadie, lo primero de todo agradecerte la currada que te pegas y la predisposición que tienes para arreglar los problemas de los torpecillos como yo, te voy explicando lo que he ido haciendo siguiendo tus pasos,

 

Paso 1, no he encontrado la linea que me dijiste en el product.tpl de la plantilla que uso, pero he encontrado otra linea en un div img block y he supuesto que sería eso, así he dejado la modificación:

 

<div id="image-block">
 {if $have_image}
  <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'medium')}"
   {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />
 {else}
  <img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" />
 {/if}
 </div>

 

No aprecio ningún cambio en el tamaño de las imágenes por el momento, pero me gusta como queda, supongo que modificare los cambios del paso 1 y así quedará tal cual

 

He realizado todos los cambios en el product_list.css y todo ha quedado bastante bien

[redoli]

Pues listo, de momento todo bien, me quedan un par de cosillas que modificar, los tamaños de las imágenes de las subcategorías, quitar las imagenes de las familias de productos (bolsos, tocados etc.) y modificar lo de la traducción que ni idea como hacerlo, bueno seguiré investigando, muchas gracias por todo.

[nadie]

Buenas nadie, lo primero de todo agradecerte la currada que te pegas y la predisposición que tienes para arreglar los problemas de los torpecillos como yo, te voy explicando lo que he ido haciendo siguiendo tus pasos,

 

Paso 1, no he encontrado la linea que me dijiste en el product.tpl de la plantilla que uso, pero he encontrado otra linea en un div img block y he supuesto que sería eso, así he dejado la modificación:

 

<div id="image-block">
 {if $have_image}
  <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'medium')}"
{if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />
 {else}
  <img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" />
 {/if}
 </div>

 

No aprecio ningún cambio en el tamaño de las imágenes por el momento, pero me gusta como queda, supongo que modificare los cambios del paso 1 y así quedará tal cual

 

He realizado todos los cambios en el product_list.css y todo ha quedado bastante bien

 

Me referia al

 

product-list.tpl

 

no al

 

product.tpl