1 953 Возможность сравнения товаров — одна из ключевых характеристик хорошего интернет-магазина. Между двумя сайтами посетитель несомненно отдаст предпочтение тому, который позволяет проводить удобное сравнение двух товаров. В особенности эта функция актуальна для крупных интернет-магазинов, в ассортименте которых легко заблудиться. Вашему вниманию предлагается один из наиболее удобных шаблонов, который позволяет просто и быстро проводить сравнения интересующих товаров по ключевым позициям в интернет-магазине.
Вот пример данного шаблона:
Скриншот, на котором отображены два выбранных товара:
Скриншот, где непосредственно сравниваются основные характеристики:
Составные части шаблона для сравнения продуктов в интернет-магазине
Данный шаблон состоит из двух частей — это HTML и Javascript части.
Часть 1: 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 можно вносить любое необходимое количество элементов.
Часть 2: Javascript
Задачи прописаны в предыдущей части, теперь это необходимо заставить работать. В папке демо находятся два необходимых скрипта, которые подключается в коде: classie.js и main.js
|
1 2 |
<script src="js/classie.js"></script> <script src="js/main.js"></script> |
Итак, данный шаблон дает возможность проводить сравнение трех товаров в интернет-магазине с использованием javascript. Следует также отметить, что шаблон адаптивный, поэтому его использование на мобильных устройствах будет таким же удобным, как и на экране большого монитора. Владельцам интернет-магазинов следует непременно присмотреться именно к этому решению.
