Ноябрь 4, 2019 Запись была обновлена
Шаблон сравнения продуктов
На сайтах, с большим выбором товаров и услуг возникает потребность в том, чтобы сравнить несколько продуктов. Ведь мы всегда сравниванием, ищем более подходящий вариант, который является самым оптимальным. Особенно нужна данная функция в интернет-магазинах, где выбор товаров очень большой и необходимо сравнить некоторые из них. В данной статье Вы увидите качественный шаблон для сравнения товаров, которые Вы можете применить в своём интернет-магазине при необходимости.
Рекомендую:
- Креативные блоки с анимацией на CSS
- Анимация CSS — работа фотоаппарата
- Галерея для сайта с эффектом размытия
Как работает данный элемент Вы можете протестировать самостоятельно:
Посмотреть примерСкачать
Скриншот выбора элементов для сравнения:
Скриншот сравнения 2-х товаров:
Из чего состоит данный шаблон сравнения продуктов?
HTML часть
Между тегами <head> </head> необходимо подключить необходимые стили для правильного отображения товаров на странице (component.css), а также иконки Font Awesome и скрипт Modernizr (modernizr.custom.js):
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> |
Далее располагаются продукты следующим образом:
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), которые можно взять из папки демо:
1 2 | <script src="js/classie.js"></script> <script src="js/main.js"></script> |
Вывод
С помощью данного шаблона можно сравнить максимум 3 товара одновременно. Если у Вас есть интернет-магазин, то я рекомендую добавить данный функционал в него. Также данный шаблон сравнения товаров является полностью адаптивным для мобильных устройств и подстраивается в зависимости от размеров экрана.
Успехов!
Источник: Оригинал
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Офигенный шаблон! В будущем хотелось бы обратиться к тебе, чтобы установить подобный)
Здравствуй, Юра. Да, полезная вещь. Спасибо, скачал. Пригодится. Может для небольших магазинов? Можно создать шаблон с одной стр. товара, ну и корзину сделать красивую, что там еще нужно? Подключить платежку и в путь 😉
Полностью согласен, Егор! 😎
Классный скрипт, а как записать в сессию выбранные товары, чтобы не очищался список при переходе на другую страницу?
Кстати больше трех товаров можно спокойно добавлять поправив лишь main.js (строка 25) и component.css (строка 248)
Cookie.js Вам в помощь. С помощью данной библиотеки Вы можете записать выбранные товары в куки.