Вы задумываетесь о создании своего интернет магазина? Отлично! В этом уроке мы расскажем как правильно показать товар и сделать так, чтобы пользователи и дальше приходили в ваш интернет магазин.
Вот как будет выглядеть витрина нашего интернет магазина:
Как видите, она идеально подходит для книжной продукции. Мы показываем на странице сетку из книг, где мы сможем посмотреть детальную информацию о книге и открыть ее демонстрационный вариант в полноэкранном режиме для предварительного просмотра. Для просмотра книги в полноэкранном режиме мы воспользуемся jQuery-плагином BookBlock.
Для 3D преобразований мы применяем CSS свойство perspective, поэтому убедитесь, что ваши клиенты не пользуются IE9 и ниже!
HTML код для книги выглядит так:
<figure>
<div class="book" data-book="book-1"></div>
<div class="buttons">
<a href="#">Смотреть</a>
<a href="#">Детали</a></div>
<figcaption>
<h2>Название кнги<span>Автор</span></h2>
</figcaption>
<div class="details">
<ul>
<li>Краткое описание книги.</li>
<li>Graham Press</li>
<li>12.09.2010</li>
<li>397 страниц</li>
</ul>
</div>
</figure>
Как видите, ничего сложного) Когда мы нажимаем на ссылку "Детали", то наша книга поворачивается и совобождает место для подробной отформации товаре в интернет магазине (аннотация, автор, дата поступления в продажу и число страниц). После того, как мы нажмем на кнопку "Смотреть", книга раскроется и мы увидим несколько первых страниц для предварительного просмотра:
С помощью навигационных стрелок мы перелистываем текущую страницу в 3D и отображаем следующие страницы.
Если вы хотите подробно узнать как, что работает, вы можете заглянуть в файл bookshelf.js, а мы на этом заканчиваем рассказывать как можно сделать витнину интернет магазина и надеемся, что в сети скоро станет еще больше магазинов с низкими ценами.