Shopping Cart part 1: Products cards

on




Before using javascript to add and to remove items from shopping cart, we need products cards for items. In this part we gonna design responsive products cards with HTML and CSS.



In the css file, we gonna set the margin and padding of the body 0. The color white and the background black. (You can choose other colors). 

body {

    margin: 0;

    padding: 0;

    color: white;

    background-color: black;

}

We gonna create a container for product cards

.container {

    display: flex;

    flex-wrap: wrap;

    padding: 25px;

}

In html file add a title with a class ti and a container: 

<body>

    <h2 class="ti">T-Shirts Collection</h2>

    <div class="container">

    </div>

</body>

In css file :

.ti{

    padding-top: 30px;

    text-align: center;

}

In html file. Inside the container add a new div for shirts:

<div class="container">

    <div class="articles">

    </div>

</div>

In css file add the following proprieties to the class articles: 

.articles {

    display: flex;

    flex-wrap: wrap;

    margin-left: 10px;

}

In html file add a div for the selected items, we gonna add some articles with html just for the design. In the second part of this project, we will use javascript to add shirts to shopping cart.

<div class="container">

    <div class="articles">

    </div>

    <div class="cart">

        <h3 class="tit">My articles</h3>

        <ul id="items">

                <li>Adidas, Size: M, Quantity: 2 x 18.90 $</li>

                <li>Nike, Size: L, Quantity: 2 x 19.90$</li>

        </ul>

        <h3 style="text-align: right;">Total: 77.60 $</h3> 

    </div>

</div>

In css file add the class cart:

.cart {

    width: 300px;

    margin: 10px;

    margin-left: 10px;

}

In html file add a div with an image: 

<div class="articles">

    <div>

        <img src="imgFolder/img.jpeg"> 

    </div>

</div>

In css file add a style to div and img :

.articles > div {

    width: 200px;

    margin: 20px;

}

img {

    width: 100%;

    border-radius: 5px;

}

In Html file. Add a new div with class prod after the img element. This div contains T-shirt information.

<div class="articles">

    <div>

        <img src="imgFolder/img.jpeg"> 

        <div class="prod">

                <h3 class="tit" id="brand1">Nike</h3>

                <h4 id="price1">19.90</h4>

                <h4>$</h4>

        </div>

    </div>

</div>

Ids are important. We will select elements by id to get the brand and the price of a Shirt.
In css file add the class prod. You can reload the page after every step to see changes. 

.prod {

    display: flex;

    flex-direction: row;

}

Add style to the class tit:

 .tit {

    width: 100px;

    padding-left: 20px;

}

add style to element or elements ( depends of number of shirts ) with id price :

#price1, #price2, #price3, #price4 {

    margin-right: 5px;

}

In Html file. Add a new div with class inputs after the div prod. The div inputs contain input and select elements. The user can select more than one T-Shirt and he can select a size of a T-Shirt. 

<div class="inputs">

   <input type="number" id="quantity1" name="quantity1" min="1" max="99" value="1">

    <select id="size1" name="size1">

        <option value="size" disabled selected>Size</option>

        <option value="XS">XS</option>

        <option value="S">S</option>

        <option value="M">M</option>

        <option value="L">L</option>

        <option value="XL">XL</option>

    </select>

</div>

In css file add the following style:

.inputs, input, select {

    text-align: center;

    border-radius: 10px;

    margin-left: 10px;

    margin-right: 10px;

}

input {

    width: 50px;

}

In Html file add a button after the element select. 

<div>

     <button class="addTo"> Add</button>

</div>

In css file add style for button:

.addTo {

    position: relative;

    left: 0;

    width: 100px;

    height: 25px;

    border-radius: 15px;

    margin-top: 20px;

    background-image: linear-gradient(to right, #ff512f, #dd2476);

    color: white;

    border-width: 0;

}

addTo:hover {

    background-color: red;

    background-image: none;

    box-shadow: 0 0 20px red, 0 0 60px red, 0 0 60px red;

}

You can reuse the code of product card to create other products card. I created four products you can create more. Don't for get to change id.   

Comments

Post a Comment