Formatear precios con parte decimal arriba

En este artículo vamos a ver una posibilidad para darle un formato diferente a la parte entera y a la parte decimal del precio de nuestros productos.

En el ejemplo que vamos a ilustrar queremos visualizar la parte entera más grande y la parte decimal más pequeña y arriba, tal como se muestra en la imagen siguiente:

Como programador yo siempre tengo en mente la frase «Divide y vencerás» y este es otro caso donde se puede aplicar.

Para visualizar el precio de esta manera, tenemos que dividir el precio en 3 partes: parte entera, parte decimal y el símbolo del euro.

<div class="price">
    <span class="integer">2.500</span>
    <span class="decimal">00</span>
    <span class="simbol">€</span>
</div>

Para mostrar los precios con separador de miles en PHP podemos emplear la función number_format.

Como el precio lo estamos capturando de una base de datos, nos vendrá habitualmente todo junto (parte entera y parte decimal). Para separarla en PHP podemos emplear la función explode.

<?php
$parts = explode('.', $row['price']);
echo $parts[0]; //Parte entera
echo $parts[1]; //Parte decimal
?>

En la maquetación ya tenemos el precio dividido en 3 partes. Ahora solo falta maquetar estas 3 partes según nuestros intereses. En el caso del ejemplo, tan solo añadiremos el siguiente código CSS:

#content .products li .price {
    float:left;
    width:100%;
}

#content .products li .integer {
    float:left;
    font-size:32px;
}

#content .products li .decimal {
    float:left;
    font-size:12px;
}

#content .products li .simbol {
    float:left;
    font-size:32px;
}

En el ejemplo en funcionamiento estamos sacando la información de una tabla de productos de una base de datos.

Ver ejemplo en funcionamiento