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 ✎ 0

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

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 Don Kseso Kseso