<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Webdevkin. Интернет-магазин. Каталог с пагинацией</title>
    <meta name="description" content="Тестовый интернет-магазин от webdevkin-a. Каталог с пагинацией" />
    <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,700&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body data-page="catalogPag">
    <div class="container">
        <h1>Каталог с пагинацией. Интернет-магазин shop.webdevkin.ru</h1>
        <br />
        Статьи на webdevkin-e. Читаем, разбираем, комментируем...
        <br />
        <br />
        <a href="https://webdevkin.ru/posts/frontend/korzina-dlya-internet-magazina-na-fronte-ili-pishem-modulnyij-javascript" target="_blank">
            "Корзина для интернет-магазина на фронте или Пишем модульный javascript".
        </a>
        <br />
        <a href="https://webdevkin.ru/posts/backend/internet-magazin-realizuem-oformlenie-zakaza-na-kliente-i-servere" target="_blank">
            "Реализуем отправку заказа в интернет-магазине на клиенте и сервере".
        </a>
        <br />
        <a href="https://webdevkin.ru/posts/frontend/kak-dobavit-dostavku-v-internet-magazine" target="_blank">
            "Как добавить доставку в интернет-магазине".
        </a>
        <br />
        <a href="https://webdevkin.ru/posts/frontend/filtryi-i-sortirovka-v-internet-magazine-na-ajax-php-mysql" target="_blank">
            "Фильтры и сортировка в интернет-магазине на ajax-php-mysql. Серия уроков".
        </a>
        <br />
        <a href="https://webdevkin.ru/posts/frontend/sravnenie-tovarov-v-internet-magazine" target="_blank">
            "Сравнение товаров в интернет-магазине".
        </a>
        <br />
        <a href="https://webdevkin.ru/posts/frontend/postranichnaya-navigacziya" target="_blank">
            "Постраничная навигация".
        </a>
        <br />
        <br />
        <br />
        <ul class="nav nav-pills">
            <li><a href="/">Каталог</a></li>
            <li><a href="catalog.html">Каталог с фильтрами</a></li>
            <li class="active"><a href="catalog-pag.html">Каталог с пагинацией</a></li>
            <li id="compare-tab"><a href="compare.html">Сравнение товаров<span class="badge"></span></a></li>
            <li><a href="cart.html">Корзина<span id="total-cart-count" class="badge"></span></a></li>
            <li><a href="order.html">Оформление заказа</a></li>
        </ul>
        <br />
        <div class="row">
            <div class="btn-group col-md-6">
                <button type="button" data-category="0" class="btn btn-default active js-category">Все категории</button>
                <button type="button" data-category="1" class="btn btn-default js-category">Ноутбуки</button>
                <button type="button" data-category="2" class="btn btn-default js-category">Смартфоны</button>
                <button type="button" data-category="3" class="btn btn-default js-category">Видеокарты</button>
            </div>
            <div class="btn-group col-md-6">
                <button type="button" data-theme="big" class="btn btn-default js-theme" title="Большие фото"><span class="glyphicon glyphicon-th-large"></span></button>
                <button type="button" data-theme="compact" class="btn btn-default js-theme" title="Компактный вид"><span class="glyphicon glyphicon-th"></span></button>
                <button type="button" data-theme="list" class="btn btn-default js-theme" title="Списком"><span class="glyphicon glyphicon-list"></span></button>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-2">
                Товаров на странице:
                <select id="pages-limit" class="form-control col-md-3">
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="100">100</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <ul id="pagination" class="pagination"></ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                Показаны товары: <span id="goods-info"></span>
            </div>
        </div>
        <ul id="goods" class="list-unstyled">
            <img src="img/loading.gif" alt="" />
        </ul>
    </div>

    <script id="goods-template-compact" type="text/template">
        <% _.each(goods, function(item) { %>
        <li class="small-good-item row">
            <div class="col-md-2">
                <img class="small-good-item__img" src="img/goods/<%= item.photo %>" />
            </div>
            <div class="col-md-10">
                <div class="small-good-item__id">Артикул <%= item.good_id %></div>
                <div class="small-good-item__name"><%- item.good %> (рейтинг <%= item.rating %>)</div>
                <div class="small-good-item__brand">Бренд: <%- item.brand %></div>
                <div class="small-good-item__price"><%= item.price %> руб.</div>
                <button
                    class="small-good-item__btn-add btn btn-info btn-sm js-add-to-cart"
                    data-id="<%= item.good_id %>"
                    data-name="<%- item.good %>"
                    data-price="<%= item.price %>"
                >Добавить в корзину</button>
                <button
                    class="btn btn-link btn-sm js-add-to-compare"
                    data-id="<%= item.good_id %>"
                    data-category-id="<%= item.category_id %>"
                >Добавить к сравнению</button>
            </div>
        </li>
        <% }); %>
    </script>

    <script id="goods-template-big" type="text/template">
        <% _.each(goods, function(item) { %>
        <li class="good-item row">
            <div class="col-md-4">
                <img class="good-item__img" src="img/goods/<%= item.photo %>" />
            </div>
            <div class="col-md-8">
                <div class="good-item__id">Артикул <%= item.good_id %></div>
                <div class="good-item__name"><%- item.good %></div>
                <div class="good-item__price"><%= item.price %> руб.</div>
                <button
                    class="good-item__btn-add btn btn-info btn-sm js-add-to-cart"
                    data-id="<%= item.good_id %>"
                    data-name="<%- item.good %>"
                    data-price="<%= item.price %>"
                >Добавить в корзину</button>
            </div>
        </li>
        <% }); %>
    </script>

    <script id="goods-template-list" type="text/template">
        <br />
        <br />
        <% _.each(goods, function(item) { %>
        <li class="row">
            <div class="col-md-12">
                <p>
                    Артикул <%= item.good_id %>, <%- item.good %>. Цена: <%= item.price %> руб.
                    <a
                        class="btn btn-link btn-sm js-add-to-cart"
                        data-id="<%= item.good_id %>"
                        data-name="<%- item.good %>"
                        data-price="<%= item.price %>"
                    >Добавить в корзину</a>
                </p>
            </div>
        </li>
        <% }); %>
    </script>

    <script id="pagination-template" type="text/template">
        <% if (page !== 1) { %>
        <li data-page="1"><a href>&laquo;</a></li>
        <li data-page="<%= page-1 %>"><a href>&lt;</a></li>
        <% } %>

        <% for (var i = 1; i <= countPages; i++) { %>
        <li data-page="<%= i %>" <%= (i === page) ? ' class="active"' : '' %>><a href><%= i %></a></li>
        <% } %>

        <% if (page !== countPages) { %>
        <li data-page="<%= page + 1 %>"><a href>&gt;</a></li>
        <li data-page="<%= countPages %>"><a href>&raquo;</a></li>
        <% } %>
    </script>

    <script src="js/vendor/jquery.min.js" type="text/javascript"></script>
    <script src="js/vendor/jquery.cookie.js" type="text/javascript"></script>
    <script src="js/vendor/underscore.min.js" type="text/javascript"></script>
    <script src="js/modules/catalogPag.js" type="text/javascript"></script>
    <script src="js/modules/cart.js" type="text/javascript"></script>
    <script src="js/modules/compare.js" type="text/javascript"></script>
    <script src="js/modules/main.js" type="text/javascript"></script>
</body>
</html>