Фильтры в интернет-магазине. Урок 5. Принимаем данные от сервера и отображаем их на клиенте

сентябрь 4 , 2016
Метки:
Предыдущая статья Следующая статья Демо Исходники

Пятый урок серии будет очень невелик. Настолько, что сначала я хотел включить его в заключительный урок серии про фильтры. Но все-таки решил выделить отображение товаров в браузере в отдельную статью. Этот урок будет очень позитивным в том плане, что небольшие усилия позволят нам, скажем так, "вживую" увидеть результат своей работы: меняем настройки фильтров в браузере и сразу видим отфильтрованный каталог. В принципе это и есть цель всей нашей работы. В заключительном же, шестом уроке, я расскажу о нескольких специфических вещах, которые требуют не столько написания кода, сколько разъяснения, зачм этот код нужен. А пока быстро пройдем пятый урок и полюбуемся, что у нас получится.


Что будем делать?

  • Во-первых, нужно создать underscore-шаблон для отображения товаров. Верстка у нас уже есть, осталось выделить ее в отдельный блок.
  • И во-вторых, чуточку подправить js-модуль каталога, чтобы обновлять товары в браузере при поступлении данных с сервера.


Создаем шаблон underscore

Напомню, что в файле catalog.html мы уже создали верстку для одного товара. Это мы сделали во втором уроке серии. В секции ul с id="goods" вся необходимая разметка уже есть. Удалим из этого блока все, кроме гифки и оставим вот так:

Почему мы оставили гифку? А чтобы клиенты нашего магазина при начальной загрузке страницы видели не пустой блок, а крутящийся цветочек, пока браузер ждет ответа от сервера. После этого содержимое id="goods" заменится html-разметкой товаров.

Саму html-разметку мы вынесем в отдельный шаблон на этой же странице, заменив руками вбитые данные на соответствующие поля объекта товара.

Шаблон назовем goods-template. Он будет отображать все товары, подаваемые ему на вход, перебирая эти товары в цикле _.each. Названия полей совпадают с полями, возвращаемыми из sql-запроса из предыдущего урока про базовый php-код для фильтрации товаров


Правим javascript в catalogDB.js

Тут правок немного. В объект ui добавим еще пару строк: контейнер goods и шаблон goods-template 

    var ui = {
        ...
        $goods: $('#goods'),
        $template: $('#goods-template')
    };

Чуть ниже, после переменной selectedCategory добавим еще одну. Это функция underscore template, которая будет готова принять данные о товарах с сервера. 

    var template = _.template(ui.$template.html());

Именно это мы и сделаем в методе _catalogSuccess. Добавим в него одну строчку, чтобы получилось так: 

    // Успешное получение данных
    function _catalogSuccess(responce) {
        console.log(responce);
        ui.$goods.html(template({goods: responce.goods}));
    }

Напомню, эта функция вызывается после успешного завершения запроса к серверу. Параметр responce содержит объект с данными, в том числе и массив товаров, который хранится в поле goods. Соответственно, вызов template({goods: responce.goods}) передаст в шаблон отфильтрованные товары в переменной goods и вернет нам html-строку, которые останется занести в контейнер #goods через стандартный метод jQuery.html().

Последнее, что нам осталось: это вызвать функцию _getData() в самом начале, при инициализации страницы, чтобы мы могли сразу увидеть список всех товаров, еще до применения фильтров.

Найдем фунцкцию init() и допишем в самом ее конце _getData();
Тем самым мы отправим запрос на сервер за товарами, дождемся ответа и в _catalogSuccess отобразим полученные товары в браузере.

Все! Давайте проверим, что у нас получилось.


Проверяем нашу работу

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

Не обращайте пока внимания на надписи "Категория №3 и №4", "Что-то еще" в брендах, а также на ноутбук Acer, появляющийся при выборе бренда Lenovo. Напоминаю, что эти списки мы забили руками во втором уроке и id были проставлены как попало. В базе данных под брендом 3 у нас идет именно Acer, поэтому сервер получает id бренда 3 и отрабатывает правильно.

К сожалению, я заметил это несоответствие слишком поздно, и сейчас уже не хочу править код в предыдущих статьях. Поэтому пока не обращайте внимания на это - в заключительной статье серии уроков мы как раз займемся тем, что приведем в порядок список категорий, научимся обновлять список брендов в зависимости от выбранной категории и сделаем еще несколько небольших, но необходимых условий для того, чтобы фильтры заработали в точности так, как нам и нужно.

А пока ссылка на предыдущий урок - Урок 4. Базовый php-код на сервере

UPDATED: Заключительный урок серии опубликован - Урок 6. Завершение работы с фильтрами

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

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