Как с помощью CSS и JavaScript создать пользовательский интерфейс корзины интернет-магазина

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

Как при помощи CSS и JavaScript создать пользовательский интерфейс корзины интернет-магазина

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);});

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *