Как натянуть верстку на opencart

Пошаговое руководство по верстке на опенкарт. Глава первая: введение и главная страница

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

Несмотря на то, что OpenCart является довольно распространенной CMS, полного, подробного и актуального мануала по верстке для новичков для OpenCart в сети нет. Даже у меня на блоге пока только отдельные уловки по работе с данной системой. Давайте попробуем восполнить этот пробел и на конкретном примере научимся верстать под OpenCart 1.5.

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

Итак, начнем с создания шаблона. В опенкарт шаблон – это набор файлов с расширением tpl. По сути дела это обычный php файл – в нем можно писать php код, заключенный в соответствующие теги, а также html разметку. Мы не будем делать новый шаблон, а начнем править уже имеющийся. В моем случае это обуславливалось тем, что интернет магазин уже имел на страницах практически все необходимые элементы (точнее, блоки элементов), мне надо было только изменить их внешний вид. Справедливости ради, весьма кардинально.

Итак, выберите любую тему (они находятся по адресу catalog\view\theme) скопируйте её и начинайте менять. Начнем с главной страницы — catalog\view\theme\tea\template\common\home.tpl. Тема у нас называется tea, у вас, скорее всего будет так: catalog\view\theme\default\template\common\home.tpl

Посмотрим на главную страницу:

Она весьма отличается от остальных, поэтому можно смело удалить все из файла home.tpl и начать верстать с нуля. Здесь нет ни футера, ни хедера, только логотип, меню и еще картинка. То есть начало у нас такое:

Далее стили. Убираем отступы у боди и задаем размер шрифта по умолчанию для документа:

body

Теперь подключаем парочку стилей, которые нам понадобятся

@font-face < font-family: 'Neucha'; src: url('../fonts/neucha.otf'); >@font-face < font-family: "ArsenalRegular"; src: url("../fonts/ArsenalRegular/ArsenalRegular.eot"); src: url("../fonts/ArsenalRegular/ArsenalRegular.eot?#iefix")format("embedded-opentype"), url("../fonts/ArsenalRegular/ArsenalRegular.woff") format("woff"), url("../fonts/ArsenalRegular/ArsenalRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; >

Сама верстка чрезвычайно проста: обертка (wrapper) – в ней картинка, затем див, в котором сверху вниз див с парочкой спанов и меню под ними. А также еще сбоку картинка.

 
   
 
Дом Белого Журавля 
Чудесное чайное пространство в центре городской жизни 
 Здесь код вашего меню
 
 

#wrapper < max-width: 1720px; position: relative; margin: 0 auto; margin-top: 200px; >#ob-logo < float:left; margin-top: 280px; margin-right: 2%; width: 15%; >#dom < float:left; margin-top: 280px; font-family: Neucha; margin-right: 2%; width: 40%; >#jur < width: 37%; >#dom1 < font-size: 3em; >#podpis < font-size: 1.5em; >#menu

Если вы не знаете ваш код меню, то ищите его в той же папке (common) в файле header.tpl. А мы наше меню немного облагородим. Заставим выезжать и сделаем подложку при наведении:

#menu < font-family: ArsenalRegular; float: left; margin-left: 1.2em; >#menu > .row > ul > li > a < color:black; text-decoration: none; >#menu > .row > ul > li:hover < background: url(../image/fon-act.png); background-position: center; background-size: cover; transition: 1.35s ease; >#menu > .row > ul > li < display: inline-block; padding-left: 0.6em; border-radius: 100%; padding-right: 0.6em; margin: 0; >#menu > .row > ul > li > ul < display: none; position:absolute; list-style-type: none; margin-left: -40px; >#menu > .row > ul > li > ul > li > a < color: #858586; text-decoration: none; >#menu > .row > ul > li> ul > li > a:hover < background: url(../image/fon-act.png); background-position: center; background-size: cover; transition: 1.35s ease; >

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

Что мы видим? Как только ширина экрана будет меньше 750px, мы все центрируем, добавляем отступы, а меню делаем столбиком. Насчет меню – не самое стандартное решение в данном случае, на других страницах будет обычное адаптивное. Но, что делать – такой дизайн – я всего лишь верстальщик. Итак, стили:

@media screen and (max-width: 750px) < #wrapper, #dom, #ob-logo < margin-top: 0px; >#ob-logo < width: inherit; max-width: 100%; float: none; >#wrapper < text-align: center; margin: 0px 40px 100px 40px; >#dom < width: 100%; >#menu > .row > ul > li < display: list-item; list-style-type: none; margin-bottom: 15px; margin-top: 15px; >#menu > .row > ul > li > ul, #menu > .row > ul < position: relative; padding: 0px; margin: 0px; >#menu < float: none; margin-left: 0px; >#menu > .row > ul > li:hover < background: none; >#menu > .row > ul > li > ul > li < margin-bottom: 15px; margin-top: 15px; >>

Также необходимо изменить логику выезда подменю: не по наведению, а по клику и убрать ссылку с первого пункта.

Теперь проверяем, мобайл френдли ли наш сайт по мнению основных поисковых систем?

Все отлично! У вас может возникнуть вопрос: а чем тогда отличается данная верстка от обычной, без натяжки на кмс опенкарт? В данном случае – только кодом меню. Но я и предупреждал, что ничего сложного нет.

В следующих главах мы научимся натягивать верстку опенкарт и для других страниц.

Автор этого материала — я — Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML — то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

заметки, верстка, opencart, opencart

Натяжка на опенкарт

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Войти

Уже зарегистрированы? Войдите здесь.

Больше способов поделиться.

Похожие публикации

Перенос сайту на опенкарт

Автор: ghora, 4 октября

Нужна crm для опенкарт 3

composer в опенкарт — Please install the composer first

Автор: marketing_barashkov, Во вторник в 10:33

Импорт заказов из Розетки в Опенкарт

Автор: yurok79, 14 марта

Синхронізація УкрСклад(Firebird BD) з ОпенКарт

Автор: Toral, 10 октября

Сейчас на странице 0 пользователей

• Нет пользователей, просматривающих эту страницу.

Покупцям

• Оплата розширень фізичними особами
• Оплата розширень юридичними особами
• Політика повернень

Розробникам

• Регламент розміщення розширень
• Регламент продажу та підтримки розширень
• Віртуальний обліковий запис автора
• Політика просування оголошень
• API каталогу розширень
• Вирішення спорів щодо авторських прав

Корисна інформація

• Публічна оферта
• Політика повернень
• Політика конфіденційності
• Платіжна політика
• Політика передачі особистих даних
• Політика прозорості

Останні розширення

• Язык
• Обратная связь

Движок интернет магазина OpenCart (ocStore) — официальный сайт OpenCartForum.com Powered by Invision Community

• Уже зарегистрированы? Войти
• Регистрация

Раздел покупок

ocStore

• Назад
• Официальный сайт
• Демо ocStore 3.0.3.2
• Демо ocStore 2.3.0.2.4
• Скачать ocStore
• Документация
• История версий ocStore

Шаблоны

OpenCart.Pro

• Создать.

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.

Как натянуть верстку на opencart

доработка интернет-магазинов OpenCart

база знаний

• Главная
• Услуги
• Доработка дизайна магазина

Доработка дизайна магазина OpenCart

• Вы хотите
  заказать доработку дизайна интернет-магазина OpenCart?
• Задача
  чтобы все работало как часы и было сделано правильно?

Сделайте первый шаг к реализации данной задачи
– обращайтесь к нам команда «oc hunter» к вашим услугам!

ОБСУДИТЬ В telegram

ОБСУДИТЬ В viber

заказывая доработки у нас — это слудующие преимущества для вас:

• ПЕРСОНАЛЬНЫЙ МЕНЕДЖЕР ПРОЕКТА За Вашим проектом закрепляется менеджер который ведет Ваш проект. (Обсуждение тех. задач, сдача и прийом выполненных работ). Это гарантирует то что с проектом работает один человек который контролирует все процесы.
• Можем решить 99% задач с OpenCart любой версии. Мы неберем предоплаты и стараемся выдерживать сроки сдачи проекта или задачи.
• Мы профи своего дела — смотрим в даль и знаем все подводные камни наперед. У нас адекватные и справедливые цены. 100% завершенных проектов..
• Доверяя нам свой проект — Вы можете быть уверены — что работают профи и Ваше SEO будет в безопасности.

Доработка дизайна магазина OpenCart

Профессионально доработаем дизайн мобильной, планшетной или пк верси сайта.

Доработаем или разработаем новые секции, информационный блоки на главной или других страницах вашего магазина.

Исправим баги, подправим если где то чтото в вёрстке поплыло 🙂

Услуги которые мы предлагаем в данной теме:

1. Разработка дизайна с ноля любой сложности.

Можем разработать для клиента :

• рисуем продающие, качественные, креативные, корпоративные дизайны сайтов;
• дорабатываем дизайны сайтов любой сложности;
• вёрстка дизайнов по макету figma;
• разработка мобильных версий сайта;
• улучшение интерфейса и юзабилити сайта;
• разрабатываем дизайны которые продают и запоминаются людям (пользователям).

• мы можем разрабоать концепцию самого дизайна и фирменный стиль если его нету.

1. Сделать вёрстку этого дизайна ( Для тех кто не знает: вёртска это — дизайнер сам или с заказчиком нарисовал дизайн в специальной програме (после чего этот дизайн нужно сделать сайтом) это и есть вёртска.

Вытяг из википедии :

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

2. Сделать вёрстку и натянуть ее на cms opencart.

(для тех кто не знает CMS — это Content management system, CMS, система управления контентом) — информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления содержимым.

Так вот — opencart — это CMS 🙂

После того как дизайнер нарисовал дизайн, верстальщик сделал вёрстку, это вёрстку нужно адаптировать ( натянуть на cms opencart ) чаще всего называтеся ( натяжка верстки на опенкарт.

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

Наш Слоган:

Разрабатываем дизайны которые продают!

Важно знать заказчику:

Всегда проверяйте качество вёрстки :), а именно:

• кроссбраузерность ( проверьте как ваш сайт будет выглядеть в других браузерах ( Chrome, Mozilla Firefox, Opera, Safari );
• проверьте как выглядят все страницы на мобильной версии сайта, планшете и пк версии, часто бывает что в одном месте делаются работы, а в другом блоки отображаются некоректно.

Навигация:

• Исправление багов предыдущих разработчиков
• Доработка дизайна магазина
• Внедрение правок по ТЗ от SEO специалистов
• Адаптация дизайна под пк, мобильный и планшет
• Увеличение скорости загрузки сайта
• Внутренняя SEO оптимизация сайта OpenCart
• Интеграция OpenCart с Новой Почтой
• Доработка корзины заказов
• Синхронизация магазина OpenCart с 1С
• Обработка прайсов поставщиков
• Выгрузка товаров на маркетплейсы (Prom, Rozetka, Hotline)
• Внедрение микроразметки (schema.org, open graph)
• Доработка поиска по сайту
• Перевод сайта на другие языки
• Sms, viber, telegram уведомления
• Выгрузка товаров в Google Shopping
• Разработаем, доработаем блог
• Индивидуальные доработки
• Доработка модулей для OpenCart
• Парсинг товаров в интернет магазин OpenCart
• Наполнение интернет-магазина

КАК ЗАКАЗАТЬ доработку сайта?

Обращайтесь к нам ПРЯМО СЕЙЧАС +38 (095) 201 22 22, обсудим Ваши задачи и попробуем Вам помочь!

CMS OpenCart & OcStore
Доработка сайтов — интернет-магазинов
обсудить доработки
Команда OC HUNTER development

Мы команда — которая: Профессионально занимается разработкой и доработкой интернет-магазинов на cms опенкарт, и их продвижением в google топ 10 и поддержкой.

Менеджер руководитель проектов. Стаж профессиональной деятельности – 2 года.

Опытный Full Stack Developer. Стаж профессиональной деятельности – 8 лет.

Опытный Frontend разработчик. Стаж профессиональной деятельности – 5 лет.

Seo инженер. Стаж профессиональной деятельности – 6 лет.

UIX — веб дизайнер. Стаж профессиональной деятельности – 4 года.

UIX — веб дизайнер. Стаж профессиональной деятельности – 7 лет.

1С разработчик. Стаж профессиональной деятельности – 7 лет.

Копирайтер. Стаж профессиональной деятельности — 3года.

Копирайтер. Стаж профессиональной деятельности – 5 лет.

HTML-верстальщик. Верстка сайта Figma (Дистанционная работа)

IT, телеком Бухгалтерия Дизайн, полиграфия СМИ / Издательства Переводы, тексты Аудио/Видео Фотография, видеография SEO и трафик Соц сети и реклама Бизнес и жизнь Консалтинг, тренинги Анимация и флеш Архитектура, интерьер Админ. персонал Юриспруденция Другое

Найдено заданий: 22

HTML-верстальщик. Верстка легкого сайта (Дистанционная работа)

Бюджет не указан

Вот макет сайта https://www.figma.com/file/MSd3wSU9UVusjicEJO9WhZ/Untitled?type=design&node-id=0%3A1&mode=design&t=AL6NTx8PM8PtgSjr-1 — надо сверстать 1 в 1, сверстать адаптив, поставить на хостинг.

HTML-верстальщик. Вёрстка одностраничного сайта (Дистанционная работа)

Бюджет не указан

Необходима вёрстка одностраничного сайта (9 экранов) для отображения на декстопных устройствах, планшетах и смартфонах. Макет находится в фигме. Актуальный вариант на фреймах «63» — «66». https://www.

HTML-верстальщик. Верстка Pixel Perfect (Дистанционная работа)

Бюджет не указан

Добрый день просьба оценить данный сайт в фигме ( сайт для онлайн курсов ) https://www.figma.com/file/KDnWApE5oxHDOeYl1Gku57/. Планируется: Полноценна верстка ( pixel perfect ) для декстоп + мобайл.

HTML-верстальщик. Верстка блоков сайта (Дистанционная работа)

Бюджет: 3 000 руб.

Приветствую! Необходима верстка 4-х блоков сайта. Остальные элементы страницы есть — будут предоставлены файлы с версткой. Требования к верстке: html, css, js, изображения в webp Ссылка на макет: ht.

HTML-верстальщик. Верстка сайта дизайн в Фигме. (Дистанционная работа)

Бюджет не указан

Добрый день, Я ищу эксперта который может сверстать страницу по дизайну с Figma и добавить переводы в CMS, а можно и в коде. Мы работаем с CMS Strapi. Репозиторий в гитхабе, вышлем приглашение. Так.

HTML-верстальщик. Адаптивная верстка сайта (Дистанционная работа)

Бюджет не указан

Необходимо сделать адаптивную верстку сайта. Адаптив на усмотрение исполнителя, отдельных макетов нет. Желательно(но не обязательно) сделать на bootstrap При прокрутке шапка должна прилипать к верхней.

HTML-верстальщик. Адаптивная верстка сайта (Дистанционная работа)

Бюджет не указан

Для успешной реализации проекта по адаптивной верстке веб-сайта с использованием CSS Media Queries Breakpoints, мы предлагаем Вам выполнить следующие требования и ожидаемые результаты. Требования к ре.

HTML-верстальщик. Верстка сайта ресторана под Opencart по макету Figma (Дистанционная работа)

Бюджет не указан

Необходимо сделать адаптивную верстку дизайна под ПК, Планшеты и телефоны и натянуть ее на OpenCart. У дизайна 2 цветовые схемы — темная и светлая. С макетом можно ознакомиться здесь: https://www.figm.

HTML-верстальщик. Адаптивная верстка сайта (Дистанционная работа)

Бюджет: 20 000 руб.

Здравствуйте! Необходимо заверстать страницы сайта с ui-китом. Ссылка на макеты и кит ниже: https://www.figma.com/file/DUF9MyzyJMmBWmfIo5gjYh/%F0%9F%8F%A1-Your-house%3A-Pages?type=design&node-id=0%3A.

HTML-верстальщик. Верстальщик на React (Дистанционная работа)

Бюджет не указан

1. Верстка блока «выбора товара» Состояние 1. Дефолт 2. Ошибка 3. Подсказка 4. Подсказка 2 5. Заказ на завтра со склада 6. Информация о доставке 2. Карта выбора пункта выдачи Метка «Бесплатно» имеет д.

HTML-верстальщик. Верстка страницы по Макету Figma на MODX (Дистанционная работа)

Бюджет: 5 000 руб.

Добрый день! Задача — сверстать страницу на сайте с MODX по готовому макету. Требования к верстке: — Верстка пиксель-перфект — Верстка 3х разрешениях (Десктоп, планшет, моб), между ними адекватная рез.

HTML-верстальщик. Верстка на Django Templates (Дистанционная работа)

Бюджет не указан

Ищу разработчика с опытом работы в Django для верстки сайта по готовому дизайну из Figma. Важно умение работать с Django Templates, внимание к деталям и соблюдение сроков. Задача — аккуратно, адаптивн.

HTML-верстальщик. Верстка макета (Дистанционная работа)

Бюджет не указан

https://cvety.kz/products/18253/ — вот карточка товара и мы решили внести изменения https://www.figma.com/file/qQMlKNcop5FmezztJFL1tO/Тестовое-вёрстка?type=design&node-id=1%3A1414&mode=design&t=j64k3j.

WordPress разработчик, PHP/HTML/CSS/JS, part-time (Дистанционная работа)

Бюджет: 40 000 руб.

Компания TrainingData ищет себе в команду на постоянную основу опытного специалиста (разработчика-верстальщика) по WordPress. Основной пул задач — это верстка кастомных страниц по Figma. Поддержка сай.

HTML-верстальщик. Валидная верстка (Дистанционная работа)

Бюджет: 12 000 руб.

Необходимо сверстать небольшой сайт на Html, css. Количество страниц — 6: — Главная — О нас — Контакты — Номера — Услуги и акции Тематика: Глемпинг Общие требования к верстке: 1. Часть анимации сдела.

HTML-верстальщик. Внести правки на сайт на html и привязать WP (Дистанционная работа)

Бюджет: 5 000 руб.

Нужно: 1. Внести правки по верстке, которые указаны ниже 2. Привязать сайт к админке WordPress, чтобы весь контент (фото, текст, ссылки) менялся. 3. Настроить формы 4. Сделать SSL 5. Добавить политик.

HTML-верстальщик. Сверстать лендинг (Дистанционная работа)

Бюджет: 5 000 руб.

Нужно сверстать лендинг (верстка посадочная страница) на основании архива figma (в нем есть десктоп и мобильная версия). Вёрстка пиксель в пиксель, адаптив. Дополнительно нужно будет создать 3 страниц.

HTML-верстальщик. Адаптивная верстка сайта и выгрузка на хостинг (Дистанционная работа)

Бюджет не указан

Требуется сверстать сайт для реализации приборов для обеззараживания воздуха (стартап). Технические требования: — макеты отрисованы в Figma — сайт состоит из следующих страниц: Главная страница (осно.

HTML-верстальщик. Webflow-дизайнер в Social links / парт-тайм (Дистанционная работа)

Бюджет не указан

Webflow-дизайнер в Social links / парт-таймПривет! Я Маша, арт-директор в OSINT-компании Social links, мы создаём технологичные решения в индустрии кибербезопасности.Нужен подрядчик на задачи webflowВ.

HTML-верстальщик. Вестка макета из figma для сайта на WordPress (Дистанционная работа)

Бюджет: 50 000 руб.

Добрый день! Ищем верстальщика ВП для проекта по созданию сайта. На данный момент есть макет двух мобильных страниц и три десктопных, параллельно будем изготавливать остальные. Всего будет 6 страниц.