Filter: фильтрация товаров магазина

Разбираемся с JavaScript компонентом Фильтр из коробки UIkit 3. Применяем компонента для фильтрации товаров интернет-магазина.

Фильтрация — дело тонкое. Компонент Фильтр является достаточно большим, поэтому изучать его будем маленькими порциями.

Внимание! Данный пример — не призыв к действию. Фильтр подойдет не для всех случаев. Функциональность интернет-магазинов включает большое количество кода, поэтому применение подобной практики нельзя считать хорошей идеей. Мы показываем возможности компонента, но не рекомендуем использовать этот пример для большого количества товаров, т.к. это потребует загрузки всех карточек вместе с картинками, что неминуемо приведет медленной работе страницы. Лучше используйте Ajax.

Начнем с сетки. Создадим две колонки с шириной 25 и 75%. Разметка будет такой: 

<div uk-grid>
<div class="uk-width-1-4"></div>
<div class="uk-width-3-4"></div>
</div>

Далее в нашу разметку добавим 2 основных элемента: перключатели фильтра и список элементов фильтра. Стилизуем переключатели с помощью компонента Навигация. Фильтровать будем по параметру цвет и цена — дорого и дешево.

Всю нашу разметку обернем в div с атрибутом uk-filter. В атрибут добавим опцию назначения: target: .js-filter", где js-filter является списком элементов для фильтрации. Все настройки подробно описаны в документации.

<div class="uk-card uk-card-default uk-card-body" uk-sticky="top: #my-id; offset: 110">
<span class="uk-nav-header">Цвет</span>
<ul class="uk-nav uk-nav-default">
<li uk-filter-control="filter: [data-color='red']; group: data-color"><a href="#">Красный</a></li>
<li uk-filter-control="filter: [data-color='green']; group: data-color"><a href="#">Зеленый</a></li>
<li uk-filter-control="filter: [data-color='blue']; group: data-color"><a href="#">Синий</a></li>
</ul>
<span class="uk-nav-header">Цена</span>
<ul class="uk-nav uk-nav-default">
<li uk-filter-control="filter: [data-price='expensive']; group: price"><a href="#">Дорого</a></li>
<li uk-filter-control="filter: [data-price='cheap']; group: price"><a href="#">Дешево</a></li>
</ul>
</div>

Для удобства использования сделаем блок с переключателями фильтра липким. Он будет прилипать к верхнему краю сетки со сдвигом от верхнего края в 110px.

Не забудем добавить в атрибут uk-sticky параметр media: @ m, чтобы отключить липкое поведение на маленьких устройствах.

    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      99 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      6 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      6 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      78 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      6 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      96 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      6 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      6 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      96 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      6 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      76 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      100 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      6 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      7 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      86 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      96 999 р

      100 шт. в наличии

      Подробнее
    • UIkit cards
      Новинка

      Телевизор Panasonic TX-43FR250

      20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

      1 999 р

      100 шт. в наличии

      Подробнее 
  • <div uk-filter="target: .js-filter">
    <div uk-grid>
    <div class="uk-width-1-4" id="filter">
    <div class="uk-card uk-card-default uk-card-body" uk-sticky="top: #my-id; offset: 110">
    <span class="uk-nav-header">Цвет</span>
    <ul class="uk-nav uk-nav-default">
    <li uk-filter-control="filter: [data-color='red']; group: data-color"><a href="#">Красный</a></li>
    <li uk-filter-control="filter: [data-color='green']; group: data-color"><a href="#">Зеленый</a></li>
    <li uk-filter-control="filter: [data-color='blue']; group: data-color"><a href="#">Синий</a></li>
    </ul>
    <span class="uk-nav-header">Цена</span>
    <ul class="uk-nav uk-nav-default">
    <li uk-filter-control="filter: [data-price='expensive']; group: price"><a href="#">Дорого</a></li>
    <li uk-filter-control="filter: [data-price='cheap']; group: price"><a href="#">Дешево</a></li>
    </ul>

    </div>
    </div>

    <div class="uk-width-3-4">
    <ul class="js-filter uk-child-width-1-2@m" uk-grid>
    <li data-color="blue" data-price="expensive">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-primary">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-primary">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-primary">99 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="red" data-price="cheap">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">6 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="red" data-price="cheap">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">6 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="green" data-price="expensive">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-success">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-success">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-success">78 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="blue" data-price="cheap">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-primary">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-primary">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-primary">6 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="red" data-price="expensive">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">96 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="red" data-price="cheap">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">6 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="green" data-price="cheap">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-success">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-success">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-success">6 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="green" data-price="expensive">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-success">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-success">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-success">96 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="red" data-price="cheap">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">6 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="blue" data-price="expensive">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-primary">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-primary">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-primary">76 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="red" data-price="expensive">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">100 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="green" data-price="cheap">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-success">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-success">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-success">6 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="red" data-price="cheap">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">7 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="blue" data-price="expensive">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-primary">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-primary">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-primary">86 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="red" data-price="expensive">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">96 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    <li data-color="blue" data-price="cheap">
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title uk-text-primary">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate uk-text-primary">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-primary">1 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" uk-icon="icon: heart"></a></li>
    <li><a href="#" uk-icon="icon: comment"></a></li>
    <li><a href="#" uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    <div class="uk-card-footer">
    <div class="uk-flex uk-flex-between">
    <a class="uk-button uk-button-default" href="#">Подробнее</a>
    <button class="uk-button uk-button-primary uk-text-right">
    <span uk-icon="icon: cart;"></span>
    </button>
    </div>
    </div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    99 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    6 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    6 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    78 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    6 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    96 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    6 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    6 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    96 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    6 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    76 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    100 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    6 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    7 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    86 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    96 999 р

    100 шт. в наличии

    Подробнее
  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    1 999 р

    100 шт. в наличии

    Подробнее