Webdevkin. Интернет-магазин. Javascript

Как сделать — Форму оформления заказа

Узнать, как создать отзывчивую форму оформления заказа с помощью CSS.

Форма оформления заказа

Платежный адрес

Платеж

Корзина 4

Создать форму оформления заказа

Шаг 1) Добавить HTML

Использовать элемент для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP.

Пример

Платежный адрес

Имя

Email

Адрес

Город

Шаг 2) Добавить CSS:

Используйте CSS Флексбокс для создания адаптивного макета:

Пример

.row <
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 0 -16px;
>

.container background-color: #f2f2f2;
padding: 5px 20px 15px 20px;
border: 1px solid lightgrey;
border-radius: 3px;
>

input[type=text] width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
>

label margin-bottom: 10px;
display: block;
>

.icon-container margin-bottom: 20px;
padding: 7px 0;
font-size: 24px;
>

.btn background-color: #4CAF50;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius: 3px;
cursor: pointer;
font-size: 17px;
>

.btn:hover background-color: #45a049;
>

span.price float: right;
color: grey;
>

/* Адаптивный макет — когда экран меньше 800 пикселей в ширину, сделайте два столбца стеком друг на друга, а не рядом друг с другом (и измените направление-сделайте столбец «корзина» сверху) */
@media (max-width: 800px) .row flex-direction: column-reverse;
>
.col-25 margin-bottom: 20px;
>
>

Совет: Зайдите на наш учебник HTML Форма, чтобы узнать больше о формах HTML.

Совет: Зайдите на наш учебник CSS Форма, чтобы узнать больше о том, как стилизовать элементы формы.

Совет: Зайдите на наш учебник CSS Флексбокс чтобы узнать больше о гибком модуле компоновки коробки.

Источник

Корзина для сайта магазина с помощью CSS и JavaScript

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

HTML

Шаг 1: Создадим HTML-структуру

Сначала нужно создать контейнер div , который мы назовем « .shopping-cart ».

Внутри него у нас будет заголовок и три пункта, которые будут содержать:

• Кнопку « Удалить » и кнопку « Добавить в избранное »;
• Изображение товара;
• Название и описание товара;
• Кнопки, с помощью которых можно задавать количество товара;
• Итоговую цену.

 
  
Shopping Bag
  
 
 
 
Common Projects Bball High White 
 
        
 
$549
 
  
 
 
 
Maison Margiela Future Sneakers White 
 
        
 
$870
 
  
 
 
 
Our Legacy Brushed Scarf Brown 
 
        
 
$349
 
 

CSS

Убедитесь, что при создании корзины для сайта на PHP вы подключили шрифт, который мы используем в этом руководстве. Теперь добавим основные стили для раздела body :

После этого создадим корзину с размерами 750 на 423 пикселя и зададим для нее стили. Обратите внимание, что мы используем flexbox , поэтому устанавливаем для свойства display значение flex , а для flex-direction – column . Потому что по умолчанию для flex-direction установлено значение row :

Теперь создадим первый элемент корзины для сайта на JavaScript , который будет названием товара. Для этого изменим значение высоты на 60 пикселей и зададим несколько основных стилей. Следующие три элемента — это товары в корзине. Для каждого из них мы установим высоту 120 пикселей и display: flex :

Мы задали основные стили. Теперь по порядку установим стили для товаров. Первыми элементами являются кнопки « Удалить » и « Добавить в избранное ».

Мне всегда нравилась анимация кнопок-сердечек 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

Также реализуем функцию адаптивности корзины для 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; >>

JavaScript

Перед тем, как сделать корзину на сайте , создадим анимацию сердечек, которая будет запускаться, когда пользователь нажимает на них:

Теперь заставим работать кнопки количества приобретаемого товара:

$('.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); >);

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

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

Источник

Корзина для интернет-магазина на фронте или Пишем модульный javascript

Однажды пришла мне в голову безумная идея написать серию постов про различные подходы к организации javascript-кода. Такая мысль образовалась, когда по рабочей надобности изучал React.js и возрадовался от некоторых идей, заложенных его авторами. Захотелось потрогать его побольше, а потому как писать хеллоуворды из документации скучно, нужна была какая-то идея. Раз уж я начал вести блог на тему веб-разработки, то почему бы не создать простое, но более-менее внятное приложение с применением различных библиотек и фреймворков? И не только реакта, а любых других, до которых доберется дурной и воспаленный ум. В качестве подопытного приложения я возьму простенький интернет-магазин с каталогом и корзиной. Фишка будет в том, что код и каталога, и корзины будет написан на javascript. Корзина на фронте — не самое удачное решение для реальных проектов, но для небольших сайтов и в качестве изучения подойдет неплохо. Для изучения React понадобится сколько-то времени, поэтому для начала развлеку вас статьей, где опишу процесс создания нашего приложения без использования библиотек и фреймворков, но с использованием яваскрипт-модулей. Главная моя цель — это показать различные подходы к созданию приложений на javascript. С версткой заморачиваться сильно не буду, сверстаю на bootstrap, основной упор сделаю на javascript-код. Манипулировать DOM будем всем знакомым добрым jquery. Также подключим underscore для работы с данными и html-шаблонами. Данные для каталога загрузим из внешнего json-файла, а корзину будем хранить в localStorage. Итак, начнем.

Идея приложения и схема работы.

Итак, интернет-магазин на фронте. Что мы хотим от него? Хотим, чтобы была возможность как минимум вывести каталог товаров, реализовать добавление их в корзину, просматривать оную корзину, менять количество товаров в ней и удалять ошибочно добавленные с пересчетом стоимости заказа. Плюс добавим хранение данных в localStorage, дабы после перезагрузки страницы наша корзина не ушла в небытие.

Обращаю внимание, что это не одностраничное приложение. Мы создадим 2 html-страницы, каталог и корзина, но они будут служить только каркасом с основному коду. Основной код — это все-таки javascript.

Функционал подробнее.

Главное меню — 2 кнопки, каталог и корзина. В меню рядом с надписью «корзина» показывается выбранных количество товаров. Страница index — главная страница магазина, она же каталог. Подгружаем товары их из внешнего json-файла. Товары имеют поля: id, name, price, img. У каждого товара есть кнопка «Добавить в корзину». Список товаров храним в localStorage (id, name, count, price). Корзина — таблица с выбранными товарами. Выводим id и название товара, его количество и сумму. Под таблицей показываем общую сумму всех товаров. При изменении количества товаров и его удалении меняем все связанные данные. Каталог и корзину мы оформим в виде отдельных модулей.

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

Структура файлов

В корне проекта разместим 2 файла: index.html (каталог) и cart.html (корзина). И несколько папок: css, там лежит bootstrap.min.css и main.css — наши стили. Папка data содержит один файл goods.json — наши товары. fonts хранит шрифты от bootstrap-иконок. img — картинки товаров и гифку loading, которую мы будем показывать посетителям сайта, пока грузится каталог и корзина. Папка js разделена на 2 подпапки: vendor и modules. vendor содержит нужные нам библиотеки: jquery и underscore, а modules — модули нашего приложения. Их всего 3: main.js отвечает за инициализацию приложения, catalog — за вывод товаров, cart — за работу корзины.

Небольшое отступление: я намеренно не стал вводить лишнюю логику для нашего проекта. Хорошей практикой считается разработка с подходом MVC, разделение кода на модели, контроллеры и представления и разбиение этих частей на отдельные файлы для наглядности. Можно долго спорить на тему правильности применения такого подхода для абсолютно всех проектов, но в нашем конкретном примере мы отойдем от этого постулата и весь код для управления корзиной разместим в одном файле, а уже внутри него логически отделим работу с данными от разметки.

Приступаем к разработке.

Я не буду расписывать подробно каждую строчку кода, это заняло бы слишком много места и времени. В статье рассмотрим основные моменты, а весь код можно посмотреть в исходниках по ссылке выше. Код с подробными комментариями.
Начинаем.

Создаем разметку.

Создадим в корне нашего проекта файлы index.html и cart.html. Каждый файл — стандартная html5-заготовка. В блоке head подключим шрифт Ubuntu с Google Fonts и 2 css-файла: bootstrap.min.css и наши собственные стили main.css.

Источник

Шаблон адаптивной корзины для магазина

В данной заметке речь пойдет о том, как создать адаптивную корзину для интернет-магазина. Само собой, шаблон не привязан к какой-либо конкретной CMS и, соответственно, с небольшими модификациями (изменение названий переменных и проч.) его можно использовать в любом проекте. Сам шаблон — это html + css, без использования различных «наворотов». Хотя, при желании, функционал можно значительно расширить с помощью ajax и прочих технологий.

Небольшое предисловие: Сразу стоит заметить, что приведенный шаблон, конечно, адаптивен, но при этом применим не ко всем сайтам (например, если на сайте число товаров в одной корзине больше двух, то лучше выбрать шаблон, основанный на табличной верстке). Также есть другие реализации концепции данного шаблона. В остальном, он полностью рабочий и его легко можно «портировать» на любую CMS (при условии, что подключена библиотека bootstrap).

Итак, первый шаг это, конечно, подключение bootstrap и jquery (вариативно). Правда, вполне возможно, что он уже подключен в шаблоне. Для того, чтобы подключить данные библиотеки нужно в head добавить ссылки на них (я пользуюсь cdn-ссылками, но это дело привычки):

Далее, собственно, разметка. У нас, в данной корзине, будет пять колонок: Фото, Название, Цена, Количество и кнопка «Удалить». Следовательно, html-скелет будет выглядеть следующим образом:

 
 
 
 
Название
 
Цена
 
Количество
 
Удалить
 

Из данного скелета видно, что все колонки одинаковой высоты, а стиль line-height с таким же значением, как и высота, добавлен для того, чтобы выровнять контент ячеек по высоте.

Далее, следует добавить небольшой «фикс» для мобильных устройств ( обратите внимание на класс mob-fix у всех колонок, кроме фото). Для данного класса в css пропишем следующее условие:

@media (max-device-width: 768px) < .mob-fix < height: auto !important; line-height: 20px !important; text-align: center; >>

Зачем это нужно? Учитывая то, что наши колонки на мобильном устройстве выстраиваются друг под другом, логичным шагом будет уменьшение высоты всех колонок (за исключением фотографии) до разумных размеров. Этот шаг избавит конечного пользователя от необходимости прокручивать наши 100-пиксельные блоки на маленьком мобильном экране.

Завершающим шагом будет добавление разделителя hr между блоками с товаром (можно заменить на border-bottom у родительского элемента) и пары кнопок в самом низу:

 
 
 
Пересчитать Оформить заказ 
 

В общем и целом все. Единственное, стоит заметить, что все указанные элементы нужно стилизовать под конкретный сайт, а тут на вкус и цвет…
И второе: Очень схематично, интеграция данного шаблона на сайт с CMS будет выглядеть следующим образом:

Другие читатели также интересовались:

Источник