How do i make a shopping cart in html?

Nội dung chính Show

Step by step tutorial
Make Better User Experience:
Step 1: Creating a card
Step 2: Adding card header
Step 3: Adding a product details
Step 4: Creating a counter
Step 5: Adding a price section
Step 6: Duplicate cart item
Step 7: Creating a checkout section
How do I make a cart page in HTML?
How do you make a shopping list in HTML?
How do I add an Add to cart button in HTML?
How do you design a cart?

Step by step tutorial

The shopping cart page is designed to allow buyers to see all the products they have added to the shopping cart. It contains a detailed list of products and their prices, and is the last stop before customers order and pay.

Think of the shopping cart page as this moment. Just before you check out. If you have a shopping list, now is the time to check it to make sure you have all the items you want to buy. You do not have a credit card. But you know that if everything goes according to plan, your next stop will be at the checkout.

Make Better User Experience:

Allow the users to edit the number of items directly in the cart.
If cart is empty, provide product recommendations.
Allow the user to remove the product easily.
Provide the clear view of the total price of the cart.
Maintain proper visual hierarchy.
Allow the user to empty the cart by one click.

Step 1: Creating a card

HTML:

<body>
 <div class=”Cart-Container”></div>
</body>

CSS:

body{
 margin: 0;
 padding: 0;
 background: linear-gradient(to bottom right, #E3F0FF, #FAFCFF);
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}.Cart-Container{
 width: 70%;
 height: 85%;
 background-color: #ffffff;
 border-radius: 20px;
 box-shadow: 0px 25px 40px #1687d933;
}

Preview:

Step 2: Adding card header

HTML:

<div class=”Header”>
 <h3 class=”Heading”>Shopping Cart</h3>
 <h5 class=”Action”>Remove all</h5>
 </div>

CSS:

.Header{
 margin: auto;
 width: 90%;
 height: 15%;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.Heading{
 font-size: 20px;
 font-family: ‘Open Sans’;
 font-weight: 700;
 color: #2F3841;
}
.Action{
 font-size: 14px;
 font-family: ‘Open Sans’;
 font-weight: 600;
 color: #E44C4C;
 cursor: pointer;
 border-bottom: 1px solid #E44C4C;
}

Preview:

Step 3: Adding a product details

HTML:

<div class=”Cart-Items”>
 <div class=”image-box”>
 <img src=”images/apple.png” style={{ height=”120px” }} />
 </div>
 <div class=”about”>
 <h2 class=”title”>Apple Juice</h2>
 <h3 class=”subtitle”>250ml</h3>
 <img src=”images/veg.png” style={{ height=”30px” }}/>
 </div>
 <div class=”counter”></div>
 <div class=”prices”></div>
 </div>

CSS:

.Cart-Items{
 margin: auto;
 width: 90%;
 height: 30%;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.image-box{
 width: 15%;
 text-align: center;
}
.about{
 height: 100%;
}
.title{
 padding-top: 5px;
 line-height: 10px;
 font-size: 32px;
 font-family: ‘Open Sans’;
 font-weight: 800;
 color: #202020;
}
.subtitle{
 line-height: 10px;
 font-size: 18px;
 font-family: ‘Open Sans’;
 font-weight: 600;
 color: #909090;
}

Preview:

Step 4: Creating a counter

HTML:

<div class=”counter”>
 <div class=”btn”>+</div>
 <div class=”count”>2</div>
 <div class=”btn”>-</div>
 </div>

CSS:

.counter{
 width: 15%;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.btn{
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: #d9d9d9;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 20px;
 font-family: ‘Open Sans’;
 font-weight: 900;
 color: #202020;
 cursor: pointer;
}
.count{
 font-size: 20px;
 font-family: ‘Open Sans’;
 font-weight: 900;
 color: #202020;
}

Preview:

Step 5: Adding a price section

HTML:

<div class=”prices”>
 <div class=”amount”>$2.99</div>
 <div class=”save”><u>Save for later</u></div>
 <div class=”remove”><u>Remove</u></div>
 </div>

CSS:

.prices{
 height: 100%;
 text-align: right;
}
.amount{
 padding-top: 20px;
 font-size: 26px;
 font-family: ‘Open Sans’;
 font-weight: 800;
 color: #202020;
}
.save{
 padding-top: 5px;
 font-size: 14px;
 font-family: ‘Open Sans’;
 font-weight: 600;
 color: #1687d9;
 cursor: pointer;
}
.remove{
 padding-top: 5px;
 font-size: 14px;
 font-family: ‘Open Sans’;
 font-weight: 600;
 color: #E44C4C;
 cursor: pointer;
}

Preview:

Step 6: Duplicate cart item

Follow the steps from 3 to 5 and add new details.

Step 7: Creating a checkout section

HTML:

<hr> 
 <div class=”checkout”>
 <div class=”total”>
 <div>
 <div class=”Subtotal”>Sub-Total</div>
 <div class=”items”>2 items</div>
 </div>
 <div class=”total-amount”>$6.18</div>
 </div>
 <button class=”button”>Checkout</button>
 </div>

CSS:

hr{
 width: 66%;
 float: right;
 margin-right: 5%;
}
.checkout{
 float: right;
 margin-right: 5%;
 width: 28%;
}
.total{
 width: 100%;
 display: flex;
 justify-content: space-between;
}
.Subtotal{
 font-size: 22px;
 font-family: ‘Open Sans’;
 font-weight: 700;
 color: #202020;
}
.items{
 font-size: 16px;
 font-family: ‘Open Sans’;
 font-weight: 500;
 color: #909090;
 line-height: 10px;
}
.total-amount{
 font-size: 36px;
 font-family: ‘Open Sans’;
 font-weight: 900;
 color: #202020;
}
.button{
 margin-top: 5px;
 width: 100%;
 height: 40px;
 border: none;
 background: linear-gradient(to bottom right, #B8D7FF, #8EB7EB);
 border-radius: 20px;
 cursor: pointer;
 font-size: 16px;
 font-family: ‘Open Sans’;
 font-weight: 600;
 color: #202020;
}

Preview:

Wrap-up!

GitHub link for the same.

When choosing a shopping cart design, at least remember that people need control, freedom, and information. This is where users browse your product and actually decide what to buy. It depends on you. A simple solution!

How do I make a cart page in HTML?

Allow the user to empty the cart by one click..

Step 1: Creating a card. HTML: ... .

Step 2: Adding card header. HTML: ... .

Step 3: Adding a product details. HTML: ... .

Step 4: Creating a counter. HTML: ... .

Step 5: Adding a price section. HTML: ... .

Step 6: Duplicate cart item. ... .

Step 7: Creating a checkout section..

How do you make a shopping list in HTML?

To Do list. Shopping list. Ingredients list. The let's list other lists list 😁.

From the drop down that says Address, choose Text Field..

Erase everything in the text area..

Copy and paste the HTML code of the unordered-lists-after. html file into that text area and then click the Validate button..

How do I add an Add to cart button in HTML?

Method 2.

In the file etc/config.php , add the line. HTML. Trusted = On. right after the line. ... .

Add the following code to the page where you need to insert your 'Add to cart' button: <script type="text/javascript"> window. onload = function () { $('form.custom-add2cart'). each(function () { var form = $(this)..