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

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