Корзина для сайта магазина с помощью 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 &gt; 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 &lt; 100) {
        value = value + 1;
    } else {
        value =100;
    }
 
    $input.val(value);
});

И это наша окончательная версия корзины товаров для сайта:

Предпросмотр

Руководство завершено! Надеюсь, оно вам понравилось, и вы узнали что-то новое. Если у вас есть вопросы, напишите об этом в комментариях!

Дайте знать, что вы думаете по этой теме материала в комментариях. Мы очень благодарим вас за ваши комментарии, отклики, дизлайки, подписки, лайки!

Пожалуйста, оставляйте ваши мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, отклики, дизлайки, лайки, подписки!

Пожалуйста, оставляйте свои отзывы по текущей теме статьи. За комментарии, отклики, дизлайки, подписки, лайки огромное вам спасибо!

Вадим Дворниковавтор-переводчик статьи «How to Create a Shopping Cart UI using CSS & JavaScript»

Подписывайтесь на наши группы в социальных сетях
Подписаться
Уведомить о
5 комментариев
Новые
Старые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Elendarien

<input type="button" value="-" class="bminus">
<input type="text" id="counter" name="count" value="1" min="1" step="1" title="Кол-во">
<input type="button" value="+" class="bplus">
<script>
$(document).ready(function(){
$('.bminus').click(function(e){
e.preventDefault();
var $this = $(this);
var input = $('#counter');
var value = parseInt(input.val());
if(value > 1){value = value - 1;}
else{value = 0;}
input.val(value);
});

$('.bplus').click(function(e){
e.preventDefault();
var $this = $(this);
var input = $('#counter');
var value = parseInt(input.val());
if(value < 100){value = value + 1;}
else{value = 100;}
input.val(value);
});
});
</script>

Алекс Харлов

Скрипт не дописан. Не суммируется итог.

Dima Baimel

kak izmenit zenu kogda menaem kolichestvo?

Анюта Нюточка

А php код можно для этой корзины?)

Дима Дрон

В JavaScript хотяб спецсимволы заменили, > и < на > <