Шаблон порівняння продуктів

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

Відео: ДОРОГО | ДЕШЕВО | ПОРІВНЯННЯ ПРОДУКТІВ З "ОКЕЙ" !!!! ШОК! ПРОСТО ЖАХ!

рекомендую:

• Креативні блоки з анімацією на CSS
• Анімація CSS - робота фотоапарата
• Галерея для сайту з ефектом розмиття

Як працює цей елемент Ви можете протестувати самостійно:

Подивитися прімерСкачать

Скріншот вибору елементів для порівняння:

Скріншот порівняння 2-х товарів:

З чого складається цей шаблон порівняння продуктів?

HTML частина

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

12345

lt;link rel="Stylesheet" href="Http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"gt;lt;link rel="Stylesheet" type="Text / css" href="Css / demo.css" /gt;lt;link rel="Stylesheet" type="Text / css" href="Css / component.css" /gt;lt;script src="Js / modernizr.custom.js"gt; lt;/scriptgt;

Далі розташовуються продукти наступним чином:

12345678910111213141516

class="Grid"gt;lt;div class="Product"gt;lt;div class="Product__info"gt;lt;img class="Product__image" src="Images / 1.jpg" alt="Product 1" /gt;lt;h3 class="Product__title"gt; Chryseialt;/h3gt;lt;span class="Product__year extra highlight"gt; 2011lt;/spangt;lt;span class="Product__region extra highlight"gt; Dourolt;/spangt;lt;span class="Product__varietal extra highlight"gt; Touriga Nacionallt;/spangt;lt;span class="Product__alcohol extra highlight"gt; 13%lt;/spangt;lt;span class="Product__price highlight"gt; $ 55.90lt;/spangt;lt;button class="Action action - button action - buy"gt; lt;i class="Fa fa-shopping-cart"gt; lt;/igt; lt;span class="Action__text"gt; В кошикlt;/spangt; lt;/buttongt;lt;/divgt;lt;label class="Action action - compare-add"gt; lt;input class="Check-hidden" type="Checkbox" /gt; lt;i class="Fa fa-plus"gt; lt;/igt; lt;i class="Fa fa-check»gt; lt;/igt; lt;span class="Action__text action__text - invisible"gt; Додати для порівнянняlt;/spangt; lt;/labelgt;lt;/divgt;lt;/sectiongt;

Відео: Японка Мікі в Ашані. Порівняння Продуктів Росії і Японії

Кілька слів по коду:

• Рядки: з 2 по 14 - це один окремий блок з товаром.
• Рядок: 13 - кнопка додавання товарів для порівняння.

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

javascript частина

Останній крок - змусити це все функціонувати. Для цього необхідно підключити скрипти (classie.js і main.js), Які можна взяти з папки демо:

Відео: Каталог товарів ВАЖЛИВО! за шаблоном на Hostcms - Створити інтернет магазин 14

12

lt;script src="Js / classie.js"gt; lt;/scriptgt;lt;script src="Js / main.js"gt; lt;/scriptgt;

висновок

За допомогою даного шаблону можна порівняти максимум 3 товара одночасно. Якщо у Вас є інтернет-магазин, то я рекомендую додати даний функціонал в нього. Також даний шаблон порівняння товарів є повністю адаптивним для мобільних пристроїв і підлаштовується залежно від розмірів екрану.

Успіхів!

З повагою, Юрій Німець