Jump to content

Новый шаблон — Часть 5


Recommended Posts

support

Часть пятая.

В данной заметке покажу примеры шаблонов плиток товара, которые идут с новым шаблоном vamshop4 по умолчанию.

Но сначала покажу скриншот, как выглядит главная страница VamShop с новым шаблоном vamshop4 на данный момент.

Главная страница готова полностью, основные страницы тоже полностью готовы.

Все плитки одинаковой высоты вне зависимости от размера картинок товара, от названия товара и т.д., т.е. высота выстраивается автоматически.

screencapture-vamshop-loc-2019-04-10-23_10_01.png

Осталось совсем немного и шаблон будет готов и станет доступен всем пользователям VamShop.

Пройдено где-то уже 70% пути.

Итак…

По умолчанию доступно 7 плиток (шаблонов), по сути, они все похожи, но есть небольшая разница, об этом ниже.

Итак, доступно по умолчанию 7 разных вариантов оформления для товаров, категорий, брэндов, отзывов:

  1. product-card-listing.html
  2. product-card-simple.html
  3. product-card-details.html
  4. product-card-complex.html
  5. product-card-brand.html
  6. product-card-review.html
  7. box-card-category.html

product-card-listing.html — Шаблон плитки товара с максимальным выводом информации, предназначен для вывода списка товара внутри категории.

Используется там где надо вывести максимум информации о товаре: это и описание, и спецификации, и дополнительные поля товаров, и ярлык товара, и ярлык со скидкой товара, кнопка добавления в корзину, кнопка перехода на страницу карточки товара и всё, что угодно.

Если нужно показать максимум информации о товаре — используйте плитку product-card-listing.html

Шаблон плитки адаптивный, на больших экранах на весь экран растягивается:

product-card-listing-1.png

На смартфонах сжимается в одну колонку:

product-card-listing-2.png

product-card-simple.html — Шаблон плитки товара используемый по умолчанию во всех слайдерах на главной странице. Минималистичный шаблон, выводится только самая необходимая иноформация о товаре (картинка, название, ссылка, рейтинг, цена), без кнопки купить, без описания.

product-card-simple.png

product-card-details.html — Шаблон плитки товара, аналогичен product-card-simple. Разница лишь в том, что внизу добавлена кнопка Купить.

product-card-details.png

product-card-complex.html — Шаблон плитки товара, аналогичен product-card-details. Разница лишь в том, что кроме кнопки Купить ещё добавлено краткое описание товара.

product-card-complex.png

product-card-brand.html — Шаблон плитки брэнда, выводит логотип брэнда, название, описание и ссылку на страницу со списком товара данного брэнда. Данную плитку можно использовать и для товаров, она универсальная, подходит и для вывода товара и для вывода брэндов.

product-card-brand.png

product-card-review.html — Шаблон плитки товара с отзывом, выводит отзыв о товаре, оставленный клиентом магазина, т.е. выводит информацию о товаре: картинку, название, рейтинг, цену + сам отзыв.

product-card-review.png

box-card-category.html — Шаблон плитки категории, выводит информацию о категории: картинку, название, ссылку на категорию, можно добавить описание категории, если нужно. Используется по всему магазину там где нужно вывести категорию, подкатегорию. Например на главной странице список категори, на странице со списком всех категорий, на странице просмотра категорий, подкатегорий.

product-card-category.png

Вот такие варианты оформления будут Вам доступны в новом шаблоне VamShop.

Данные плитки универсальны и легко взаимозаменяемы и переподключаемы.

Проще говоря, Вы можете очень легко поменять один вид плитки на другой. К примеру, выводить в блоке новинки на главной странице не простую плитку с минимумом информации, а вывести все новинки с максимально подробной плиткой product-card-listing.html или product-card-complex.html. Это сделать очень легко, все плитки сделаны в виде готовых компонентов, просто меняете в шаблоне product-card-listing.html на product-card-complex.html и у Вас блок новинок рисуется новым шаблоном.

На этом можно закончить нашу заметку. Спасибо за внимание.

 

Link to post
Share on other sites
support

В целом новый шаблон готов.

Наверное всё-таки выпущу новую версию, что б зафиксировать то, что уже есть.

Всё равно постоянно будут вноситься правки и в новый шаблон и в текущие.

Но надо зафиксировать то, что уже сделано выпуском новой версии.

Вот как на данный момент выглядят главная страница, страница со списком товара и страница карточки товара.

Screenshot from 2019-04-17 11-53-47.png

Screenshot from 2019-04-17 11-54-04.png

Screenshot from 2019-04-17 11-54-29.png

Всё-таки шаблон будет целиком и полностью 1 колонкой, решил не делать 2 колонки на странице со списком товара.

На смартфонах просто сворачивается блок фильтров в кнопку, смысла в отдельной колонке нет.

Screenshot from 2019-04-17 11-56-22.png

Screenshot from 2019-04-17 11-56-25.png

Link to post
Share on other sites
×
×
  • Create New...