Корзина для сайта магазина с помощью CSS и JavaScript
В этом руководстве мы продемонстрируем как создать корзину для интернет-магазина с использованием HTML и CSS3. При этом мы применим Google Fonts (шрифт «Roboto»).

HTML
Шаг 1: Создадим HTML-структуру
Сначала нужно создать контейнер div, который мы назовем «.shopping-cart».
Внутри него у нас будет заголовок и три пункта, которые будут содержать:
- Кнопку «Удалить» и кнопку «Добавить в избранное»;
- Изображение товара;
- Название и описание товара;
- Кнопки, с помощью которых можно задавать количество товара;
- Итоговую цену.
<div class="shopping-cart">
<!-- Title -->
<div class="title">
Shopping Bag
</div>
<!-- Товар #1 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-1.png" alt="" />
</div>
<div class="description">
<span>Common Projects</span>
<span>Bball High</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button">
<img src="plus.svg" alt="" />
</button>
<input type="text" name="name" value="1">
<button class="minus-btn" type="button" name="button">
<img src="minus.svg" alt="" />
</button>
</div>
<div class="total-price">$549</div>
</div>
<!-- Товар #2 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-2.png" alt=""/>
</div>
<div class="description">
<span>Maison Margiela</span>
<span>Future Sneakers</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button">
<img src="plus.svg" alt="" />
</button>
<input type="text" name="name" value="1">
<button class="minus-btn" type="button" name="button">
<img src="minus.svg" alt="" />
</button>
</div>
<div class="total-price">$870</div>
</div>
<!-- Товар #3 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-3.png" alt="" />
</div>
<div class="description">
<span>Our Legacy</span>
<span>Brushed Scarf</span>
<span>Brown</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button">
<img src="plus.svg" alt="" />
</button>
<input type="text" name="name" value="1">
<button class="minus-btn" type="button" name="button">
<img src="minus.svg" alt="" />
</button>
</div>
<div class="total-price">$349</div>
</div>
</div>
CSS
Убедитесь, что при создании корзины для сайта на PHP вы подключили шрифт, который мы используем в этом руководстве. Теперь добавим основные стили для раздела body:
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
background-color: #7EC855;
font-family: 'Roboto', sans-serif;
}
После этого создадим корзину с размерами 750 на 423 пикселя и зададим для нее стили. Обратите внимание, что мы используем flexbox, поэтому устанавливаем для свойства display значение flex, а для flex-direction – column. Потому что по умолчанию для flex-direction установлено значение row:
.shopping-cart {
width: 750px;
height: 423px;
margin: 80px auto;
background: #FFFFFF;
box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.10);
border-radius: 6px;
display: flex;
flex-direction: column;
}
Теперь создадим первый элемент корзины для сайта на JavaScript, который будет названием товара. Для этого изменим значение высоты на 60 пикселей и зададим несколько основных стилей. Следующие три элемента - это товары в корзине. Для каждого из них мы установим высоту 120 пикселей и display: flex:
.title {
height: 60px;
border-bottom: 1px solid #E1E8EE;
padding: 20px 30px;
color: #5E6977;
font-size: 18px;
font-weight: 400;
}
.item {
padding: 20px 30px;
height: 120px;
display: flex;
}
.item:nth-child(3) {
border-top: 1px solid #E1E8EE;
border-bottom: 1px solid #E1E8EE;
}
Мы задали основные стили. Теперь по порядку установим стили для товаров. Первыми элементами являются кнопки «Удалить» и «Добавить в избранное».
Мне всегда нравилась анимация кнопок-сердечек Twitter. Я думаю, что она будет отлично смотреться в скрипте корзины для сайта:
.buttons {
position: relative;
padding-top: 30px;
margin-right: 60px;
}
.delete-btn,
.like-btn {
display: inline-block;
Cursor: pointer;
}
.delete-btn {
width: 18px;
height: 17px;
background: url("delete-icn.svg") no-repeat center;
}
.like-btn {
position: absolute;
top: 9px;
left: 15px;
background: url('twitter-heart.png');
width: 60px;
height: 60px;
background-size: 2900%;
background-repeat: no-repeat;
}
Мы устанавливаем класс «is-active» при нажатии кнопки, чтобы анимировать ее с помощью jQuery, но об этом подробнее в следующем разделе:
.is-active {
animation-name: animate;
animation-duration: .8s;
animation-iteration-count: 1;
animation-timing-function: steps(28);
animation-fill-mode: forwards;
}
@keyframes animate {
0% { background-position: left; }
50% { background-position: right; }
100% { background-position: right; }
}
Следующий элемент скрипта корзины для сайта HTML - это изображение товара, для которого нужно задать поле справа 50 пикселей:
.image {
margin-right: 50px;
}
Let’s add some basic style to product name and description.
.description {
padding-top: 10px;
margin-right: 60px;
width: 115px;
}
.description span {
display: block;
font-size: 14px;
color: #43484D;
font-weight: 400;
}
.description span:first-child {
margin-bottom: 5px;
}
.description span:last-child {
font-weight: 300;
margin-top: 8px;
color: #86939E;
}
Далее нужно задать стили для количества приобретаемого товара: кнопки для увеличения и уменьшения количества. Сначала мы создадим CSS корзины покупок для сайта, а затем заставим его работать с помощью JavaScript:
.quantity {
padding-top: 20px;
margin-right: 60px;
}
.quantity input {
-webkit-appearance: none;
border: none;
text-align: center;
width: 32px;
font-size: 16px;
color: #43484D;
font-weight: 300;
}
button[class*=btn] {
width: 30px;
height: 30px;
background-color: #E1E8EE;
border-radius: 6px;
border: none;
cursor: pointer;
}
.minus-btn img {
margin-bottom: 3px;
}
.plus-btn img {
margin-top: 2px;
}
button:focus,
input:focus {
outline:0;
}
Полная стоимость товаров:
.total-price {
width: 83px;
padding-top: 27px;
text-align: center;
font-size: 16px;
color: #43484D;
font-weight: 300;
}
Также реализуем функцию адаптивности корзины для HTML сайта, добавив следующие строки кода:
@media (max-width: 800px) {
.shopping-cart {
width: 100%;
height: auto;
overflow: hidden;
}
.item {
height: auto;
flex-wrap: wrap;
justify-content: center;
}
.image img {
width: 50%;
}
.image,
.quantity,
.description {
width: 100%;
text-align: center;
margin: 6px 0;
}
.buttons {
margin-right: 20px;
}
}
Это все, что касается CSS.
JavaScript
Перед тем, как сделать корзину на сайте, создадим анимацию сердечек, которая будет запускаться, когда пользователь нажимает на них:
$('.like-btn').on('click', function() {
$(this).toggleClass('is-active');
});
Теперь заставим работать кнопки количества приобретаемого товара:
$('.minus-btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $input = $this.closest('div').find('input');
var value = parseInt($input.val());
if (value > 1) {
value = value - 1;
} else {
value = 0;
}
$input.val(value);
});
$('.plus-btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $input = $this.closest('div').find('input');
var value = parseInt($input.val());
if (value < 100) {
value = value + 1;
} else {
value =100;
}
$input.val(value);
});
И это наша окончательная версия корзины товаров для сайта:
Предпросмотр
Руководство завершено! Надеюсь, оно вам понравилось, и вы узнали что-то новое. Если у вас есть вопросы, напишите об этом в комментариях!