Jump to content

dejar 3 columnas en productos destacados

crisan

By crisan
in Discusión general

 Share

Recommended Posts

nadie Rookie

nadie

Posted
Posted

he intentado lo que he visto por el foro pero no consigo dejar tres columnas en vez de las cuatro qeu vienen por defecto

Yo te lo dire en base a la plantilla por defecto y bajo Prestashop 1.5

 

1º Paso,

 

Ir al fichero:

 

/modules/homefeatured/homefeatured.tpl

 

o en caso de que lo tengas sobreescrito en tu plantilla, deberias modificar el fichero:

 

 

/themes/tu-plantilla/modules/homefeatured/homefeatured.tpl

 

Usted debe buscar esto:

 

 

{assign var='nbItemsPerLine' value=4}

 

Y dejarlo asi:

 

{assign var='nbItemsPerLine' value=3}

 

2º Paso

 

Modificar el css del módulo para ampliar el ancho de cada producto en el bloque de productos destacados.

 

En el fichero:

 

/modules/homefeatured/homefeatured.css

 

Buscamos esto:

 

#featured-products_block_center li {
margin-right:10px;
padding:10px 0;
width:126px;
height:240px
}

 

y ampliamos el "width"

 

Es altamente recomendable hacer una copia del homefeatured.css dentro de la carpeta de la plantilla, en:

 

/themes/tu-plantilla/css/modules/homefeatured/homefeatured.css

 

para en caso de que actualizemos de version no se machaquen los cambios.

 

Tambien en caso de que no tengamos una copia del fichero *.tpl en tu plantilla, es recomendable hacerlo en:

 

/themes/tu-plantilla/modules/homefeatured/homefeatured.tpl

Link to comment
Share on other sites
crisan Rookie

crisan

Posted
  • Author
Posted

yo hago una copia externa de todo fuera del hosting en un hdd externo en mi pc

creo que tambien es buena formual tenerlo ahi guardado todo

voy a intentar poner en 3 columnas ahora y ya cuento como me ha ido

Link to comment
Share on other sites
crisan Rookie

crisan

Posted
  • Author
Posted

width:126px;

lo he dejado en 168 y parece que esta bien

aunqeu ahora las imagenes quedan un poco pequeñas para el hueco que hay

supongo se pueden hacer mas grandes y los espacios para la informacion de producto tambien quedan un poco cortas

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

width:126px;

lo he dejado en 168 y parece que esta bien

aunqeu ahora las imagenes quedan un poco pequeñas para el hueco que hay

supongo se pueden hacer mas grandes

 

Si, correcto.

 

Puedes ir a la pestaña Preferencias -> Imagenes, editar el tipo:

 

home_default

 

y ampliar las medidas.

 

(Aunque esto afectara a otras partes de la tienda que usen ese tipo de imagen)

 

Asi que la otra opcion para que solo afecte a productos destacados, es que crees en la pestaña Preferencias -> Imagenes, un nuevo tipo de imagen por ejemplo llamado:

 

homedesc

 

y por ejemplo coloca las medidas:

 

ancho: 169

 

altura: 169

 

Señala que solo afecte a los "productos".

 

Y guarda los cambios.

 

Y en la misma pestaña pulsa en regenerar miniaturas.

 

Ahora ve al fichero:

 

homefeatured.tpl

 

Busca esto:

 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />

 

y dejalo asi:

 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'homedesc')}" />

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

he echo lo que me has dicho pero no se han agrandado

no se cual es el motivo

 

http://www.electrocrisan.com/es/

 

Hola,

 

He visto que has creado el tipo:

 

homedesc

 

por que si entro aqui:

 

http://www.electrocrisan.com/80-homedesc/vu-solo2.jpg

 

me dice que existe la imagen.

 

Pero en el fichero *.tpl

 

/themes/default/modules/homefeatured/homefeatured.tpl

 

sigues teniendo esto:

 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />

 

cambialo por:

 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'homedesc')}" />

 

Y recuerda forzar compilacion en la pestaña Parametros Avanzados -> Rendimiento.

Link to comment
Share on other sites
crisan Rookie

crisan

Posted
  • Author
Posted

si le he realizado ademas entro en el archivo en el servidor y esta cambiado

hago una busqueda de lo otro y no aparece

ahora mismo lo tengo asi

 

$smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}"> <a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'homedesc')}" />

$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>

<h5 class="s_title_block"><a href="{$product.link}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h5>

<div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:65:'...'}</a></div>

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Recuerda que el fichero tpl a modificar es este:

 

http://www.electrocrisan.com/themes/default/modules/homefeatured/homefeatured.tpl

 

no este:

 

 

http://www.electrocrisan.com/modules/homefeatured/homefeatured.tpl

Link to comment
Share on other sites
crisan Rookie

crisan

Posted
  • Author
Posted

Hola si era ese el problema ya se ven las imagenes mas grandes ahora ya estan bien

aunque ahora tengo otro problema

yo modifique toda la parte de abajo se la quite y puse parte la paguina en el color que sale abajo del todo

y no se por qeu motivo ahora me aparece ese color en la parte de abajo

y quisiera darle mas espacio por que se superponen casi unos productos con toros

te doy las gracias por toda tu ayuda

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Hola si era ese el problema ya se ven las imagenes mas grandes ahora ya estan bien

aunque ahora tengo otro problema

yo modifique toda la parte de abajo se la quite y puse parte la paguina en el color que sale abajo del todo

y no se por qeu motivo ahora me aparece ese color en la parte de abajo

y quisiera darle mas espacio por que se superponen casi unos productos con toros

te doy las gracias por toda tu ayuda

 

Hola !

 

Si ahora ya veo que ya se te ve

 

Te recomiendo reducir un poco el ancho del tipo de imagen que has definido, por que se queda pegado. (Recuerda Pestaña Preferencias -> Imagenes)

 

Por otro lado, aumenta el alto ahora de la cajita del producto, ve al fichero:

 

modules/homefeatured/homefeatured.css

 

Busca esto:

 

#featured-products_block_center li {
margin-right:10px;
padding:10px 0;
width:168px;
height:260px
}

 

(Que es como lo has dejado ahora)

 

Y dejalo asi:

 

#featured-products_block_center li {
margin-right: 10px;
padding: 10px 0;
width: 168px;
height: 309px;
}

 

(Como ahora la imagen es mas "alta", por eso aumentamos la altura de las cajas de los productos)

Link to comment
Share on other sites
crisan Rookie

crisan

Posted
  • Author
Posted

ya esta si señor el ancho le he dejado en 160 y el height en 309 como me indicas ahora creo que esta perfecto

 

se puede remarcar un poco mas los bordes de las imagenes

pasi no se ven

y si se puede poner un borde a todo el producto para asi diferenciar unos de otros

que casi se confunden

ojo el trabajo que te estoy dando

muchisimas gracias de nuevo yo nome importa trastear pero no controlo lo suficiente como para hacerlo

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

ya esta si señor el ancho le he dejado en 160 y el height en 309 como me indicas ahora creo que esta perfecto

 

se puede remarcar un poco mas los bordes de las imagenes

pasi no se ven

y si se puede poner un borde a todo el producto para asi diferenciar unos de otros

que casi se confunden

ojo el trabajo que te estoy dando

muchisimas gracias de nuevo yo nome importa trastear pero no controlo lo suficiente como para hacerlo

 

Haz esto mejor.

 

 

Como te dije arriba te recomiendo reducir el ancho del tipo de imagen que has creado un "Poquito", para que se vea el borde de la imagen completa (ahora veras que se ve cortado). (Recuerda Pestaña Preferencias -> Imagenes, editar el tipo que has creado, reducir la anchura un poco y regenera miniaturas)

 

Si quieres cambiar el color del borde la imagen que ahora es gris, modifica el fichero:

 

http://www.electrocrisan.com/themes/default/css/global.css

 

Busca esto:

 

.products_block li img {
border: 1px solid #d1d1d1;
}

 

y dejalo asi:

 

.products_block li img {
border: 1px solid #201f1f;
}

 

Asi depende gris claro, el borde la imagen lo veras con un color mas oscuro.

 

(Pero haz lo que te he comentado de recucir el ancho del tipo de imagen un poco)

Link to comment
Share on other sites
crisan Rookie

crisan

Posted
  • Author
Posted

lo que digo no paras de sorprenderme

ya esta eso tambien solucionado

me ha puesto todos los cuadros incluidos los de otros modulos mas oscuros

podriamos poner que todas las letras se vieran en negro en vez de en gris

yo he conseguido poner algunas como veras pero otras no las encuentor donde modificarlas

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

lo que digo no paras de sorprenderme

ya esta eso tambien solucionado

me ha puesto todos los cuadros incluidos los de otros modulos mas oscuros

podriamos poner que todas las letras se vieran en negro en vez de en gris

yo he conseguido poner algunas como veras pero otras no las encuentor donde modificarlas

 

Por lo que veo en tu web en el bloque de productos destacados ya se ve negro el color del nombre del producto y la descripcion.

 

¿no?

Link to comment
Share on other sites
crisan Rookie

crisan

Posted
  • Author
Posted

si eso lo he conseguido hacer yo modificando los colores en el css de cada modulo en algunos ya lo he echo como ves pero otros no consigo encontrarlo te preguntaba por si habia alguna forma general para que todos aparecieran en negro en todos los modulos

por qeu modulo a modulo lo se hacer aunqeu como ves el modulo de productos mas vistos no he sido capaz de encontrar donde

por eso te preguntaba por si habia alguna forma de hacerlo general a todos los modulos

Link to comment
Share on other sites
crisan Rookie

crisan

Posted
  • Author
Posted (edited)

alguien puede decirme como centrar los bloques de productos dentro de productos destacados he cambiado de 4 a 3 productos pero ahora me aparecen un poco descuadrados unos de otros

tambien le he puesto el boton de comprar ahora y ahi es donde msa se ve que se juntan unos con otros pero no son los botones de compra ahora sino el bloque completo

www.electrocrisan.com

Edited by crisan (see edit history)
Link to comment
Share on other sites
crisan Rookie

crisan

Posted
  • Author
Posted

sigo teniendo los bloques de los productos descolocados dentro de productos destacados y he probado a quitar le ancho en la imagen central

he probado a darle menos pixeles

pero es muy raro por qeu el primer bloque de tres esta bien colocado y los dos siguientes no

y el ultimo tambien esta bien colocado

a ver si alguien me puede ayudar y damos por cerrado este tema

 

www.electrocrisan.com

Link to comment
Share on other sites
Sergio Ruiz Newbie

Sergio Ruiz

Posted
Posted

Pinchaba la mosca por aqui por simple curiosidad

 

Reducir ancho boton comprar producto destacados:

 

modules/homefeatured/homefeatured.css

 

#featured-products_block_center li .ajax_add_to_cart_button {
display: block;
}

 

Por

 

#featured-products_block_center li .ajax_add_to_cart_button {
display: block;
width:111px;
}

Link to comment
Share on other sites
crisan Rookie

crisan

Posted
  • Author
Posted (edited)

no veo el boton para adjuntar la imagen pero si te fijas en los productos centrales los tres primeros estan bien centrados

y los tres ultimos tambien

pero los tres que hay en la segunda fila y la tercera si te fijas el bloque central esta desplazado hacia la izquierda en el segundo y en el tercero hacia la derecha

post-492509-0-65866200-1364602346_thumb.png

Edited by crisan (see edit history)
Link to comment
Share on other sites
Sergio Ruiz Newbie

Sergio Ruiz

Posted
Posted

no veo el boton para adjuntar la imagen pero si te fijas en los productos centrales los tres primeros estan bien centrados

y los tres ultimos tambien

pero los tres que hay en la segunda fila y la tercera si te fijas el bloque central esta desplazado hacia la izquierda en el segundo y en el tercero hacia la derecha

 

No veo nada desplazado en la imagen que adjuntas.

Link to comment
Share on other sites
crisan Rookie

crisan

Posted
  • Author
Posted (edited)

a ver si alguien me esplica como solucionar qeu he cambiado de 4 productos a tres en productos destacados

y ahora si empiezo de arriba hacia abajo contando cada 4 productos me junta el cuatro con el quinto se que es algo que hay que hacer en pagination.php pero no se como hacerlo ni donde hay que hacerlo

Edited by crisan (see edit history)
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

El usuario Rubalcaba tiene toda la razon, cuando comenta lo del nombre y la descripcion.

 

No se ve descuadrado en ningun momento.

 

El nombre se amontona y la descripcion se amontona y queda menos o mas espacios dependiendo del espacio que haya ocupado la descripcion del producto, ya que hay un height fijo para la descripcion en el fichero:

 

modules/homefeatured/homefeatured.css

 

Aqui:

 

#featured-products_block_center .product_desc {
height: 45px;
}

 

 

(Tocar ese height es peligroso, ya que si lo tocas de forma no correcta, si es posible que se te descuadre de verdad)

 

Tambien tienes una altura fija para el nombre del producto (height), definida aquí:

 

#featured-products_block_center .s_title_block, #featured-products_block_center h5 {
padding-top: 5px;
height: 30px;
font-size: 12px;
color: #222;
padding-bottom: 0;
font-weight: bold;
}

 

 

 

Si quieres reducir los caracteres del titulo y la descripcion, en el fichero:

 

http://www.electrocrisan.com/themes/default/modules/homefeatured/homefeatured.tpl

 

Busca esto:

 

{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}

 

y reduce el truncate del titulo del producto, ahora esta a 35

 

Y busca esto

 

{$product.description_short|strip_tags|truncate:65:'...'}

 

y reduce el truncate de la descripcion del producto.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

no me refiero al nombre o la descripcion pienso que puede ue sea yo muy meticuloso pero no entiendo como no ven que el cuadrado de la foto de arriba no corresponden en su vertical con el cuadrado de abajo

 

Es debido a lo que te he dicho.

Link to comment
Share on other sites
crisan Rookie

crisan

Posted
  • Author
Posted (edited)

mi homefeactured.css esta asi

 

#featured-products_block_center li {

margin-right:4px;

padding:10px 0;

width:168px;

height:350px

}

#featured-products_block_center li.last_item_of_line {margin-right:0;}

#featured-products_block_center .s_title_block, #featured-products_block_center h5 {

padding-top:5px;

height:30px;

font-size:12px;

color:#222;

padding-bottom: 0;

font-weight:bold;

}

 

#featured-products_block_center .product_image {

display:block;

position:relative;

overflow:hidden

}

#featured-products_block_center .product_image span.new {

display: block;

position: absolute;

top: 15px;

right:-30px;

padding: 1px 4px;

width: 101px;

font-size:10px;

color: #fff;

text-align: center;

text-transform: uppercase;

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-o-transform:rotate(45deg);

/*-ms-transform: rotate(45deg);*/

background-color: #990000;

transform: rotate(45deg); /* Newer browsers */

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

}

 

.ie9 #featured-products_block_center .product_image span.new{top:-18px;right:-38px}

.ie8 #featured-products_block_center .product_image span.new{top:-21px;right:-38px}

.lt-ie6 #featured-products_block_center .product_image span.new {top:-30px;right:-25px}

 

#featured-products_block_center .product_desc {height:45px;}

#featured-products_block_center .product_desc,

#featured-products_block_center .product_desc a {

color:#000;

}

#featured-products_block_center .lnk_more {

margin-top:12px;

margin-bottom:10px;

display:inline-block;

padding-right:10px;

font-weight:bold;

font-size:12px;

color:#0088cc;

background:url(img/arrow_right_1.png) no-repeat 100% 3px;

}

#featured-products_block_center .price_container {

margin-top:4px;

padding:0;

background:#fff;

margin-bottom:20px;

}

#featured-products_block_center .price {

font-weight:bold;

font-size:14px;

color:#990000

}

#featured-products_block_center li .ajax_add_to_cart_button {display:block;}

#featured-products_block_center li span.exclusive {display:block;}

#featured_products .exclusive.ajax_add_to_cart_button {

margin:auto;

}

 

 

aqui lo que toco siempre tengo una copia de el para restaurar no me gusta tocar nada sin tener copia

Edited by crisan (see edit history)
Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...