Переходим ко второй части наших уроков. Здесь рассмотрим структуру проекта, его файлов и папок, сверстаем блоки с фильтрами, товарами и подключим плагин jQueryUI.slider для регулировки цен.
Структура файлов и папок
Те, кто читал мои предыдущие статьи про корзину и отправку заказа, ничего нового не увидят.
Если Вы с этими постами не знакомы, то кратко структура представляется так.
В корне проекта лежит файл catalog.html, который содержит базовую верстку и подключает стили и скрипты.
В папку js/modules положим файл catalogDB.js.
Суффикс "DB" - от database, чтобы отличать модуль с фильтрами, работающий с БД, от первого модуля каталога,
рассмотренного в статье про корзину.
В файле js/modules/main.js подключаются и инициализируются все модули, в том числе и наш новый catalogDB.
Для его подключения в main.js нужно будет написать пару строк.
В файле css/main.css находятся немногочисленные стили. В целом, мы вполне обойдемся и bootstrap.
В папку scripts закинем файл catalog.php, который будет выполнять всю серверную работу.
И последнее - в качестве элемента управления для регулирования цен мы воспользуемся готовым решением от jQueryUI,
а именно компонентом slider.
Создадим отдельную папку в корне components,
в ней папку jquery-ui и закинем в нее все файлы, имеющие отношение к компоненту slider.
А теперь последовательно.
Базовый файл catalog.html
Секция head ничем не отличается от других страниц нашего магазина.
Для body навесим атрибут data-page="catalogDB"
(это по аналогии с предыдущими страницами, чтобы отличать их друг от друга).
Содержимое body будет простым.
Пока ничего хитрого. Заголовок h2, меню nav nav-pills и два контейнера для фильтров и списка товаров.
Ими мы займемся чуть позже. В списке товаров будет крутиться гифка до тех пор, пока не загрузятся данные с сервера.
В конце перед закрывающимся тегом body подключаем 5 javascript-файлов: jQuery, underscore, наш новый модуль catalogDB,
старую добрую корзину и main.js - главный модуль приложения, который запускает все остальное.
Подробнее эти модули расписаны в статье Корзина для интернет-магазина на фронте.
Заготовка модуля catalogDB.js
Сильно мудрить не будем и пойдем по стопам и примерам предыдущих статей.
Объявим модуль-переменную catalogDB и заведем в ней пока единственную функцию init, которую экспортируем во внешний мир.
В init будет для начала строчка вывода в консоль соответствующего сообщения. Дальше, конечно же, ее расширим.
'use strict';
// Модуль каталога для работы с БД
var catalogDB = (function($) {
// Инициализация модуля
function init() {
console.info('init catalogDB');
}
// Экспортируем наружу
return {
init: init
}
})(jQuery);
Редактируем главный модуль main.js
Напоминаю, в main.js у нас находится модуль app - главный модуль приложения.
И его метод init, который и выполняет всю работу по инициализации соответствующих частей приложения.
Чтобы завести наш новый catalogDB, нужно дописать метод init в main.js вот так:
function init() {
if (page === 'catalog') {
catalog.init();
cart.init(optionsCatalog);
}
// --- Новый код
if (page === 'catalogDB') {
catalogDB.init();
cart.init(optionsCatalog);
}
// --- Новый код
if (page === 'cart') {
cart.init(optionsCart);
}
if (page === 'order') {
order.init();
cart.init(optionsOrder);
}
}
Мы просто запускаем catalogDB.init и инициализируем корзину с настройками, как на самой первой странице каталога.
Если все сделали правильно, то увидите примерно такую картину
Верстаем панель фильтров
Для начала добавим контейнерам filters и goods бутстраповские классы col-md-12,
дабы они занимали всю доступную ширину.
И добавим между ними парочку переносов строк, если прямо сейчас не хотим возиться с css.
А в filters уже напишем основную верстку
Верстка стандартная, на что стоит обратить внимание, так это на id, data-атрибуты, классы c js-префиксом и атрибуты name.
Все эти данные будут использоваться в дальнейшем в js-коде или участовать в формировании данных для отправки на сервер (как атрибуты name).
Понятно, что пока все данные захардкожены. Категории, бренды и цены будут подтягиваться с сервера и выглядеть прилично.
Я сознательно подготовил сначала всю верстку, чтобы потом не отвлекаться на нее при разработке js-кода.
А пока это выглядит так
Как Вы могли заметить, вместо обещанного слайдера для цен стоят обычные числа, разделенные обычными дефисом.
Сейчас мы это исправим.
Подключаем слайдер jqueryUI
Для подключения слайдера нам понадобится немногое - скачать нужные файлы с официального сайта и закинуть их в папку проекта.
Вот ссылка на используемый в нашей статье компонент.
В скачанном плагине будет по одному css и js файлу и папку images с иконками.
Создадим в корне нашего проекта папку components, а в ней jquery-ui, куда и положим скачанные файлы.
А теперь заставим все это добро работать.
Сначала подключим на странице каталога catalog.html два нужных файла -
components/jquery-ui/jquery-ui.min.css в секции head и components/jquery-ui/jquery-ui.min.js - среди скриптов в конце страницы.
Только js подключайте обязательно после jquery и до catalogDB.
Ну и самое интересное - js-код для инициализации слайдера.
Модуль catalogDB.js будет выглядеть так:
'use strict';
// Модуль каталога для работы с БД
var catalogDB = (function($) {
var ui = {
$prices: $('#prices'),
$pricesLabel: $('#prices-label'),
$minPrice: $('#min-price'),
$maxPrice: $('#max-price')
};
// Инициализация модуля
function init() {
_initPrices({
minPrice: 5000,
maxPrice: 50000
});
}
// Изменение диапазона цен
function _onSlidePrices(event, elem) {
var minPrice = elem.values[0],
maxPrice = elem.values[1];
ui.$pricesLabel.html(minPrice + ' - ' + maxPrice + ' руб.');
ui.$minPrice.val(minPrice);
ui.$maxPrice.val(maxPrice);
}
// Инициализация цен с помощью jqueryUI
function _initPrices(options) {
ui.$prices.slider({
range: true,
min: options.minPrice,
max: options.maxPrice,
values: [options.minPrice, options.maxPrice],
slide: _onSlidePrices
});
}
// Экспортируем наружу
return {
init: init
}
})(jQuery);
Для начала создадим объект ui, в котором закешируем нужные dom-элементы.
_initPrices выполняет саму инициализацию слайдера (взято из документации jqueryUI).
В параметре options мы передаем минимальное и максимальное значение для слайдера.
Опция slide содержит функцию _onSlidePrices, вызываемую при изменении позиций слайдера.
В _onSlidePrices пишем код, который перерисовывает метку с указанием диапазона цен и устанавливает значения для скрытых инпутов min-price и max-price.
А в методе init мы просто запустим _initPrices с левыми настройками 5000 и 50000.
Слайдер подключен, можете поиграть с ним и наблюдать, как меняются значения цен
Пора бы уже и заканчивать с версткой и переходить к более интересным вещам,
но нам осталось еще совсем немного - заделать список товаров.
Утешает то, что после этого к верстке мы уже не вернемся :-)
Верстаем список товаров
Товары у нас будут очень похожи на уже упоминаемый каталог из статьи про корзину в интернет-магазине.
Разве что чуть компактнее для экономии места. Добавим в разметку верстку для одного товара. Смотрим html-код.
Артикул 12, Acer Aspire
Бренд: Acer
18000 руб.
data-атрибуты ровно такие же, какие и нужны для возможности добавления товаров в корзину.
Картинки для всех товаров Вы найдете в исходниках (ссылка будет после публикации всех уроков).
И последним штрихом добавим немного css-кода в файл css/main.css.
Необязательно, но для небольшой красоты пусть будет.
Наконец наша верстка полностью готова, результат видим ниже
Подведем итоги
На этом уроке мы сверстали весь интерфейс фильтров и товаров нашего интернет-магазина,
практически не написав свои стили.
Этим мне и нравятся фреймворки вроде bootstrap, которые позволяют быстро накидать прототип страницы,
довольно простой, но притом не самый страшный.
Верстать нам больше не придется, следующий урок будет о том, как собрать все нужные данные на клиенте,
как отправить их на сервер и вернуть какой-то результат.
А пока можете вспомнить предыдущий урок про структуру базы данных.
Она нам еще пригодится при написании серверного кода.