Лого www.SiteHere.ru

Шаблон сравнения продуктов

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

Рекомендую:

Как работает данный элемент Вы можете протестировать самостоятельно:

Посмотреть примерСкачать

Скриншот выбора элементов для сравнения:

Пример выбора продуктов для сравнения

Скриншот сравнения 2-х товаров:

Сравнение товаров

Из чего состоит данный шаблон сравнения продуктов?

HTML часть

Между тегами <head> </head> необходимо подключить необходимые стили для правильного отображения товаров на странице (component.css), а также иконки Font Awesome и скрипт Modernizr (modernizr.custom.js):

HTML КОД
1
2
3
4
5
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<!-- Modernizr -->
<script src="js/modernizr.custom.js"></script>

Далее располагаются продукты следующим образом:

HTML КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<section class="grid">
    <div class="product">
        <div class="product__info">
            <img class="product__image" src="images/1.png" alt="Product 1" />
            <h3 class="product__title">Chryseia</h3>
            <span class="product__year extra highlight">2011</span>
            <span class="product__region extra highlight">Douro</span>
            <span class="product__varietal extra highlight">Touriga Nacional</span>
            <span class="product__alcohol extra highlight">13%</span>
            <span class="product__price highlight">$55.90</span>
            <button class="action action--button action--buy"><i class="fa fa-shopping-cart"></i><span class="action__text">В корзину</span></button>
        </div>
        <label class="action action--compare-add"><input class="check-hidden" type="checkbox" /><i class="fa fa-plus"></i><i class="fa fa-check"></i><span class="action__text action__text--invisible">Добавить для сравнения</span></label>
    </div>
    <!-- Еще продукты -->
</section>

Несколько слов по коду:

  • Строки: со 2 по 14 — это один отдельный блок с товаром.
  • Строка: 13 — кнопка добавления товаров для сравнения.

То есть в блоке с классом grid Вы можете размещать столько элементов, сколько Вам необходимо.

Javascript часть

Последний шаг — заставить это всё функционировать. Для этого необходимо подключить скрипты (classie.js и main.js), которые можно взять из папки демо:

HTML КОД
1
2
<script src="js/classie.js"></script>
<script src="js/main.js"></script>

Вывод

С помощью данного шаблона можно сравнить максимум 3 товара одновременно. Если у Вас есть интернет-магазин, то я рекомендую добавить данный функционал в него. Также данный шаблон сравнения товаров является полностью адаптивным для мобильных устройств и подстраивается в зависимости от размеров экрана.

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

Из чего состоит любой сайт? HTML
+
CSS
+
JS
Технологии не поддаются обучению?
5 комментариев к записи
  • Никита Волков

    Офигенный шаблон! В будущем хотелось бы обратиться к тебе, чтобы установить подобный)

     
  • Егор

    Здравствуй, Юра. Да, полезная вещь. Спасибо, скачал. Пригодится. Может для небольших магазинов? Можно создать шаблон с одной стр. товара, ну и корзину сделать красивую, что там еще нужно? Подключить платежку и в путь 😉

     
    • Юрий

      Полностью согласен, Егор! 😎

       
  • Алекс

    Классный скрипт, а как записать в сессию выбранные товары, чтобы не очищался список при переходе на другую страницу?

    Кстати больше трех товаров можно спокойно добавлять поправив лишь main.js (строка 25) и  component.css (строка 248)

     
    • Юрий

      Cookie.js Вам в помощь. С помощью данной библиотеки Вы можете записать выбранные товары в куки.

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *