soy Kseso y esto EsCSS

La tienda en puro Css: suma de precios y cuenta de artículos

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

·Por Kseso ✎ 2

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.

La tienda en Css: suma de precios y número de artículos

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.

Ver Demo a Full

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:

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.

avatar del Editor del blog

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