We all, in one way or the other, got in contact with or used a purchase cart item component before. It is used on e-commerce website, or maybe when purchasing a particular product on a website (e-book, a course online etc).
The cart item component, let you add a shopping item to your cart. You can also add details on a given product, title, description, price, availability and many more.
The customer have clear details of what the product is, the cost and can also go further to purchase it.
Let’s have a look at how we can build such an amazing component.
It should be noted that this tutorial is done using TailwindCSS, which works using Node Package Manager (npm), so it is important that Node is installed, and then tailwindcss should be install later on. You can read more at https://tailwindcss.com/docs/installation
Understanding the Task
With your great eyes and attention, I am sure you noticed that this cart item can be divided into 2 main parts; The Item Preview Image and the Item details
Looking at the task with this in mind, it doesn’t only give us a better view on the design, but also help us better structure out code.
Structure of Code
<body>
<!-- Cart Start -->
<div>
<div class="cart">
<!-- Item image-->
<div></div>
<!-- Item detail -->
<div></div>
</div>
</div>
<!-- Cart End-->
</body>
I believe we now have a better view of the cart item structure now, without wasting anymore time, Let’s do this.
Let’s complete the first part of the cart: I*tem Image Preview*
<!-- Item image-->
<div class="mx-4">
<img src={image src} alt="" class="h-52 aspect-square object-center">
</div>
For the image src, you can replace it with any image of your choice. If you want to use the same image as in this tutorial in order to follow along, you can get it here; Headset Image
And that’s all for the the first part of the cart structure. Easy right ? 😁
Let’s have an understanding of the above code.
mx-4: It simply gives a margin-inline of 1rem (~16px) to this section.h-52 aspect-square object-center: This properties aim at making the item image responsive on different screens while maintaining it’s aspect ratio
And that’s just it ! Yeah ! easy peasy 😁
Now let’s have a look at the second section of this cart item. . .
<div>
<div class="text-white bg-black rounded-full w-fit px-3"><h2>free shipping</h2></div>
<div class="item-name text-2xl font-semibold py-5 w-96">
<h2>Razer Kraken Kitty Edt Gaming Headset Quartz</h2>
</div>
<div class="item-price">
<div class="item-price-discount line-through"><p>1 599,-</p></div>
<div class="item-new-price text-4xl font-extrabold py-3"><p>799,-</p></div>
<p class="text-slate-400">This offer is valid until April 3 or as long as stock lasts!</p>
</div>
<div class="add-to-cart text-white text-center font-semibold bg-blue-500 py-3 my-6 rounded-xl shadow-sm shadow-blue-600 border-b-2 border-blue-700 cursor-pointer hover:bg-blue-600 transition-all ease-linear duration-300">
<h2>Add to cart</h2>
</div>
<div class="flex items-center gap-1 pb-4">
<div class="text-green-500"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="currentColor" d="M232 128A104 104 0 1 1 128 24a104.2 104.2 0 0 1 104 104Z"/></svg></div>
<h2 class="text-sm font-semibold">50+ pcs. in stock</h2></div>
<div class="call-to-action-btn flex [&>*]:flex justify-between [&>*]:items-center [&>*]:px-5 [&>*]:py-3 [&>*]:border-2 [&>*]:gap-2 [&>*]:rounded-md cursor-pointer [&>*:hover]:bg-slate-900 [&>*:hover]:text-white [&>*]:font-semibold [&>*>div>svg]:text-lg [&>*]:transition-all [&>*]:ease-linear [&>*]:duration-300">
<div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="m16 22l-6-10l-6 10"/><path d="M10 28a6 6 0 0 0 6-6H4a6 6 0 0 0 6 6Z" clip-rule="evenodd"/><path d="m44 22l-6-10l-6 10"/><path d="M38 28a6 6 0 0 0 6-6H32a6 6 0 0 0 6 6Z" clip-rule="evenodd"/><path d="M24 6v36M10 12h28m-28 0h28m0 30H10"/></g></svg>
</div>
<h2>Add to cart</h2></div>
<div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="currentColor" d="M128 224a7.8 7.8 0 0 1-3.9-1C119.8 220.6 20 163.9 20 92a60 60 0 0 1 108-36a60 60 0 0 1 108 36c0 30.6-17.7 62-52.6 93.4a314.3 314.3 0 0 1-51.5 37.6a7.8 7.8 0 0 1-3.9 1Zm-3.9-15ZM80 48a44 44 0 0 0-44 44c0 55.2 74 103.7 92 114.7c18-11 92-59.5 92-114.7a44 44 0 0 0-84.6-17a8 8 0 0 1-14.8 0A43.8 43.8 0 0 0 80 48Z"/></svg>
</div>
<h2>Add to wishlist</h2></div>
</div>
</div>
This section looks a little bit long, let’s split it into small sub-sections and better understand it (Divide and Conquer 🤓)
<div>
<!-- Item Descriptions -->
<div class="text-white bg-black rounded-full w-fit px-3"><h2>free shipping</h2></div>
<div class="item-name text-2xl font-semibold py-5 w-96">
<h2>Razer Kraken Kitty Edt Gaming Headset Quartz</h2>
</div>
<div class="item-price">
<div class="item-price-discount line-through"><p>1 599,-</p></div>
<div class="item-new-price text-4xl font-extrabold py-3"><p>799,-</p></div>
<p class="text-slate-400">This offer is valid until April 3 or as long as stock lasts!</p>
</div>
This sub-section is focused on giving details about this item.
All the different properties use here are pretty self-explanatory, but nonetheless, let’s understand them together.
text-white bg-black rounded-full w-fit px-3: Simply put, background-color: black, color: white (text color), border-radius: 100%, width: fit-content and padding-inline: 0.75rem. This properties were all applied to have the Free Shipping component at the top of the cart (yeah ! that lil beautiful thing saying free shipping)Line-through: As you might have guess, it simply put a line through on the text on which it is apply on.
let’s have a look on the second sub-section.
<div class="add-to-cart text-white text-center font-semibold bg-blue-500 py-3 my-6 rounded-xl shadow-sm shadow-blue-600 border-b-2 border-blue-700 cursor-pointer hover:bg-blue-600 transition-all ease-linear duration-300">
<h2>Add to cart</h2>
</div>
<div class="flex items-center gap-1 pb-4">
<div class="text-green-500">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="currentColor" d="M232 128A104 104 0 1 1 128 24a104.2 104.2 0 0 1 104 104Z"/></svg>
</div>
<h2 class="text-sm font-semibold">50+ pcs. in stock</h2>
</div>
<div class="call-to-action-btn flex [&>*]:flex justify-between [&>*]:items-center [&>*]:px-5 [&>*]:py-3 [&>*]:border-2 [&>*]:gap-2 [&>*]:rounded-md cursor-pointer [&>*:hover]:bg-slate-900 [&>*:hover]:text-white [&>*]:font-semibold [&>*>div>svg]:text-lg [&>*]:transition-all [&>*]:ease-linear [&>*]:duration-300">
<div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="m16 22l-6-10l-6 10"/><path d="M10 28a6 6 0 0 0 6-6H4a6 6 0 0 0 6 6Z" clip-rule="evenodd"/><path d="m44 22l-6-10l-6 10"/><path d="M38 28a6 6 0 0 0 6-6H32a6 6 0 0 0 6 6Z" clip-rule="evenodd"/><path d="M24 6v36M10 12h28m-28 0h28m0 30H10"/></g></svg>
</div>
<h2>Add to cart</h2></div>
<div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="currentColor" d="M128 224a7.8 7.8 0 0 1-3.9-1C119.8 220.6 20 163.9 20 92a60 60 0 0 1 108-36a60 60 0 0 1 108 36c0 30.6-17.7 62-52.6 93.4a314.3 314.3 0 0 1-51.5 37.6a7.8 7.8 0 0 1-3.9 1Zm-3.9-15ZM80 48a44 44 0 0 0-44 44c0 55.2 74 103.7 92 114.7c18-11 92-59.5 92-114.7a44 44 0 0 0-84.6-17a8 8 0 0 1-14.8 0A43.8 43.8 0 0 0 80 48Z"/></svg>
</div>
<h2>Add to wishlist</h2></div>
</div>
</div>
This sub-section mainly contain all the different call to actions buttons like :** Add to Cart** and Add to Wishlist
You can get all the icons used in this tutorial here
The properties [&>*] simply means “select each individual child”, this allows us to apply the same styling properties to all the immediate children
And That’s it ! All should be good here! 😎
Let’s focus on the main component now, and see how we can style the background. . . ✍️
Back to the main containers, Let’s make this a flex box and give some cool styling too.
<body class="bg-blue-100 flex items-center justify-center min-h-screen">
<!-- Cart Start -->
<div class="text-slate-900">
<div class="card flex bg-white rounded-lg w-fit p-10 mx-auto drop-shadow-2xl">
<!-- Item image-->
<div></div>
<!-- Item detail -->
<div></div>
</div>
</div>
<!-- Cart End-->
</body>
bg-blue-100 flex items-center justify-center min-h-screen: This properties ensures that our cart is exactly at the center of the screen (display: flex align-items: center justify-content: center min-height: 100vh)flex bg-white rounded-lg w-fit p-10 mx-auto drop-shadow-2xl: This makes our cart item container a flex box with a fit-content width and a drop-shadow.
And we did it ! 😍
Conclusion
We just built a simple Cart item component without opening our CSS file😃. Thanks to Tailwindcss. Many employers will need such components to be added to their website, and right now you should be proud that you are one those few who knows how to build it in less than 5mins, and you do that without even leaving you HTML document 😎.
You can have a Live preview on Codepen or find the code on Github
Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additions styling you added to you cart item.
If you have any worries or suggestions, don’t hesitate to leave it in the comment section! 😊
See ya ! 👋
Top comments (0)