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

[support 447]

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

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

Основной подход при создании нового шаблона — это так называемый «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 кода, соответствующим стандартном, всё это конечно же соблюдается и в новом шаблоне.

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

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

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

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

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

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

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

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

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

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

[komsit 2]

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

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

 

 

 

[IVAN.Z 2]

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

[support 447]

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

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

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

 

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

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

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

[IVAN.Z 2]

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

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

 

[support 447]

2 часа назад, ZM сказал:

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

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

 

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

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

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

[IVAN.Z 2]

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

[support 447]

9 минут назад, ZM сказал:

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

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

Но лучший FontAwesome.

[support 447]

В 09.04.2019 в 09:19, ZM сказал:

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

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

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

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

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

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

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

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

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

 

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

 

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

 

[support 447]

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

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

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

[IVAN.Z 2]

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