Адаптивный шаблон FastFood для OcStore и OpenCart 1.5.*. Адаптивное меню для opencart
Адаптивный шаблон FastFood для OcStore и OpenCart 1.5.*
Описание:Лёгкий и быстрый шаблон, созданный отлично подходящий для создания магазина по заказу еды на дом, в офис. Так-же отлично подойдёт для кафе и пиццерий, продуктовых магазинов и бутиков.
Плюсы:
- Адаптивность (в том числе модули слайдшоу, каруселей товара и пр.), тестировался на различных устройствах с разрешением по горизонтали от 320px
- Встроенный модуль для создания кастомного бокового меню
- Встроенный модуль быстрого просмотра товара
- Встроенный модуль фотогалереи
- Встроенный модуль новостей
- Улучшенный модуль слайдшоу: адаптивность и показ текста поверх картинки слайда, 4 вида анимации. Настраивается в админке
- Для мобильных устройств сделан автовыбор нужного типа клавиатуры для поля ввода телефона и мейла
- Улучшенный модуль корзины (обновление количества, цены и суммы непосредственно в модуле)
- ————
- Встроенный модуль быстрого заказа
- Заказ может просто отправляться на мейл или создаваться в админке, как самый обыкновенный заказ! (включается из админки)
- Блок располагается непосредственно в корзине, что многократно улучшает конверсию!
- Вы можете выбрать, как будет работать модуль быстрого заказа: только отправлять e-mail или же создавать заказы и в админке магазина
- Для зарегистрированного пользователя все необходимые данные для заказа подставляются автоматически
- ————
- Встроенный модуль, показывающий в карточке товара прочие товары из той-же категории (все параметры настраиваются в админке)
- ————
- Встроенный модуль стикеров (акции, новинки, лидеры продаж)
- Для стикера «новинка» можно задать текст самого стикера и дни, в течении которых после добавления товара он считается новинкой
- Для стикера «лидер продаж» можно задать текст самого стикера и количество продаж данного товара, после которого он будет считаться лидером
- ————
- Модули акций, новинок, рекомендуемых и лидеров продаж заменены на улучшенные, со встроенной адаптивной каруселью
- ————
- Встроенный модуль заказа звонка
- При заказе звонка можно выбрать одну из трёх тем обращения
- Активность и текст темы обращения настраивается в админ панели шаблона
- При выборе третьей темы появляются поля «e-mail» и «текст вопроса»
- ————
- Модуль управления шаблоном, как и сам шаблон, поддерживает мультимагазинность и мультиязычность
- Произвольные ссылки в футере (все параметры настраиваются в админке)
- При выборе опции отправки только на почту из модуля быстрого заказа, на почту, указанную в настройках магазина, отправляются все товары, лежащие в корзине + данные о покупателе.
- Улучшенный блок отзывов о товаре
- Улучшенные модули слайдшоу и баннеров
- Улучшенный модуль стандартного фильтра товаров
- Вывод неограниченного количества дополнительных телефонов в шапке сайта
- Переработанная страница контактов магазина
- Встроенный автопересчёт цены в зависимости от выбранных опций и количества товара
- В хлебных крошках убрана ссылка с последнего пункта, дабы исключить ссылку страницы на саму себя
- Возможность выбора количества товара в модулях, странице категории, поиске, акций, производителей
- При изменении количества на этих страницах автоматически пересчитывается цена и вес товара(если он указан)
- Автоматически отключается кнопка «купить», и заменяется её текст на «нет в наличии» если количество товара меньше 1
- Возможность выбора показываемых пунктов в боковом меню категорий
- Возможность подключения своего файла стилей, это нужно, если вы вносите изменения в стиль отображения шаблона и не хотите мучений при его обновлении
- ————
- Для устройств, имеющие разрешение экрана больше 1024пикс.:
- — Плавающее верхнее меню
- — Автооткрытие корзины при добавлении в неё товара
- — Автоскрытие корзины после добавления в неё товара и при бездействии пользователя более 7 секунд
- — Автоскрытие корзины через 3 секунды после того, как пользователь уберёт с неё курсор. Если в течении этих трёх секунд пользователь вернёт курсор в область корзины скрытие не произойдёт
- Необходимые данные, такие как часы работы, номера телефонов, баннеры на главной, карта сайта на странице контактов и прочее настраивается из админ части магазина.
- И прочее и прочее, так-как тут нет смысла описывать сотни мелких улучшений и правок..
Скорость:Для тех, кто заботится о скорости открытия, оптимизации и удобстве пользователя — с данным шаблоном можно без проблем получить от Google отличные оценки!
Даже на демо, без особой оптимизации картинок товара, Google даёт такие оценки:Для компьютеров:
- общая оценка: 94 из 100
Для мобильных устройств:
- скорость: 84 из 100
- удобство: 100 из 100
Ссылка на PageSpeed — https://developers.g….ru/&tab=mobile
Совместимость:Шаблон тестировался во всех современных браузерах, успешно проходит проверку валидатора кода.Ссылка на валидатор — https://validator.w3…food.oc-dev.ru/
Шаблон тестировался на ocStore c 1.5.4 по 1.5.5.1.2 и Opencart c 1.5.5 по 1.5.6.4 , для полноценной работы требуется vQmod версии не ниже 2.4.1
Начиная с версии шаблона 1.5.6 требуется установленный на сервере Ioncube Loader v4.4+
Как узнать, установлен ли он?Скачайте архив, распакуйте, загрузите к себе на сайт и откройте http://ваш-сайт.ru/s_test.php
Демо:
Главная страница: http://fastfood.oc-dev.ru/Страница категории: http://fastfood.oc-dev.ru/japan/Страницы товара: http://fastfood.oc-d…aly/traditional и htt
vseprosto.top
мобильное меню для Вашего сайта OpenCart (ОпенКарт) и ocStore
| Совместимость | OpenCart 2.0, OpenCart 2.1, OpenCart 2.2, OpenCart 2.3, OCStore 2.1, OCStore 2.3, Opencart.pro 2.1, Opencart.pro 2.3, MaxyStore 2.1.0.2, MaxyStore 2.3.0.2 |
- Быстрые переходы в самые ключевые страницы сайта
- Быстрый переход в корзину товаров
- Опционально включение и выключение любых пунктов меню
- Вывод имени, фамилии и Email пользователя в шапке
- Строка поиска для более удобного серфинга по сайту
- Вывод строки регистрации в шапке мобильного меню
- Приятная анимация появления и исчезновения
- Модуль продается с лицензией на сайт. Одна покупка = Один домен
- Покупая копию модуля вы получаете право на использование. Распространения модуль платно или бесплатно нарушает лицензию и грозит обнулением покупки, а так же уголовной ответственность предусмотренной статей 146 УК РФ (Нарушение авторских и смежных прав)
- Автор оставляет за собой право изменят условия предоставления лицензии, изменения цены и стоков продления лицензии.
- Все доработки, переработки и изменения функционала не входят в стоимость модуля и оплачиваются отдельно по письменной договоренности с автором.
| Основное | |
| Способ распространения | Платно |
| Совместимость | OpenCart 2.0, OpenCart 2.1, OpenCart 2.2, OpenCart 2.3, OCStore 2.1, OCStore 2.3, Opencart.pro 2.1, Opencart.pro 2.3, MaxyStore 2.1.0.2, MaxyStore 2.3.0.2 |
| VQmod | Нет |
| Ocmod | Да |
| Статистика | |
| В первый раз файл добавлен | 17.09.2018 |
| Последнее изменение | 17.09.2018 |
| Просмотров | 16 |
Файлы будут доступны после покупки
liveopencart.ru
Адаптивное меню для сайта
Всем привет!
Сегодня хочу поделиться интересным решением для основного меню.Такой подход может стать альтернативой стандартному выпадающему меню.Кроме того оно уже адаптивно.
Смотреть примерСкачать
Похожие статьи на эту тему:
Добавляем HTML
HTML КОД
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <header> <nav> <ul> <li><a href="#0">О нас</a></li> <li><a href="#0">Проекты</a></li> <li><a href="#0">Блог</a></li> <li><a href="#0">Контакты</a></li> <li> <a href="#0"><span>Категории</span></a> <ul> <li><a href="#0">Меню</a></li> <li><a href="#0">Категория 1</a></li> <li><a href="#0">Категория 2</a></li> <li><a href="#0">Категория 3</a></li> <li><a href="#0">Категория 4</a></li> <li><a href="#0">Категория 5</a></li> <li><a href="#0">Placeholder</a></li> </ul> </li> </ul> <!-- .cd-main-nav --> </nav> <!-- .cd-main-nav-wrapper --> <a href="#0">Menu<span></span></a> </header> |
Вся навигации состоит из двух неупорядоченных списков. Названия разделов и категорий меню вы, соответственно, меняете на свои.
HTML КОД
| 1 | <a href="#0">Menu<span></span></a> |
Последняя строка отвечает за навигацию при маленьком разрешении экрана.
Добавляем CSS
Архив с примером содержит файл style.css.В нем в разделе «Стили для меню» находятся все стили оформления меню в том числе и медиазапросы.Вы можете скачать весь файл, или добавить стили только для самого меню. Если вы, скачали в свой проект весь style.css, то не забудьте подключить его в свой html файл между тегами <head>.
| 1 | <link rel="stylesheet" href="css/style.css"> |
Добавляем JQuery
Из архива копируем папку js. И подключаем скрипты в наш html документ.
| 1 2 3 | <script src="js/modernizr.js"></script> <script src="js/jquery-2.1.1.js"></script> <script src="js/main.js"></script> |
Если в вашем проекте уже есть modernizr.js и jquery-2.1.1.js, то второй раз подключать их не нужно. Меню готово!
Также такой вариант навигации можно использовать для поиска по сайту, формы входа или для ссылок на соц.сети.
Всем удачи!
Источник: Оригинал
С Уважением, Михалев Валентин
Адаптивная навигация для меню 5.00/5 (100.00%) 8 голос(ов)
Понравилась статья - расскажи друзьям! :)
Вконтакте
Одноклассники
Google+
Универсальное адаптивное меню для сайта
Здравствуйте, уважаемые друзья. Сегодня я расскажу вам, как создать адаптивное меню для сайта. Создавать будем горизонтальное меню, которое будет адаптироваться под экраны мобильных устройств. А его универсальность заключается в том, что независимо от технологии создания вашего сайта, это меню будет работать на любом сайте. То есть достаточно исправить ссылки, название пунктов меню и подправить стили по ваш дизайн.
Ранее, я уже публиковал статью, в которой поделился двумя способами создания адаптивного меню. А сегодня рассмотрим ещё один способ.
Обычный вид меню для мониторов компьютера и больших экранов будет выглядеть так:
Вид меню на компьютере
На мобильных устройствах, меню в раскрытом виде будет отображаться так:
Вид меню на смартфоне
Принцип построения универсального адаптивного меню.
Итак, для того чтобы создать такое меню вам потребуется:
- Создать html каркас.
- Применить стили css.
- Подключить скрипт обработчик.
Разумеется, у вас на сайте есть меню, и вы его хотите сделать адаптивным. У вас есть два пути, первый – адаптировать существующее меню и второй – сделать новое адаптивное меню.
На большинстве сайтов, которые сделаны на CMS, проще создать новое меню, чем переделать старое. Так как само построение меню реализовано через php и запросы к базе данных, а стили css разбросаны среди многих других стилей. В общем, весь этот процесс переделки меню довольно трудоёмкое и кропотливое занятие.
На самописных сайтах работы с переделкой будет меньше, но все, же придётся повозиться.
В любом случае вы можете использовать стили и скрипт из этой статьи и адаптировать своё меню.
А для того чтобы создать новое адаптивное меню вам потребуется совсем немного времени. Изначально создаётся меню на основе тегов ul и li, затем добавляются стили css и подключается скрипт. Такое меню загружается и отзывается быстрей, так как работает без запросов к базе данных.
Стили css, для удобства, подключаются в отдельных файлах. Хотя их можно включить и в основные стили сайта. Я покажу пример подключения стилей через отдельные файлы.
Процесс создания адаптивного меню.
Шаг 1. Создание html структуры меню.
Первым делом нужно определиться с местом, где будет отображаться меню. Для этого нужно проанализировать файлы вашего шаблона. Как правило, меню выводится в шапке или сайтбаре. За эти основные блоки шаблона отвечают файлы header.php и sidebar.php. Именно в них и нужно искать место для вставки меню или замены старого. Для каждого шаблона – это индивидуальный процесс.
После того как вы определитесь с местом вставки нового меню, необходимо в это место поместить вот этот html каркас и изменить пункты меню и ссылки на свои.
<nav role="navigation"> <div> <div> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span></span> <span></span> <span></span> </button> <a href="https://1zaicev.ru/">Бизнес в Сети</a> </div> <div> <ul> <li> <a href="#"> Главная </a> </li> <li> <a href="#" data-toggle="dropdown"> Рубрики <span></span> </a> <ul role="menu"> <li> <a href="#" target="_self"> Рубрика1 </a> </li> <li> <a href="#" target="_self"> Рубрика2 </a> </li> <li> <a href="#" target="_self"> Рубрика3 </a> </li> </ul> </li> <li> <a href="#"> Автор </a> </li> <li> <a href="#"> Блог </a> </li> <li> <a href="#"> Статьи </a> </li> <li> <a href="#"> Вход </a> </li> <li> <a href="#"> Регистрация </a> </li> </ul> </div> </div> </div> </nav>Примечание: Оранжевым цветом я обозначил элементы, которые вы редактируете под ваш сайт. Пункты меню можно добавлять и удалять. Как это делать я показываю в видеоуроке. За стрелку раскрывающегося меню отвечает вот этот код: <span></span>. Если раскрывающихся пунктов меню у вас несколько используйте этот код.
Шаг 2. Подключение стилей css.
Для того чтобы упростить процесс и не путаться с медиазапросами, подключать стили будем в виде отдельных файлов. Файлы стилей подключаются в файле header.php между тегами <head> … </head>. По крайней мере, это так в большинстве современных шаблонах.
Ваша задача найти, где подключается основной файл стилей style.css и ниже него подключить стили адаптивного меню.
Подключение стилей css
Но, для начала вы должны скачать файлы со стилями и скриптом здесь. После этого скопировать файлы bootstrap.css и menu.css в папку с вашей темой. А после в файле header.php, между тегами ХЕД добавить вот эти строки подключения:
<link rel="stylesheet" type="text/css" href="http://Ваш домен/wp-content/themes/Ваша тема/bootstrap.css" /><link rel="stylesheet" type="text/css" href="http://Ваш домен/wp-content/themes/Ваша тема/menu.css" />Шаг 3. Подключение библиотеки jQuery и скрипта обработчика.
И для завершения адаптации меню необходимо добавить подключение библиотеки jQuery и скрипта, который будет раскрывать меню при нажатии.
И хотя, библиотека jQuery у вас скорей всего уже подключена, вы это увидите между тегами ХЕД в файле header.php, я на всякий случай покажу, как её подключить. А заодно и скрипт обработчик подключим, который вы скачали в архиве.
В том же файле header.php, перед закрытием тега </head> вставляете вот эти строки кода:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script type="text/javascript" src="http://Ваш домен/wp-content/themes/Ваша тема/bootstrap.min.js"></script>Примечание: файл bootstrap.min.js, вместе со стилями тоже нужно скопировать в папку темы вашего сайта. Возможно, в вашей теме есть папка JS, тогда скопируйте этот файл туда и укажите это в пути к файлу.
Итак, всё готово, можно проверять результат. Медиазапросы построены на точке 768 px, как только экран браузера станет меньше этой величины, меню адаптируется. Точку медиазапроса вы можете поменять в файлах стилей.
А теперь в качестве наглядного примера, как работает адаптивное меню, и как его установить на сайт предлагаю посмотреть видеоурок.
На этом у меня сегодня всё, я желаю вам успехов и до встречи в новых статьях и видеоуроках!
С уважением, Максим Зайцев.
1zaicev.ru
