Фильтры в интернет-магазине. Урок 2. Структура проекта и верстка

август 9 , 2016
Предыдущая статья Следующая статья Демо Исходники

Переходим ко второй части наших уроков. Здесь рассмотрим структуру проекта, его файлов и папок, сверстаем блоки с фильтрами, товарами и подключим плагин 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 будет простым.

    

Webdevkin. Интернет-магазин. Фильтры в каталоге



// Здесь будут фильтры

Пока ничего хитрого. Заголовок 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 уже напишем основную верстку

        


    Бренды

    Фильтр по ценам

    5000 - 50000 руб.

    Сортировка


    Верстка стандартная, на что стоит обратить внимание, так это на 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. Необязательно, но для небольшой красоты пусть будет.

        /* Каталог товаров с фильтрами*/
        
        .small-good-item {
            border: solid 1px gray;
            padding: 5px;
            list-style: none;
            border-radius: 2px;
        }
        
        .small-good-item__img {
            max-width: 60%;
        }
        
        .small-good-item__name {
            color: steelblue;
        }
        
        .small-good-item__price {
            color: red;
        }
    

    Наконец наша верстка полностью готова, результат видим ниже Верстка с фильтрами, слайдером и товарами


    Подведем итоги

    На этом уроке мы сверстали весь интерфейс фильтров и товаров нашего интернет-магазина, практически не написав свои стили. Этим мне и нравятся фреймворки вроде bootstrap, которые позволяют быстро накидать прототип страницы, довольно простой, но притом не самый страшный.

    Верстать нам больше не придется, следующий урок будет о том, как собрать все нужные данные на клиенте, как отправить их на сервер и вернуть какой-то результат. А пока можете вспомнить предыдущий урок про структуру базы данных. Она нам еще пригодится при написании серверного кода.

    UPDATED: Следующий урок - Собираем данные на клиенте и отправляем их на сервер

    Все об интернет-магазинах

    Предыдущая статья Следующая статья Демо Исходники
    Заходите в группу в контакте - https://vk.com/webdevkin
    Анонсы статей, обсуждения интернет-магазинов, vue, фронтенда, php, гита.
    Истории из жизни айти и обсуждение кода.
    Как Вам статья? Оцените!