CSS-only Shopping Basket with a Fully Dynamic Price Calculator

Mate Marschalko
6 min readSep 12, 2022

Last week, we took a look at CSS Counters and how we can use them to count elements on the page and dynamically assign ordinal numbers to them:

To see how far we can push this idea, let’s build a webshop shopping basket where we automatically calculate the price of the order along with the shipping costs. We will also change the shipping cost based on the size of the product.

Yes, that’s right, this is all possible with just CSS and a few clever tricks!

Btw, I’m publishing new tricks on HTML, CSS and JS pretty much every week, so please consider following :) Thanks!

Setting up the content

The data and properties assigned to the individual shopping basket items will need to be captured in HTML with some attributes. These properties include the product name, size, and the number of items we have in the basket.

<main>
<h1 id="main-title">Basket</h1>
<div class="product"
data-name="Chair"
data-size="medium"
data-amount="4"
></div>
<div
class="product"
data-name="Clock"
data-size="small"
data-amount="2"
></div>
<div
class="product"
data-name="Table"
data-size="large"
data-amount="1"
></div>
<div class="total"></div>
</main>

Assigning price and amount

To start off with the shopping basket, we’ve added three products each assigned with their relevant details captured in the arbitrarily named data attributes.

To be able to start calculating, we need to bring these values into CSS. The easiest way to achieve this is to set the values of a few custom properties depending on the data attribute values of the elements they are in:

[data-name="Chair"] {
--price: 49;
}

--

--

Mate Marschalko

Senior Creative Developer, Generative AI, Electronics with over 15 years experience | JavaScript, HTML, CSS