[Solucionado] Poner un rótulo de vendido en la imagen del producto

[Uralekt]

Hola de nuevo,

 

Bueno ya creía que tenía mi página terminada -más o menos, hay cosas a las que he renunciado por no amargar al personal a preguntas- )))

 

Sin embargo esto es importante y no hallo solución. Quiero que en la imagen de un producto aparezca un rótulo como vendido, normalmente en diagonal en la esquina derecha. Hasta el momento he encontrado dos posibles soluciones:

 

1.- En este hilo http://www.prestashop.com/forums/topic/247509-modulo-para-que-aparezca-rotulo-de-vendido-encima-de-la-foto-de-dicho-articulo/ alguien recomienda cambiar el icono rebajas y el texto por una imagen de vendido y luego por cms colocarlo encima de la foto. En principio me parece demasiado complicado, además de que yo la imagen rebajas la perdí hace tiempo y no sé ni dónde debería estar.

 

2.- Se me ocurre hacerlo manualmente, es decir, colocarle el cartelito a la foto principal y subirla. El problema de esto es que cada vez que venda un producto he de editar la foto y subirla y puede llegar a ser demasiado.

 

¿Hay alguna manera de hacer esto de manera automática? ¿Algún módulo donde pueda marcar un producto como vendido y que aparezca así?

 

Adjunto una imagen de cómo me gustaría que apareciera:

Edited October 24, 2013 by Uralekt (see edit history)

[Uralekt]

Bueno como veía que no tirábamos para alante con este tema he recurrido al foro en inglés y mal que bien he encontrado la solución en este hilo: http://www.prestashop.com/forums/topic/249939-solved-display-sold-ribbon-over-the-product-image-when-item-no-longer-available/

 

Por si alguien necesita esto mismo pero en español paso a explicar cómo se hace (al menos cómo lo he hecho yo):

 

1.- Lo primero que debemos es asignar cantidades a nuestros productos, ya que lo que le estamos diciendo es que cuando la cantidad sea 0 nos salga una imagen de "vendido" o "agotado" o lo que queráis.

 

2.- Ahora hay que crear o encontrar una imagen de "vendido".

 

a ) En el hilo en inglés proporcionan una online aunque personalmente creo que es mejor, incluso si la sacamos de una web, subirla a nuestro servidor, ya que no sabemos cuánto tiempo estará disponible esa imagen en la web o si tiene límite de descargas, por ejemplo.

 

b ) Recomiendo que la imagen sea *.png (así además no tendrá un recuadro blanco alrededor).

 

2.- Una vez que tenemos nuestra imagen como cartelito de "vendido" la subimos a nuestra carpeta themes/default/img (siendo default *tu tema*)

 

3.- Ahora vamos a themes/default/product-list.tpl y buscamos las siguientes líneas:

<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
</p>
{/if}
</div>
<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')}" alt="{$product.name|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}
</a>
<h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}</a></h3>

En la antepenúltima línea, o sea, justo después de

 {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}

y antes de

 </a>

metemos el siguiente código que paso a explicar un poco:

{if $product.quantity_all_versions == 0}<img src="{$img_dir}TUIMAGEN.png" style="position:absolute; right:0px; top:0px; margin-right:-15px; margin-top:-15px;"/>{/if}

Donde pone TUIMAGEN has de poner el nombre exacto de la imagen *png que hemos creado (o si os decidís por jpg pues tuimagen.jpg). A mí en concreto me interesaba que la imagen "se saliera" por arriba y por la derecha, por eso le he añadido un margin-top y un margin-right negativos. Si esto no os interesa podéis quitarlo.

 

El resultado es éste

Edited October 24, 2013 by Uralekt (see edit history)

[Pulgarcito2mano]

Bueno como veía que no tirábamos para alante con este tema he recurrido al foro en inglés y mal que bien he encontrado la solución en este hilo: http://www.prestashop.com/forums/topic/249939-solved-display-sold-ribbon-over-the-product-image-when-item-no-longer-available/

 

Por si alguien necesita esto mismo pero en español paso a explicar cómo se hace (al menos cómo lo he hecho yo):

 

1.- Lo primero que debemos es asignar cantidades a nuestros productos, ya que lo que le estamos diciendo es que cuando la cantidad sea 0 nos salga una imagen de "vendido" o "agotado" o lo que queráis.

 

2.- Ahora hay que crear o encontrar una imagen de "vendido".

 

a ) En el hilo en inglés proporcionan una online aunque personalmente creo que es mejor, incluso si la sacamos de una web, subirla a nuestro servidor, ya que no sabemos cuánto tiempo estará disponible esa imagen en la web o si tiene límite de descargas, por ejemplo.

 

b ) Recomiendo que la imagen sea *.png (así además no tendrá un recuadro blanco alrededor).

 

2.- Una vez que tenemos nuestra imagen como cartelito de "vendido" la subimos a nuestra carpeta themes/default/img (siendo default *tu tema*)

 

3.- Ahora vamos a themes/default/product-list.tpl y buscamos las siguientes líneas:

<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
</p>
{/if}
</div>
<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')}" alt="{$product.name|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}
</a>
<h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}</a></h3>

En la antepenúltima línea, o sea, justo después de

 {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}

y antes de

 </a>

metemos el siguiente código que paso a explicar un poco:

{if $product.quantity_all_versions == 0}<img src="{$img_dir}TUIMAGEN.png" style="position:absolute; right:0px; top:0px; margin-right:-15px; margin-top:-15px;"/>{/if}

Donde pone TUIMAGEN has de poner el nombre exacto de la imagen *png que hemos creado (o si os decidís por jpg pues tuimagen.jpg). A mí en concreto me interesaba que la imagen "se saliera" por arriba y por la derecha, por eso le he añadido un margin-top y un margin-right negativos. Si esto no os interesa podéis quitarlo.

 

El resultado es éste

Unas preguntas! a mi me interesa que aparezcan diferentes bandas laterales porque tenemos productos de segunda mano, nuevos, liquidaciones de exposiciones, liquidaciones de stock y otras características.

 

Lo que has comentado para hacer, crear una imagen en PNG y cómo insertarla lo entiendo. Pero mi duda es, ¿luego aparece esa opción en el panel de administración como opción para clickar en plan a lo rápido? ¿como característica dentro de los productos?

Edited October 24, 2013 by Pulgarcito2mano (see edit history)

[Uralekt]

Hola!

 

No, no aparece como opción, sino que va según la cantidad de artículos. Cuando es 0 pues pone ese rótulo. Como yo vendo propiedades, o hay o se ha vendido, así que la cantidad siempre es o 1 (sin rótulo) o 0 (con rótulo).

 

Creo que se podría asignar diferentes valores a distintas cantidades cambiando el número 0 por un número en concreto e ir asignándole distintas imágnes, pero claro, si trabajáis con las cantidades en prestashop como stock, entonces no podéis hacerlo así.

[Uralekt]

De todas formas pienso que sí es posible hacerlo de otra forma, sobre todo si los tenéis asignados a una categoría (segunda mano, stock, etc...). Entonces podéis por código decir que si pertenece a esa categoría te salga tal imagen. El problema es que yo código no manejo -trasteo pero sin saber-, pero estoy seguro de que alguien que entienda puede ayudaros con eso.

[Pulgarcito2mano]

Gracias Uralekt! seguiré investigando. Lo de que aparece la imagen cuando las unidades son 0 a nosotras también nos vienen bien en los productos de segunda mano, porque igual que las propiedades que vendes tu sólo solemos tener una o dos unidades como mucho.

 

Un saludo!