La tienda en puro Css: suma de precios y cuenta de artículos 14.11.14
Una demo en puro css en la que se muestran el total de items seleccionados y la suma de los precios indicados para cada uno de ellos. La base: contadores Css.
La tienda en puro Css: suma de precios y cuenta de artículos
Ya han aparecido en el blog, en repetidas ocasiones, artículos sobre los contadores Css
y algunas demos basadas en ellos.
Hoy es el día que los retomo para montar un ejemplo y en base a los contadores Css recrear una tienda he indicar tanto el número de artículos seleccionados como la suma de sus precios.
Para ello uso dos contadores Css distintos pero aplicados a los mismos elementos. De tal manera que uno de los contadores suma los precios y el otro muestra el total de selecciones realizadas.
Toda la magia está encomendada a las siguientes reglas Css:
/*Inicia los 2 contadores*/
body {
counter-reset: total items;
}
/*Incremeta los dos contadores*/
#pic-1:checked {counter-increment: total 15 items 1;}
#pic-2:checked {counter-increment: total 22 items 1;}
#pic-3:checked {counter-increment: total 33 items 1;}
#pic-4:checked {counter-increment: total 25 items 1;}
/*Muestra la suma de los precios*/
section:after {
content: 'Total= ' counter(total)'.00€';
}
/*Muestra el nº de artículos seleccionados*/
.items:after {
content: counter(items);
}
En la primera regla Css body { } activamos ambos contadores, a los que he llamado total
e items
.
En la segunda regla del Css anterior ya te da una pista: ambos contadores son incrementados por algún tipo de input sólo al ser seleccionado: checked. En concreto son del type='checkbox' pues se necesita poder seleccionar más de uno simultáneamente.
Hoy por hoy es necesario repetir el precio de cada item indicado en el html(<span data-price="€15'00">) en los estilos: es el valor que incrementa cada contador Css total
(la cifra que está a continuación de su nombre en el valor de counter-increment) ya que la función css attr()
aún no está soportada.
Tras lo anterior, que crea e incrementa cada contador Css en los valores indicados, sólo queda mostrar el valor total de cada uno (la suma de los precios y el número total de items seleccionados).
Y para poder hacerlo por separado (mostrar el valor de cada contador Css independientemente) son las dos reglas finales del código Css anterior.
Nada impediría hacerlo todo junto y con una sola regla Css
section:after {
content: 'PVP Total= ' counter(total)'.00€ Total Items: ' counter(items);
}
El resultado, añadiendo una pizca más de estilos para presentar la demo, lo puedes ver justo debajo.
See the Pen KwKZRW by Kseso (@Kseso) on CodePen.
Artículos relacionados
Para conocer un poco más a fondo todo lo relativo a los contadores Css puedes ver estos artículos del blog dedicados a ellos:
- Contadores Css y autonumeración. La propiedad Content
- La regla @counter-style Contadores Css de tercer nivel
- Numeración inversa en Listas Ordenadas
- Selección de hermanos precedentes y numeración congruente
Crédito Imágenes: todas las imágenes de la demo así como la que encabeza este artículo de Internet Archive Book Images en Flickr.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Hola! Esto funcionaba anteriormente cierto?
ResponderEliminar"Hola! Esto funcionaba anteriormente cierto?"
Eliminar¿Lo cuálo?
Los contadores CSS funcionaban y funcionan.
La demo de este post funcionaba y funciona.