[SOLUCIONADO] ayuda para agilizar las compras

[Akthon]

Resulta que en mi web estan los articulos de forma visual en grid y claro no se ve si hay stock o no hasta que entras en cada articulo y entonces queria saber si se puede poner como en la imagen que adjunto , mi web es www.todoave.es, en la imagen que adjunto se ve como una banda sobre la imagen que pone agotado, y eso es lo me que me gustaria añadir a mi web, de forma que los usuarios no tengan que entrar en cada producto para saber si esta disponible o no, y asi hacer mas agiles las compras de los clientes.

 

un saludo

Edited December 22, 2013 by Akthon (see edit history)

[Akthon]

Seria como cuando pone la etiqueta de nuevo en un articulo que acabamos de crar, pero claro con la salvedad de que esta se active si no hay stock y se desactive cuando halla stock, me urge bastante el tema, alguien que sepa como puedo hacerlo? y me quiera echar un cable.

 

La captura es de mi web, seria para que quedara como lo que he editado que pone agotado mas o menos.

 

Un saludo

 

Felices fiestas a todos.

Edited December 22, 2013 by Akthon (see edit history)

[nadie]

Para el listado de productos, veo que la tienes oculta en tu css.
 
Veo que tienes aqui:
 

http://www.todoave.es/themes/Pruebas/css/product_list.css

esto:
 

#product_list li span.availability {
display: none;
color: #488C40;
}

si le quitas el 
 

display: none;

veras la etiqueta.
 
En el fichero:
 

/themes/su-plantilla/product-list.tpl

tendras algo como esto:
 

                                        {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}<span class="warning_inline">{l s='Out of stock'}</span>{/if}</span>{/if}

ponlo debajo de:
 

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

es decir debajo de
 

<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}

y luego en el css copiamos el estilo del new, que si te fijas para los productos nuevos en el listado de productos, es este:
 

#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);
		-ms-transform: rotate(45deg);
		background-color: #990000
	}

Lo copiamos aqui:
 

#product_list li span.availability

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: #488C3F

Es decir:
 

#product_list li span.availability {
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: #488C3F;
}

Logicamente tendras que cambiar valores para que no tape la raya del nuevo xD

[Akthon]

Muchas gracias, creo que ya lo he solucionado, ahora me falta cambiarlo de sitio, pero lo mas importante ya esta, muchas gracias y felices fiestas.

 

Saludos