Корзина для сайта магазина с помощью CSS и JavaScript
В этом руководстве мы продемонстрируем как создать корзину для интернет-магазина с использованием HTML и CSS3 . При этом мы применим Google Fonts ( шрифт « Roboto » ).
HTML
Шаг 1: Создадим HTML-структуру
Сначала нужно создать контейнер div , который мы назовем « .shopping-cart ».
Внутри него у нас будет заголовок и три пункта, которые будут содержать:
- Кнопку « Удалить » и кнопку « Добавить в избранное »;
- Изображение товара;
- Название и описание товара;
- Кнопки, с помощью которых можно задавать количество товара;
- Итоговую цену.
Shopping BagCommon Projects Bball High White$549Maison Margiela Future Sneakers White$870Our Legacy Brushed Scarf Brown$349
CSS
Убедитесь, что при создании корзины для сайта на PHP вы подключили шрифт, который мы используем в этом руководстве. Теперь добавим основные стили для раздела body :
* < box-sizing: border-box; >html, body
После этого создадим корзину с размерами 750 на 423 пикселя и зададим для нее стили. Обратите внимание, что мы используем flexbox , поэтому устанавливаем для свойства display значение flex , а для flex-direction – column . Потому что по умолчанию для flex-direction установлено значение row :
.shopping-cart
Теперь создадим первый элемент корзины для сайта на 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)
Мы задали основные стили. Теперь по порядку установим стили для товаров. Первыми элементами являются кнопки « Удалить » и « Добавить в избранное ».
Мне всегда нравилась анимация кнопок-сердечек 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
Мы устанавливаем класс « 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
Далее нужно задать стили для количества приобретаемого товара: кнопки для увеличения и уменьшения количества. Сначала мы создадим 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
Полная стоимость товаров:
.total-price
Также реализуем функцию адаптивности корзины для 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); >);
И это наша окончательная версия корзины товаров для сайта :
Руководство завершено! Надеюсь, оно вам понравилось, и вы узнали что-то новое. Если у вас есть вопросы, напишите об этом в комментариях!
Скрипт корзины для лендинга
06.11.22. Друзья, с радостью сообщаю, что начинаю разработку новой версии корзины (SmartBasket). Теперь это будет каталог товаров с удобным редактированием из админки. Многие просили упростить этот процесс и сделать более наглядным.
В связи с этим к вам есть небольшая просьба. Если у вас есть какие-то идеи, советы или пожелания – добавляйтесь в телеграм-чат. Так я пойму, что Smartbasket действительно кому-то нужен и есть смысл развивать проект. Будем голосовать за новый функционал, общаться и вместе делать корзину лучше. Хочется делать продукт не «в стол», а чтобы он реально было полезен людям.
Если за 2 месяца наберется более 150 человек, то буду продолжать развивать проект, добавляя новые функции и возможности. Если окажется, что потребности в корзине нет, то закончу минимально-рабочую версию и займусь чем-то новым.
Скрипт, который описан в статье ниже больше не поддерживается.
Всем, привет. Многие слышали, что я начал разрабатывать свой скрипт корзины для лендинга. На блоге уже была статья на эту тему, но я использовал готовое решение другого автора.
Сначала все прекрасно работало, но, примерно год назад, многие начали жаловаться, что корзина не работает. Связано это было с тем, что часть файлов, необходимых для работы скрипта лежали на сервере у разработчика, который время от времени «падал», причем не на короткое время, а на недели. Конечно читателей это не устраивало. Кроме того, некоторые писали и об ошибках работы самой логики скрипта, связанной с подсчетом цены при удалении товара из корзины.
Сначала я рекомендовал написать напрямую автору скрипта, но позже решил заняться разработкой корзины самостоятельно, так как многие об этом просили. Появилось немного времени, и я на скорую руку собрал минимальный функционал корзины.
Назвал скрипт SmartBasket и в этой статье хочу поделиться им с вами. Если он окажется полезным и интересным для вас, то напишите мне, пожалуйста, в комментариях свой отзыв (чего не хватает конкретно вам, что улучшить, какой функционал добавить и т.д.). Так я пойму, что скрипт корзины действительно нужен и будет стимул его развивать.
Демонстрация работы скрипта
Как подключить корзину
Для подключения скрипта, скачайте архив с этой страницы и поместите папку smartbasket в корень вашего сайта.
Так как скрипт использует jQuery, то убедитесь, что он у вас подключен.
После подключения jQuery (обычно перед закрывающим тегом body) подключаем и инициализируем скрипт, там же добавим div, в котором и будет располагаться основная корзина.
Не забываем подключить и таблицу стилей:
Настройки корзины
С подключением закончили, теперь давайте займемся настройкой.
Сразу хочу сказать, что при разработке скрипта я ориентировался на то, чтобы, практически, никак не влиять на внешний вид вашего сайта. Не подключал никаких шрифтов, не писал стилей для карточек и т.д. Старался сделать так, чтобы по минимуму влиять на внешний вид вашего сайта.
Итак, первое что мы сделаем — это укажем нашему скрипту обертку вашей карточки товара.
Для этого, в месте, где инициализировали скрипт указываем класс обертки карточки в параметре ‘productElement‘:
$(function () < $('.smart-basket__wrapper').smbasket(< productElement: 'product__element', >); >);
product__element — и есть класс моего блока с карточкой.
На следующем шаге нужно указать скрипту класс кнопки, которая будет отправлять товар в корзину, для этого воспользуемся параметром «buttonAddToBasket»:
$(function () < $('.smart-basket__wrapper').smbasket(< productElement: 'product__element', buttonAddToBasket: 'product__add-to-cart-button', >); >);
product__add-to-cart-button — класс моей кнопки.
У кнопки есть несколько обязательных атрибутов, в которых и хранятся основные данные о товаре.
- data-sb-id-or-vendor-code — артикул или id товара;
- data-sb-product-name — название товара;
- data-sb-product-price — цена, разделенная точкой, если есть копейки;
- data-sb-product-quantity — количество, по умолчанию укажите 1;
- data-sb-product-img — полный путь к картинке;
Не обязательные атрибуты:
- data-sb-product-size — размер. Задается, если вы используете опцию вывода размера в карточке товара. Подробнее о том, как это сделать в инструкции ниже.
Пример кнопки
Обратите внимание, что все атрибуты обязательны для заполнения. Если у вас нет артикула, то просто задайте уникальный набор цифр.
Следующим параметром, который мы настроим будет маска ввода номер телефона «countryCode». По умолчанию сейчас маска для Украины с первыми цифрами ‘+38‘, но вы можете поставить, ‘+7‘ или любые другие цифры.
Пока можно менять только их, но, если вы хотите иметь полный контроль над всеми цифрами, напишите мне и я сделаю.
$(function () < $('.smart-basket__wrapper').smbasket(< productElement: 'product__element', buttonAddToBasket: 'product__add-to-cart-button', countryCode: '+7', >); >);
Теперь укажем валюту, которую хотим использовать в корзине. Для этого есть параметр smartBasketCurrency, в который можно положить один из значков валют:
$(function () < $('.smart-basket__wrapper').smbasket(< productElement: 'product__element', buttonAddToBasket: 'product__add-to-cart-button', countryCode: '+7', smartBasketCurrency: '₽', >); >);
Выбор количества
Если ваша карточка товара предусматривает выбор количества товара, добавляемого в корзину, то укажите класс элемента где будет располагаться блок выбора количества в параметре ‘productQuantityWrapper‘. Например, я хочу, чтобы выбор количества располагался в теге div с классом ‘product__quantity’.
$(function () < $('.smart-basket__wrapper').smbasket(< productElement: 'product__element', buttonAddToBasket: 'product__add-to-cart-button', countryCode: '+7', smartBasketCurrency: '₽', productQuantityWrapper: 'product__quantity', >); >);
После добавления параметра ‘productQuantityWrapper’ cо значением ‘product__quantity’, кнопки выбора количества автоматически появятся на сайте в указанном блоке.
Выбор размера в карточке
Недавно появилась возможность добавлять размер, который в свою очередь, может влиять и на цену. Например, в интернет-магазине продают 3 размера пиццы — 32 см, 26 см или 16 см. От радиуса зависит и цена. Вы хотите, чтобы в карточке пользователь мог выбрать нужный размер.
Давайте я немного поясню суть работы. Вот так выглядит верстка блока с выбором размера у меня:
32 см26 см22 см
