support 447 Posted April 8, 2019 Report Share Posted April 8, 2019 Часть четвёртая. В данной заметке расскажу и покажу как примерно будет выглядеть главная страница магазина в новом шаблоне, что добавилось нового, какие цели и задачи были решены при создании главной страницы. Основной подход при создании нового шаблона — это так называемый «mobile first» подход, т.е. всё изначально делается с расчётом прежде всего на мобильные устройства, смартфоны и планшеты. На больших мониторах и ноутбуках, всё просто разворачивается, т.е. везде и всюду используется адаптивная вёрстка в новом шаблоне. Главная страница в целом уже готова, внизу прицеплю скриншот, что б было понятно, как будет выглядеть главная страница в новом шаблоне. Какие новые блоки были добавлены к уже существующим, по центру, на главной странице магазина: Добавлен вывод категорий. Добавлен вывод отзывов покупателей. Добавлен вывод брэндов (производителей), представленных в магазине. Добавлен вывод популярных товаров, бестселлеров, т.е. самых продаваемых товаров магазине, список строится на основе заказов клиентов. Добавлен вывод товаров со скидками. Кроме того, для новых блоков созданы и отдельные страницы, т.е. можно не только смотреть ограниченное количество товаров на главной странице, но и перейти на отдельную страницу со списком всех предложений. Были добавлены новые страницы для: Брэндов (производителей), которые добавлены в Админке — Категории и товары — Производители. Клик по брэнду перекинет на страницу с товарами только данного брэнда. Бестселлеров (популярных товаров). Отдельная страница с выводом самых продаваемых товаров магазина. Весь шаблон использует smarty include, т.е. вложения, один шаблон подключается в другой, что б не делать одну и ту же работу много и много раз, не править одинаковый код 2,3,4,5,10 раз в разных местах, всё правится в одном файле и затем через include подключается по всему магазина. Код максимально унифицирован и универсален. К примеру, шаблоны новинок, рекомендуемых, бестселлеров, скидок, сопутствующих и и т.д. и т.п. используют один и тот же html-код плитки товара. Теперь что б изменить внешний вид плитки товара, не нужно в десятках файлов править разметку, отдельный файл править для новинок, отдельный для скидок, отдельный для рекомендуемых, отдельный для сопутствующих товаров и т.д., достаточно исправить 1 файл — с разметкой компонента плитки товара и всё, этот шаблон с плиткой товара будет плдключён по всему магазину. и так сделано везде где только можно, т.е. унификация кода, упрощение, единообразие. Кроме того, другое нововведение в шаблоне — «плитки» товаров выводятся на главной слайдером owl carousel 2. Это универсальный, адаптивный, удобный слайдер, который делает простым и удобным навигацию по товарам. К примеру, если у Вас всего 5 товаров со скидкой, слайдер оторбражаться не будет ко большом мониторе, ноутбуке. На смартфоне будет слайдер в виде одной плитки товара и прокруткой пальцем или стрелками, т.е. контент на растягивается вниз, а объединяется в слайдер, экономя место на экране смартфона. Само собой, что всё самое интересное, что касается SEO оптимизации, семантической разметки, html и css кода, соответствующим стандартном, всё это конечно же соблюдается и в новом шаблоне. Основной упор сделан на мобильные устройства, простоту и удобство для конечного пользователя. Одноколоночный дизайн был выбран именно поэтому. А вот и сам скриншот, как примерно будет выглядеть главная страница. Конечно, будут ещё изменения вноситься в шаблон, но, в целом, структура шаблона уже определена и готова. Вот как всё будет выглядеть главная страница на большом мониторе (картинку можно увеличить до оригинального размера, кликнув по ней): Вот как всё будет выглядеть главная страница на смартфоне (картинку можно увеличить до оригинального размера, кликнув по ней). т.е. несмотря на то, что на странице много контента, на смартфоне всё сворачивается в слайдеры и Вы получаете относительно компактную страницу с небольшой прокруткой вниз. Сам контент в виде товаров листается слайдеров влево/вправо, экономя место на экране смартфона. Никакой бесконечной прокрутки вниз, что тоже довольно-таки удобно, особенно на смартфоне. Читать заметку полностью Link to post Share on other sites
komsit 2 Posted April 9, 2019 Report Share Posted April 9, 2019 Шаблон получается красивый и удобный. Будем ждать с нетерпением появления нового шаблона. Link to post Share on other sites
IVAN.Z 2 Posted April 9, 2019 Report Share Posted April 9, 2019 Главное чтобы разметка была и гугл speed page показали хорошие результаты ну и удобство редактирования, от вставки сторонних js до css Link to post Share on other sites
support 447 Posted April 9, 2019 Author Report Share Posted April 9, 2019 Всё это будет. Это всего лишь ещё один шаблон, как и существующие. Просто появится выбор ещё одного шаблона в Админке - Настройки - Мой магазин - Шаблон, на базе bootstrap 4. В bootstrap 4 добавили много разные интересных и полезных вещей, разных css утилит, раньше приходилось самому css стили писать под многое. С boostrap 4 практически всё, что может понадобиться, уже есть. Bootstrap - очень хорошая основа. Можно делать любые сайты, магазины, экономя своё время. Link to post Share on other sites
IVAN.Z 2 Posted April 9, 2019 Report Share Posted April 9, 2019 Согласен boostrap хорошая тема ) Еще бы было бы просто обновлять fant awesome icon и сам boostrap заменой библиотек(файлов) Link to post Share on other sites
support 447 Posted April 9, 2019 Author Report Share Posted April 9, 2019 2 часа назад, ZM сказал: Согласен boostrap хорошая тема ) Еще бы было бы просто обновлять fant awesome icon и сам boostrap заменой библиотек(файлов) FontAwesome самой последней версии, но в ней нет некоторых иконок из старой. Так что не так уж и хорошо всегда последней версии библиотека. Они иконки разделили на платные и бесплатные и бесплатно многих просто нет. Link to post Share on other sites
IVAN.Z 2 Posted April 9, 2019 Report Share Posted April 9, 2019 Понятно может nulled есть ну да ладно не суть важно там и так стоковых достаточно может есть другие варианты кроме font awesome Link to post Share on other sites
support 447 Posted April 9, 2019 Author Report Share Posted April 9, 2019 9 минут назад, ZM сказал: Понятно может nulled есть ну да ладно не суть важно там и так стоковых достаточно может есть другие варианты кроме font awesome Есть, много шрифтов с иконками. Но лучший FontAwesome. Link to post Share on other sites
support 447 Posted April 19, 2019 Author Report Share Posted April 19, 2019 В 09.04.2019 в 09:19, ZM сказал: Главное чтобы разметка была и гугл speed page показали хорошие результаты ну и удобство редактирования, от вставки сторонних js до css http://demo.vamshop.ru - установлен новый шаблон в демо-версии. Результаты по умолчанию для главной страницы. Мобилки 93 из 100. Десктопы 98 из 100. Не так уж и плохо. Учитывая, что ещё будут производиться работы по улучшению в будущих версиях. Например те же скрипты вниз перенесутся для подключения как-нибудь. Сейчас всё в шапке. Но даже сейчас очень хорошие результаты с новым шаблоном. FontAwesome тоже обновлён в новом шаблоне до текущей версии. Link to post Share on other sites
support 447 Posted April 19, 2019 Author Report Share Posted April 19, 2019 Если без слайдера на главной странице, для пробы можно отключить его в Админке - Разное - Управления баннерами То даже в текущем виде новый шаблон http://demo.vamshop.ru на главной странице показывает 98 баллов на мобилках и 100 баллов на десктопе. Неплохой результат даже на текущий момент, я считаю, особенно учитывая сколько там css, js кода. Link to post Share on other sites
IVAN.Z 2 Posted April 22, 2019 Report Share Posted April 22, 2019 Спасибо, круто, будем тестить Link to post Share on other sites
Recommended Posts