Poner imagen tipo etiqueta (oferta, rebaja, nuevo) sobre imagen

[redoli]

Muy buenas a todos, estoy tratando de poner una imagen superpuesta en los productos que están dentro del apartado de rebajas, la imagen en cuestión es una especie de etiqueta en .png que pone el texto rebajado, en una esquina, he estado leyendo algo pero no me queda claro, estoy trasteando el product-list.tpl en esta seccion en concreto, pero no lo consigo

 

<div class="right_block">
   {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 isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if}
   {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
   <div>
 {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>
   {/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)}
  <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
 {else}
   <span class="exclusive">{l s='Add to cart'}</span>
 {/if}
   {/if}
   <a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
   {if isset($comparator_max_item) && $comparator_max_item}
 <p class="compare"><input type="checkbox" onclick="checkForComparison({$comparator_max_item})" class="comparator" id="comparator_item_{$product.id_product}" value="{$product.id_product}" /> <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label></p>
   {/if}   
  </div>

[redoli]

Ilustro por si no se entiende la idea

 

Imagen con cartel oferta

 

Mi tienda es www.vestidosvintage.com/pruebavintage

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

[redoli]

Investigando investigando he conseguido hacerlo, no se si estará correctamente, pero el resultado es el deseado, ahora viene el problema, quiero aplicarlo solo a los productos en rebajas y no a todos los productos, que es como me sale en estos momentos, alguien me podría indicar como hacerlo? gracias

[redoli]

Listo, ya esta puesto solo en articulos de rebajas, explico como lo he hecho, aviso que no sé si es el mejor método o es correcto 100% si no lo es que alguien lo corrija a ser posible, he hecho lo siguiente, en el product-list.css de mi plantilla he creado los siguientes estilos

 

}
.transparente {
position: relative;
top: -170px;
left: 50px;
}
.rebajas {
background: url(..img/rebajado.png) no-repeat;
position: relative;
z-index: 8;
left: 6px;
top: -216px;

 

Luego he añadido la imagen a los articulos rebajados de la siguiente manera; colocando un span, justo despues de PS_CATALOG MODE} y antes de <span class="discount"> en el product-list.tpl

 

{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="transparente"> <img class="rebajas" position="relative" src="http://www.vestidosvintage.com/img/rebajado.png" height="76px" width="137px"></span><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}

 

Una vez ya tengas insertada la imagen y segun la configuracion de tus imagenes, yo he ido dandole valores top y left tanto al estilo transparente como al estilo rebajas para que quedase bien colocado, espero que os sirva, un saludo

[redoli]

Edito: Estoy teniendo algunos problemas en las alineaciones de los articulos, al crear el estilo transparente al parecer me descuadra los articulos y estoy viendo el porque... de momento sigo toqueteando ya os comentaré

[Xcorpion306]

Me interesa, seguiré tus progresos !!! ;-)

[balance]

Me interesa muchísimo saber como finalmente lo lograste. Puedes indicarnos?

 

Me gusta mucho tu pagina

Muchas gracias

 

Yo tengo algunos productos "en rebajas". Estos productos me descuadran la plantilla por eso quiero incluir la imagen OFERTA en la misma imagen que el producto.

 

Aqui podeis ver el ejemplo de mi web, veis que los botones de "anadir al carrito" y "ver" esta fuera del recuadro del articulo...

http://www.maq-hoste...-cesta-35x35-cm

Edited December 18, 2012 by balance (see edit history)

[franciscojdf]

Yo he estado investigando como lo hace la v1.5.2.0 con la parte de novedades que le pone la etiqueta en la parte superior derecha en modo de cinta con el texto NUEVO. He podido ver que usa una clase para el CSS que hace el efecto que queremos:

 

#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

}

 

Yo en mi caso lo quiero sobre los productos de destacados y me he encontrado con dos problemas:

 

1. cambiar el texto de NUEVO para que ponga OFERTA (no se cómo crear una nueva etiqueta para el es.php correspondiente al módulo. Me ha despistado el código hexadecimal que le asignan a las etiquetas)

 

2. he probado a crear una nueva clase "#featured-products_block_center .product_image span.descuento {" pero no logro dar dónde hay que ponerlo dentro del código del homefeatured.tpl" para que se vea la capa con el texto.

[Aldeag]

Me gusta. ¿Sirve para Prestashop 1.4.9?

[djstevecl]

necesito hacer lo mismo con el texto nuevo y cambiarlo ya que los productos no son nuevos , tal ves colocar novedad .... ...

[alfredocasanova]

he dado con donde es os lo pongo enseguida...

Edited May 29, 2013 by alfredocasanova (see edit history)

[alfredocasanova]

en esta parte del homefeatured.tpl es donde hay que hacer la modificacion para que muestre lo que queramos

(<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><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'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}<div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short}</a></div>)

 

en mi caso quiero meter el porcentaje de descuento pero no se como hacerlo si me podeis ayudar, se que es ahi porque haciendo modificaciones he conseguido que me apareciera en pantalla dentro de la imagen la palabra rebajas.....

[alfredocasanova]

ya he dado con la tecla no hace falta crear una clase nueva en esta parte del homefeatured que os indico que es en la que va la imagen y la etiqueta new, si tu antes del if isset colocas las lineas de codigo que necesites con una imagen por ejemplo indicando un ifisset cogiendo como constante por ejemplo la etiqueta new e indicandole que si existe la etiqueta te meta la imagen la imagen sale y no desordenas todo del homefeatured, es cuestion de hacer pruebas ademas al estar las lineas de codigo antes de las de la etiqueta no tienes problema en que la ponga debajo puesto que al estar por delante las lineas es como si le hubieras dado un z-index para la superposicion, por otro lado para que no aparezca new simplemente tienes que ponerle en el l s="New" cambias el new por lo que quieras y listo. si necesitais cualquier tipo de aclaracion decidme que como la mayoria de la gente he tenido que sacar todo esto solo sin ninguna ayuda y con noches en vela....... Un saludo espero haber servido de ayuda...