Cambiar tamaño de imágenes y columnas

weixach · November 8, 2013

Hola

Alguien sabe como podría modificar para que las imagenes de los productos cuando entro en una categoria y me sale el listado se vieran más grandes (sin la necesidad de entrar en el producto) y si es posible poner dos columnas de productos.

Me gustaria que fuera ms visual y eso me ayudaria

Adjunto una foto de como lo tengo ahora para quien pueda ayudarme se haga una idea.

Muchas gracias

nadie · November 8, 2013

Lo de los productos en cuadricula o columna, mira esta guía de vekia: http://mypresta.eu/en/art/developer/prestashop-products-list-grid-view.html

Referente a las imágenes de los productos en el listado de productos, usan el tipo llamado:

home_default

que puedes cambiar las medidas en la pestaña Preferencias -> Imagenes y luego regenerar las miniaturas de ese tipo.

Pero recomiendo, crear mejor un nuevo tipo de imagen en la misma pestaña Preferencias -> Imagenes, y luego asignarsela a la imagen de los productos en el fichero product-list, como explico en esta guía: http://victor-rodenas.com/2012/09/30/guia-crear-un-nuevo-tipo-de-imagen-y-asociarlo-en-prestashop-1-5/

weixach · November 8, 2013

muchas gracias!!!!!

weixach · November 8, 2013

Lo he seguido bien lo único que me he perdido es donde tengo que ir y modificar el texto.

Donde tengo que ir para modificar el texto?

Gracias

nadie · November 8, 2013

Lo he seguido bien lo único que me he perdido es donde tengo que ir y modificar el texto.

Donde tengo que ir para modificar el texto?

Gracias

En la misma captura que adjuntas, te dice el fichero.

Es decir, fichero:

/themes/plantilla/product-list.tpl

weixach · November 8, 2013

Disculpa mi ignorancia pero estoy iniciando en todo eso y no se que es themes/plantilla/product-lisy.tpl.

tengo que utilizar el programa que te permite entrar en en las carpetas de la pagina y ver todo la pagina en formato HTM y modificarlo. O hay alguna forma directa desde mi pagina dentro de administrador?

nadie · November 8, 2013

Disculpa mi ignorancia pero estoy iniciando en todo eso y no se que es themes/plantilla/product-lisy.tpl.

tengo que utilizar el programa que te permite entrar en en las carpetas de la pagina y ver todo la pagina en formato HTM y modificarlo. O hay alguna forma directa desde mi pagina dentro de administrador?

¿No tienes acceso al FTP para bajarte los ficheros de tu tienda?

Yo por ejemplo para conectarme al ftp, uso filezilla: https://filezilla-project.org/ y coloco los datos que me pasa el hosting, o los datos que creo en el panel del hosting para acceder al ftp. (Hablo del panel del hosting, no de prestashop)

weixach · November 8, 2013

logradooo eres un crac!!!!

Se puede regular para que la info de al lado de la foto se amplíe? Ahora la foto esta perfecta pero el texto de al lado me queda súper estrecho creo que quedaría mejor si la información se viera en la parte de abajo de la foto. Hay modo alguno?

Referente al link que has enviado antes sobre como poner dos columnas no lo he entendido mucho. Entiendo que tengo que entrar en el acceso HTP pero no comprendo el procedimiento que pone en la pagina.

Gracias

nadie · November 9, 2013

logradooo eres un crac!!!!

Se puede regular para que la info de al lado de la foto se amplíe? Ahora la foto esta perfecta pero el texto de al lado me queda súper estrecho creo que quedaría mejor si la información se viera en la parte de abajo de la foto. Hay modo alguno?

Gracias

Hola !

Puedes aumentar la parte donde se encuentra la foto y la descripción, si en tu fichero:

/themes/plantilla/css/product_list.css

Busca esto:

#product_list li .center_block {
   float: left;
   padding:0 7px;
   width: 342px;
   border-right:1px dotted #ccc
}

y ese "widh" lo aumentas.

Luego logicamente reduces el width del:

#product_list li .right_block {
	position:relative;
   float: left;
   width: 145px;
   text-align: right
}

(Ya que si aumentas la parte donde se encuentra la imagen y la descripcion, tienes que reducir la parte donde se ve el precio y el boton del carrito)

nadie · November 9, 2013

Referente al link que has enviado antes sobre como poner dos columnas no lo he entendido mucho. Entiendo que tengo que entrar en el acceso HTP pero no comprendo el procedimiento que pone en la pagina.

Gracias

Si haces lo del link: http://mypresta.eu/en/art/developer/prestashop-products-list-grid-view.html que te he comentado para colocar los productos en columnas, no hagas lo que te he dicho en mi mensaje anterior, ya que eso te lo he dicho para cuando solo tienes una columma que es como viene por defecto..

Este link http://mypresta.eu/en/art/developer/prestashop-products-list-grid-view.html que te he pasado, te dice como tienes que dejar tu fichero:

product-list.tpl

y fichero

product_list.css

para dejar los productos en columnas.

nadie · November 9, 2013

Si haces lo del link: http://mypresta.eu/en/art/developer/prestashop-products-list-grid-view.html que te he comentado para colocar los productos en columnas, no hagas lo que te he dicho en mi mensaje anterior, ya que eso te lo he dicho para cuando solo tienes una columma que es como viene por defecto..

Este link http://mypresta.eu/en/art/developer/prestashop-products-list-grid-view.html que te he pasado, te dice como tienes que dejar tu fichero:
product-list.tpl
y fichero
product_list.css
para dejar los productos en columnas.

En español xD,

Segun la guía, dice que tu fichero:

/themes/plantilla/css/product_list.css

lo vacies y lo dejes asi:

#product_list .poverlay {
top:0px;
left:0px;
position:absolute;
display:block;
width:100%;
height:100%;
visibility:hidden;
z-index:2;
background:rgba(0,0,0,0.7);
}
 
#product_list .cartbutton {
margin-left:10px;
margin-top:90px;
display:inline-block!important;
}
 
#product_list .dropshadowclass {
border:solid 1px #EFEFEF;
}
 
#product_list .dropshadowclass:hover {
border:solid 1px #CCC;
-moz-box-shadow:0px 0px 3px #999;
-webkit-box-shadow:0px 0px 3px #999;
box-shadow:0px 0px 3px #999;
}
 
ul#product_list {
list-style-type:none
}
 
#product_list li {
text-align:center;
margin-bottom:14px;
border:1px solid #eee;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:10px;
width:144px;
display:inline-block;
vertical-align:top;
margin:2px;
position:relative;
}
 
#product_list li a {
color:#374853;
text-decoration:none;
}
 
#product_list li .left_block {
/*float:left;
        /*padding-top:58px;*/
/*width:15px;*/
clear:both;
}
 
#product_list li p.compare {
position:absolute;
color:#FFF;
width:100%;
background:rgba(0,0,0,0.5);
display:block;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
 
#product_list li .viewbutton {
position:absolute;
display:block;
width:100%;
padding-top:10px;
padding-bottom:10px;
background:rgba(0,0,0,0.5);
bottom:0px;
left:0px;
}
 
#product_list li .left_block .compare label {
display:none;
}
 
#product_list li p.compare input {
vertical-align:text-bottom
}
 
#product_list li .center_block {
text-align:center;
}
 
#product_list li .center_block .product_desc {
display:none;
clear:both;
}
 
#product_list li .center_block h3 {
font-size:16px;
padding-top:10px;
margin-top:10px;
display:block;
width:100%;
clear:both;
text-align:center;
}
 
#product_list a.product_img_link {
overflow:hidden;
position:relative;
display:block;
border:1px solid #ccc;
text-align:center;
margin:auto;
}
 
#product_list a.product_img_link img {
vertical-align:bottom;
}
 
#product_list li 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);
background-color:#990000;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* Newer browsers */
}
 
.ie8 #product_list li span.new {
top:111px;
right:0;
width:94%
}
 
.ie7 #product_list li span.new {
top:111px;
right:0;
width:94%
}
 
#product_list li h3 {
padding:0 0 10px 0;
font-size:13px;
color:#000
}
 
#product_list li a {
color:#000;
text-decoration:none;
}
 
#product_list li p.product_desc {
overflow:hidden;
padding:0;
line-height:16px;
}
 
#product_list li p.product_desc,#product_list li p.product_desc a {
color:#666;
}
 
#product_list li .right_block {
display:block;
clear:both;
}
 
#product_list li .discount,ul#product_list li .online_only {
display:block;
font-weight:bold;
color:#990000;
text-transform:uppercase
}
 
#product_list li .discount,ul#product_list li .on_sale {
position:absolute;
bottom:0;
right:0;
display:inline-block;
font-weight:bold;
padding:1px 5px;
font-size:10px;
color:#fff;
text-transform:uppercase;
background:none repeat scroll 0 0 #9B0000
}
 
#product_list li .online_only {
margin:0 0 10px 0
}
 
#product_list li .content_price {
position:relative;
}
 
#product_list li .price {
display:block;
margin-bottom:15px;
font-weight:bold;
font-size:18px;
color:#990000
}
 
#product_list li span.availability {
color:#488C40
}
 
#product_list li .ajax_add_to_cart_button {
padding-left:20px
}
 
#product_list li .ajax_add_to_cart_button span {
display:block;
position:absolute;
top:-1px;
left:-12px;
height:26px;
width:26px;
background:url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent
}
 
#product_list li .lnk_view {
display:block;
margin-top:15px;
padding:0 10px;
border:none;
font-weight:bold;
color:#0088CC;
background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent
}
 
#product_list li .lnk_view:hover {
text-decoration:underline
}

Luego dice, que el fichero:

/themes/plantilla/product-list.tpl

lo vacies y lo dejes asi:

{literal}
    <script>
        $(document).ready(function(){
            $(".dropshadowclass").mouseover(function (){
              $(this).find(".poverlay").css('visibility','visible');
            });
            $(".dropshadowclass").mouseout(function (){
              $(this).find(".poverlay").css('visibility','hidden');
            });
        });
    </script>
{/literal}
             
{if isset($products)}
    <!-- Products list -->
    <ul id="product_list" class="clear">
    {foreach from=$products item=product name=products}
        <li class="dropshadowclass ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
            <div class="center_block">
                <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
                    <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
                        {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
                        {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>
                        {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>{/if}
                        {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
                        {if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only'}</span>{/if}
                        {/if}
                </a>
                    <h3>{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>
                    <p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</a></p>
                    <div class="content_price">
                        {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
                        {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}
                    </div>
                     
            </div>
            <div class="poverlay">
                <div class="right_block">
                        {if isset($comparator_max_item) && $comparator_max_item}
                            <p class="compare">
                                <input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} autocomplete="off"/> 
                                <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
                            </p>
                        {/if}           
                    {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
                        {if ($product.allow_oosp || $product.quantity > 0)}
                            {if isset($static_token)}
                                <a class="cartbutton button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html'}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
                            {else}
                                <a class="cartbutton button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}", false)|escape:'html'}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
                            {/if}                       
                        {else}
                            <span class="cartbutton exclusive"><span></span>{l s='Add to cart'}</span>
                        {/if}
                    {/if}
                    <div class="viewbutton">
                    <a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
                    </div>
                </div>
            </div>
        </li>
    {/foreach}
    </ul>
    <!-- /Products list -->
{/if}

Y de esa manera los productos se veran en cuadricula/columnas como lo queramos decir.

nadie · November 9, 2013

Luego, te sugiero hacer las siguientes modificaciones al codigo "nuevo" ya que como dices que quieres los productos en 2 columnas y no en 3 que es como viene el codigo que te he pasado.

Cambia en el nuevo

/themes/plantilla/product-list.tpl

Esto:

        <li class="dropshadowclass ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">

por

        <li class="dropshadowclass ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 1}alternate_item{else}item{/if} clearfix">

----

Cambia tambien esto:

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

por el nuevo tipo de imagen que habias creado

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'nuevo_tipo_imagen')|escape:'html'}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" />

Y despues, en el nuevo fichero:

/themes/plantilla/css/product_list.css

cambia esto:

#product_list li {
text-align:center;
margin-bottom:14px;
border:1px solid #eee;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:10px;
width:144px;
display:inline-block;
vertical-align:top;
margin:2px;
position:relative;
}

por

#product_list li {
text-align: center;
margin-bottom: 14px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 10px;
width: 240px;
display: inline-block;
vertical-align: top;
margin: 2px;
position: relative;
}

----

Espero no haberte liado xD

weixach · November 9, 2013

Al final solo he hecho los últimos pasos para ponerlo en dos columnas pero no ha funcionado. Las imagenes me han desaparecido y seguia teniendo una sola columna.

Si sabes alguna otra forma que pueda funcionar te lo agradecería.

Gracias

nadie · November 9, 2013

Ya te he dicho lo que tienes que hacer, aquí: http://www.prestashop.com/forums/topic/287637-cambiar-tama%C3%B1o-de-im%C3%A1genes-y-columnas/?view=findpost&p=1450177 te he dicho como tienes que dejar el product_list.css y product-list.tpl

Y aquí: http://www.prestashop.com/forums/topic/287637-cambiar-tama%C3%B1o-de-im%C3%A1genes-y-columnas/?view=findpost&p=1450184 las modificaciones sobre los nuevos ficheros product_list.css y product-list.tpl que has colocado en referencia al post que te he comentado: http://www.prestashop.com/forums/topic/287637-cambiar-tama%C3%B1o-de-im%C3%A1genes-y-columnas/?view=findpost&p=1450177

Simplemente cuando hagas los cambios, limpia la cache de tu navegador, y fuerza compilación en la pestaña Parametros Avanzados > Rendimiento

weixach · November 9, 2013

gracias

nadie · November 9, 2013

gracias

¿Como ha ido al final? ¿mal, fatal, regular xD?

Saludos,

weixach · November 9, 2013

Bueno al final cuando lo he hecho no se ha modificado, solo se han eliminado las imagenes pero seguia habiendo una columna. Pero no te preocupes ya mirare a ver que puede ser.

nadie · November 9, 2013

Bueno al final cuando lo he hecho no se ha modificado, solo se han eliminado las imagenes pero seguia habiendo una columna. Pero no te preocupes ya mirare a ver que puede ser.

¿Puedes pasarme la dirección de tu tienda?

weixach · November 10, 2013

www.toldosreixach.com

Cambiar tamaño de imágenes y columnas

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites