Sign in to follow this  
support

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

Recommended Posts

support

Часть четвёртая.

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

Основной подход при создании нового шаблона — это так называемый «mobile first» подход, т.е. всё изначально делается с расчётом прежде всего на мобильные устройства, смартфоны и планшеты. На больших мониторах и ноутбуках, всё просто разворачивается, т.е. везде и всюду используется адаптивная вёрстка в новом шаблоне.

Главная страница в целом уже готова, внизу прицеплю скриншот, что б было понятно, как будет выглядеть главная страница в новом шаблоне.

Какие новые блоки были добавлены к уже существующим, по центру, на главной странице магазина:

  1. Добавлен вывод категорий.
  2. Добавлен вывод отзывов покупателей.
  3. Добавлен вывод брэндов (производителей), представленных в магазине.
  4. Добавлен вывод популярных товаров, бестселлеров, т.е. самых продаваемых товаров магазине, список строится на основе заказов клиентов.
  5. Добавлен вывод товаров со скидками.

Кроме того, для новых блоков созданы и отдельные страницы, т.е. можно не только смотреть ограниченное количество товаров на главной странице, но и перейти на отдельную страницу со списком всех предложений.

Были добавлены новые страницы для:

  1. Брэндов (производителей), которые добавлены в Админке — Категории и товары — Производители. Клик по брэнду перекинет на страницу с товарами только данного брэнда.
  2. Бестселлеров (популярных товаров). Отдельная страница с выводом самых продаваемых товаров магазина.

Весь шаблон использует smarty include, т.е. вложения, один шаблон подключается в другой, что б не делать одну и ту же работу много и много раз, не править одинаковый код 2,3,4,5,10 раз в разных местах, всё правится в одном файле и затем через include подключается по всему магазина. Код максимально унифицирован и универсален.

К примеру, шаблоны новинок, рекомендуемых, бестселлеров, скидок, сопутствующих и и т.д. и т.п. используют один и тот же html-код плитки товара.

Теперь что б изменить внешний вид плитки товара, не нужно в десятках файлов править разметку, отдельный файл править для новинок, отдельный для скидок, отдельный для рекомендуемых, отдельный для сопутствующих товаров и т.д., достаточно исправить 1 файл — с разметкой компонента плитки товара и всё, этот шаблон с плиткой товара будет плдключён по всему магазину.

и так сделано везде где только можно, т.е. унификация кода, упрощение, единообразие.

Кроме того, другое нововведение в шаблоне — «плитки» товаров выводятся на главной слайдером owl carousel 2.

Это универсальный, адаптивный, удобный слайдер, который делает простым и удобным навигацию по товарам.

К примеру, если у Вас всего 5 товаров со скидкой, слайдер оторбражаться не будет ко большом мониторе, ноутбуке.

На смартфоне будет слайдер в виде одной плитки товара и прокруткой пальцем или стрелками, т.е. контент на растягивается вниз, а объединяется в слайдер, экономя место на экране смартфона.

Само собой, что всё самое интересное, что касается SEO оптимизации, семантической разметки, html и css кода, соответствующим стандартном, всё это конечно же соблюдается и в новом шаблоне.

Основной упор сделан на мобильные устройства, простоту и удобство для конечного пользователя.

Одноколоночный дизайн был выбран именно поэтому.

А вот и сам скриншот, как примерно будет выглядеть главная страница.

Конечно, будут ещё изменения вноситься в шаблон, но, в целом, структура шаблона уже определена и готова.

Вот как всё будет выглядеть главная страница на большом мониторе (картинку можно увеличить до оригинального размера, кликнув по ней):

vamshop4-full-height-397x1024.png

Вот как всё будет выглядеть главная страница на смартфоне (картинку можно увеличить до оригинального размера, кликнув по ней).

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

Сам контент в виде товаров листается слайдеров влево/вправо, экономя место на экране смартфона.

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

vamshop4-full-height-mobile-75x1024.png

Читать заметку полностью

Share this post


Link to post
Share on other sites
komsit

Шаблон получается красивый и удобный.

Будем ждать с нетерпением появления нового шаблона.

 

 

 

Share this post


Link to post
Share on other sites
ZM

Главное чтобы разметка была и гугл speed page показали хорошие результаты ну и удобство редактирования, от вставки сторонних js до css

Share this post


Link to post
Share on other sites
support

Всё это будет.

Это всего лишь ещё один шаблон, как и существующие.

Просто появится выбор ещё одного шаблона в Админке - Настройки - Мой магазин - Шаблон, на базе bootstrap 4.

 

В bootstrap 4 добавили много разные интересных и полезных вещей, разных css утилит, раньше приходилось самому css стили писать под многое.

С boostrap 4 практически всё, что может понадобиться, уже есть.

Bootstrap - очень хорошая основа. Можно делать любые сайты, магазины, экономя своё время.

Share this post


Link to post
Share on other sites
ZM

Согласен boostrap хорошая тема ) 

Еще бы было бы просто обновлять fant awesome icon и сам boostrap заменой библиотек(файлов)

 

Share this post


Link to post
Share on other sites
support
2 часа назад, ZM сказал:

Согласен boostrap хорошая тема ) 

Еще бы было бы просто обновлять fant awesome icon и сам boostrap заменой библиотек(файлов)

 

FontAwesome самой последней версии, но в ней нет некоторых иконок из старой.

Так что не так уж и хорошо всегда последней версии библиотека.

Они иконки разделили на платные и бесплатные и бесплатно многих просто нет.

Share this post


Link to post
Share on other sites
ZM

Понятно может nulled есть ну да ладно не суть важно там и так стоковых достаточно может есть другие варианты кроме font awesome 

Share this post


Link to post
Share on other sites
support
9 минут назад, ZM сказал:

Понятно может nulled есть ну да ладно не суть важно там и так стоковых достаточно может есть другие варианты кроме font awesome 

Есть, много шрифтов с иконками.

Но лучший FontAwesome.

Share this post


Link to post
Share on other sites
support
В 09.04.2019 в 09:19, ZM сказал:

Главное чтобы разметка была и гугл speed page показали хорошие результаты ну и удобство редактирования, от вставки сторонних js до css

http://demo.vamshop.ru - установлен новый шаблон в демо-версии.

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

Мобилки 93 из 100.

Screenshot from 2019-04-19 19-17-19.png

Десктопы 98 из 100.

Screenshot from 2019-04-19 19-17-22.png

Не так уж и плохо.

Учитывая, что ещё будут производиться работы по улучшению в будущих версиях.

Например те же скрипты вниз перенесутся для подключения как-нибудь.

Сейчас всё в шапке.

 

Но даже сейчас очень хорошие результаты с новым шаблоном.

 

FontAwesome тоже обновлён в новом шаблоне до текущей версии.

 

Share this post


Link to post
Share on other sites
support

Если без слайдера на главной странице, для пробы можно отключить его в Админке - Разное - Управления баннерами

То даже в текущем виде новый шаблон http://demo.vamshop.ru на главной странице показывает 98 баллов на мобилках и 100 баллов на десктопе. 

Неплохой результат даже на текущий момент, я считаю, особенно учитывая сколько там css, js кода.

Share this post


Link to post
Share on other sites
ZM

Спасибо, круто, будем тестить

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this