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

Натяжка верстки на Opencart 3

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

Хочу натянуть верстку шаблона магазина на движок Opencart (Ocstore 3).

Макет основных страниц прикреплен (сверстано главная, категория, товар,

каталог, блог, бренды, корзина и т.п.).

Пример готовой верстки:

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

Что требуется от натяжки:

1) Натяжка на движок по всем стандартам Ocstore 3 (с использованием twig и т.п.), без изменения файлов CMS, чтобы я мог апдейтить CMS без проблем в обозримом будущем.

2) Все функции CMS должны быть задействованы, если стоит в настройках движка какой-то флажок или опция (например, если указан размер миниатюры или возможность выбора каптчи и т.п.) — они должны отрабатывать в шаблоне в соответствующем месте.

3) Корректная работа на типовых хостингах от 5.4 до 7.3 php

4) Там где нет готовой верстки, например, на странице оформления заказа или в сравнении товаров — должно работать стандартное решение от CMS, визуально не хуже чем в дефолтном шаблоне.

5) Сайт не должен вызывать при работе никаких ошибок в логах.

6) Самое главное! Плагины, которые успешно работают на дефолтных и иных популярных шаблонах, должны без проблем устанавливаться и работать в этом шаблоне. Мне это очень важно, так как планируется постоянное добавление разных плагинов. Должна быть максимальная совместимость, чтобы не пришлось пилить каждый плагин вручную под шаблон.

7) Все элементы сайта должны меняться из админки (телефоны, иконки, слайдеры, меню, названия, статьи, логотипы, фоны и т.п.), то есть нужно добавить свои настройки в параметры темы (прикреплен файл). Тут важно предусмотреть какой-то механизм, чтобы снять эту нагрузку с базы данных (чтобы при очередной загрузке страницы скрипт не лазил в базу за очередным значением того или иного параметра, а выводил сразу готовые параметры), что-то типа кеширования. Возможно, в Opencart 3 это уже предусмотрено.

8) Какие-то элементы сайта имеет смысл сделать сторонними бесплатными плагинами (поиск, слайдеры, форма связи, переводчик и т.п.). Какие-то лучше написать с нуля, так как нормальных плагинов для этого просто нет.

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

9) Сайт должен сам по себе, без доп. плагинов кэширования, работать быстро, сохранить текущие высокие показатели Google Page Speed.

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

Если вам всё это понятно и вы готовы это реализовать, то пишите стоимость ваших услуг за весь объем работ.

Оплата — или по факту или по безопасной сделке (Яндекс, банковская карта).

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

Что мне важно от исполнителя:

Дружественный подход, заинтересованность в результате.

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

Предлагал свои идеи, был готов обсуждать, думать как сделать лучше и правильнее, а не просто «что ты мне дал, то я и перепутал» ))

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

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

От себя: готов идти на компромисс, не трясу душу если немного не вложились в сроки, не требуют поминутного отчета или быть онлайн здесь и сейчас. Но работаю только до полной готовности. Даже если сделаете 80% и потом не захотите или не сможете продолжить, работу не приму, попробую найти другого исполнителя на весь объем.

Схема работы:

Выбор исполнителем >> Присылаю вёрстку >> От вас натяжка >> Тестирование >> Оплата

С кем раньше работал — плюс.

После окончания работ до окончательного расчета мне понадобится время на тестирование шаблона (минимум 3-4 дня). В этот период просьба не подгонять меня, нужно также иметь возможность оперативно вносить все найденные корректировки и баги.

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

Как «натягивать» верстку на OpenCart?

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

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

Версия OpenCart 3.0.3.8.

• Вопрос задан более года назад
• 205 просмотров

Комментировать
Решения вопроса 1

React, Vue, Angular, Navite JS, Python / Node JS

Создать новый шаблон, менять те файлы который новая верстка затрагивает, и мигрируете из старого файла в новый всю логику шаблона(которая нужна) из дефолтной темы.

Т.е там логика работате так, если мы добавляете шаблон header.tpl(пустой), то он игнорируется в шаблоне default, и подтягивается из вашего. Дефолтную тему лучше не трогать вообще.

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

• Главная
• Opencart
• Создание шаблона
• Методика верстки шаблона под OpenCart

Методика верстки шаблона под OpenCart

Итак у вас есть HTML+CSS шаблон и из него надо сверстать шаблон для CMS OpenCart. Решить эту задачу как я вижу можно двумя путями:

1. Взять шаблон default и подгонять его catalog\view\theme\default\stylesheet\stylesheet.css до тех пор, пока он не будет похож на наш HTML+CSS прототип. Далее отключаем/включаем некоторые модули соответственно и передвигаем их, все делаем через настройки админпанели до тех пор, пока все не будет на своих местах, например колонка «категории» слева, баннеры снизу и т.п., вообщем все как на HTML+CSS прототипе.
2. Второй путь сложнее, он применим когда наш шаблон не получается «натянуть» на default. Решение заключается в верстки HTML+CSS шаблона под OpenCart с нуля (или почти с нуля). Берется наш HTML+CSS прототип, делиться на части, каждую часть помещаем в определенный .tpl шаблон, далее в каждом шаблоне прописываем необходимые переменные, после чего занимаемся подгоном css стилей отвечающий за вывод содержимого контента сайта, за корзину, за вывод модулей, подгоняем таким образом пока не будет достигнута единый стиль сайта.

С первым способом решения думаю проблем быть не должно, поэтому, в данном посте, я буду описывать второй путь, итак начнем …

1. Готовим базу

Для начала надо подготовить базу для нашего будущего шаблона, за базу будем брать default шаблон. Создадим папку «MyTempl» в директории catalog\view\theme, где «MyTempl» это имя нашего шаблона. Скопируем все содержимое default вновосозданную папку.

Кратко по директориям MyTempl, что мы будем делать с содержимым каждой из них:

• Содержимое директории imageменять не будем, все изображения звездочек, стрелочек, кнопочек будут отображаться в контенте сайта, менять их будем в самом конце верстки шаблона, если они уж совсем будут выбиваться из стиля, а так, пока не трогаем их;
• В директории «stylesheet» на основе файла stylesheet.css мы будем создавать свой «style.css»;
• Директория template содержит .tpl файлы представления, мы их будем активно править.

Все база создана, начнем править .tpl шаблоны.

2. Создаем скелет шаблона

Перейдем в директорию «catalog\view\theme\MyTempl\template\», здесь сосредоточены файлы представления нашего нового шаблона MyTempl. Они отвечают за то, каким образом будут выводиться страницы и что на них будет отображено. За «откуда брать информацию» отвечают так называемые контроллеры, которые располагаются в директории catalog\controller, редактировать контроллеры будем по острой необходимости, про которую я расскажу позже.

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

Редактировать мы будем лишь следующие файлы tpl

• column_left.tpl (левая колонка вашего шаблона)
• column_right.tpl (правая колонка вашего шаблона)
• content_bottom.tpl (низ средней колонки вашего шаблона)
• content_top.tpl (верх средней колонки вашего шаблона)
• footer.tpl (низ-подвал вашего шаблона)
• header.tpl (верх- шапка вашего шаблона)
• home.tlp (домашняя страница)

Итак откроем home.tlp, внутри мы увидим:

Содержимое нам говорит, что первым делом выводиться представление шапки $header, далее файлы представления левой и правой колонки, потом контент сверху/снизу и наконец подвал сайта $footer.

Представление для левой/правой колонки и контент сверху/снизу выводят только модули, если открыть один из них (файл представления), то мы увидим цикл, печатающий содержимое модулей.

Если модули отключены в панели администратора, то данные файлы представления (.tpl) ничего не выводят.

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

Пример html+css шаблона:

Обозначим, шапку красным цветом, а подвал зеленым.

Открываем «header.tpl» и копируем туда html код шапки сайта. Обычно это код с до блока footer.tpl», вставляем код подвала сайта, как пример это код с .

   Код html, много чего…  
Код html, много чего…
 
 
   
 
Код html, много чего…
 
 
Код html, много чего…
 
Код html, много чего…
 
Код html, много чего…
  

Основной костяк шаблонов готов, но если в html коде прототипа есть тэг img> с явным указанием на изображение (с помощью атрибута src), то переходим к следующему этапу, если нет – пропускаем его.

Подводный камень. Возможна ситуация, когда в html+css шаблоне, в качестве горизонтального меню распологается горизонтальное меню категорий товара, например как в шаблоне default (малиновая рамка).

Тогда часть шаблона header.tpl нам нужно заполнить содержимым модуля «Категории» и контроллер header.php аналогично как контроллер этого же модуля.

3. Боремся с тегом

Настало время, когда необходимо подправить контроллер, возникла это необходимость, потому что я не обнаружил какая переменная в CMS OpenCart отвечает за вывод имени шаблона. Откроем контролер файла представления —header.tpl, т.е. «catalog\controller\common\header.php» и в самом низу в условие

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/common/header.tpl')) 
перед else добавим следующие
$this->data['template'] = $this->config->get('config_template');
В результате должно получиться следующее:
if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/common/header.tpl')) < $this->template = $this->config->get('config_template') . '/template/common/header.tpl'; $this->data['template'] = $this->config->get('config_template'); > else < $this->template = 'default/template/common/header.tpl'; >
Теперь заменим статичный адрес изображения в тэге img> на динамично формирующийся, с помощью переменной $template. Например src некого тега img> имел статичную ссылку
images/flag2.gif
а мы заменяем ее на следующую
catalog/view/theme//images/flag2.gif
Теперь ссылка на источник изображения динамично формируется и не зависит от имени шаблона.
Лучше этот процесс автоматизировать и произвести везде автозамену с
images/
catalog/view/theme//images/
Замену производим везде, но кроме логотипа (что в шапке), он должен быть настраиваемым через панель администратора.
(если тэг с явным указанием путей к изображениям есть и в home.tpl, footer.tpl, то делаем все по аналогии, открываем их контроллер(ы), добавляем переменную template, далее в шаблонах производит автозамену).
4. Наполняем сайт динамичным содержимым
Итак мы отредактировали шаблоны и контролеры, в результате система OpenCart должна выводить страницу со всеми изображениями, но без контента:

Место логотипа у нас пока без изображения.

Следующее что мы должны сделать, это наполнить наш сайт динамичным содержимым, который формирует для нас CMS OpenCart. Открываем шаблоны header.tpl, footer.tpl и шаблон default в качестве образца, также нам в помощь статья список переменных OpenCart. Далее заменяем статичные данные на печать соответствующих переменных. Приведу пример, тэг  у нас содержит текст «E-Shop», если смотреть по образцу шаблона default, то он должен формироваться с помощью вывода переменной , прописываем в свой шаблон вместо E-Shop следующее: . Еще пример, находим тэг img отвечающий за вывод логотипа, он может быть следующим: , заменяем путь images/logo.jpg, на печать переменной . Теперь логотип можно настроить через панель администратора.

Далее, проходим весь header.tpl и footer.tpl, заменяя статичные данные на печать соответствующих переменных. Этот этап будет самым трудоемким.
Далее проходим по всем шаблону header.tpl и footer.tpl, заменяя статичные данные на печать соответствующих переменных. Этот этап будет самым трудоемким. Здесь может возникнуть много проблем, я постараюсь описать те проблемы которые наичаще встречаются.
Подводный камень №1. Иногда вам придется заменять целые div блоки на печать переменных, например блочок с выбором языка

вам придется заменить на . И тогда вид его измениться на:
Для того что бы, его внешний вид соответствовал изначальному, нам нужно подправить файл представления отвечающий за вывод данного блочка. Смотрим статью переменные OpenCart, находим к какому представления относиться $language. По тексту в статье, он относиться к представлению модуля «module/language», открываем данный файл и заменяем его div блок на наш div, сохраняя логику работы (т.е. если список языков формируется через цикл, то он и у нас должен формироваться тем же циклом).
(Если при печати переменных в представлениях вызывается ошибка «Undefined variable: …», т.е. переменная не определена, тогда заходим в контроллер данного представления и добавляем ее по образцу. Например, переменная $template будет доступна только в представлениях – header.tpl и footer.tpl, добавляем по образцу).
Подводный камень №2. В шаблоне default ссылки на отдельные страницы можно логически разделить на три группы. Желтой рамкой – это переменные $home, $wishlist, $account, $shopping_cart, $checkout содержащие ссылки на соответствующие шаблоны, все эти переменные по умолчанию (без правки контролера) доступны в heder.tpl. Зеленым цветом – это массив $informations, содержащий ссылки на шаблон information/information с выводом статей (в админпанели «Каталог->Статьи»). Ссылки выводятся через цикл, все что есть. Данный массив по умолчанию доступен в footer.tpl 
И наконец красной рамкой обозначенные переменные ссылки на соответствующие шаблоны, они ни чем принципиальным не отличаются от тех что в желтой рамке, различия их только в видимости. Данные переменные по умолчанию видны в footer.tpl.

Так вот, может возникнуть ситуация, когда наш html+css шаблон будет требовать от нас совсем другое расположение ссылок, например как тут:

Решением будет заключаться, в правке контролера header.php и шаблона. Надо быть готовым к таким трудностям и не забывать, что есть «переменные ссылки на шаблон», а есть «статьи» выводящиеся через цикл и не забывать про видимости переменных.
Подводный камень №3. Может возникнуть ситуация, когда нужно указать ссылку на шаблон с выводом определенного модуля, например как тут

В зеленом квадрате обозначены ссылка на «Новую продукцию». По сути, за вывод последней поступившей продукции у нас отвечает модуль «Последние». Нам нужно создать новую страницу-шаблон (.tpl) для «Новой продукции», далее в панели администратора активировать модуль «Последние» для данной страницы.. После всего, в контролере header.php добавить строку.
$this->data['имя_переменной_с_сылкой'] = $this->url->link('директория_шаблона/имя_файла', '', 'SSL');
И на конец, в header.tpl добавим печать переменной с ссылкой в нужное место меню.
Подробнее как создать страницу в OpenCart я описал в статье по ссылке.
Подводный камень №4. Когда вы все сверстали, у вас может оказаться, что все равно где-то окажется картинка со статичной ссылкой на изображение или статичный текст. Причем эту картинку или текст нельзя отнести к модулю. Пример картинки в красном квадрате:

Это рекламный баннер, впихивать его в модуль «Баннер» можно, но, если владелец интернет-магазина захочет разместить список баннеров внизу. Мы не должны занимать целый модуль под такие мелочи. Выход тут один, дополнить панель администратора новой опцией – выбор изображения. Как расширить настройки панели администратора, я рассказал в этой статье.
5. Обязательные стили
Как итог предыдущего этапа, у нас должен получиться сайт с всеми рабочими ссылками, с правильными картинками и (!) внимание с неправильным отображениемсодержимым, оно вроде бы есть но выводить как то не так, нагромождается друг на друга, вертикально выстраивается и т.п. Например, при нажатие на корзину покупок мы видим следующее:

Вход в личный кабинет выглядит как-то так:

Если включить модули, то с ними будет тот же эффект.
Вся проблема заключается в том, что за оформление контента (за вывод содержимого сайта, корзины, поиска по товарам и модулей) отвечает некое количество стилей, а т.к. мы не подключаем «stylesheet.css» шаблона default и следовательно у нас этих стилей нет, поэтому и выводиться все не так как должно. Поэтому стили мы брать будем из catalog\view\theme\default\stylesheet\stylesheet.css и вставлять в наш css файл. 
Возможно, возникнет вопрос, а почему бы нам просто не подключить файл целиком«stylesheet.css»? Ответ: если мы его подключим, у нас могут совпасть селекторы с нашим html+css прототипом и как результат стили потруться стилями stylesheet.css, что вызовет к неправильному отображению сайта. Поэтому будем работать по «чистому», возьмем именно те стили которые нам нужны.
Рекомендую работать в Nootepad++ или другом аналогичном средстве, выделяем нужное слово и копируем себе все строки с подсветкой.
Обязательно понадобяться следующий стили (скопировать в наш css файл)

Первые делом, скопируем стили, отвечающие за отображение кнопок, т.е. все что относиться к «.button» и «.buttons».
Все стили что относиться к «.cart-info», «.cart-total», «.cart-module», «#cart», «.mini-cart-info», «.mini-cart-total» в общем все где есть слово cart, отвечают за отображение «Корзины», копируем себе.
Все стили что относиться к «box-heading», «.box-content», «.box-product» и «.box-category», в общем где есть «box» отвечает за отображение модулей.
Все стили что относиться к «.content».
Все стили что относится к «.category-info», «.category-list».
Все стили что относятся к «.manufacturer-list», «.manufacturer-heading» и «.manufacturer-content»
Все стили что относятся к «.product-filter», «.product-compare», «.product-list», «.product-grid», «.product-info» отвечают за оформление страницы при просмотре отдельного продукта.
Все стили по «мелочовкам», все что под продуктами, это «.review-list», «.attribute», «.compare-info», «.wishlist-info»,
Все стили что относятся к «.login-content».
Все стили что относятся к «.order-list», «.order-detail».
Все стили что относятся к «.return-list», «.return-product», «.return-name», «.return-model», «.return-quantity», «.return-detail», «.return-reason», «.return-opened», «.return-captcha».
Все стили что относятся к «.download-list».
Все стили что относятся к «.checkout», «.checkout-heading», «.checkout-content», где есть слово «checkout», все они отвечают за правильное отображение «Оформление заказа».
Все что относиться к «.htabs», «tab-description», «tab-attribute», «tab-review» отвечают за таблицу «Описание/Характеристика/Отзывы» что внизу при выборе товара
Все что относиться к «.warning», везде где есть слово «warning», отвечает за вывод предупреждений, например при слишком коротком отзыве к товару.

6. Подгоняем оформление контента и модулей под дизайн html+css макета
Здесь дать конкретных рекомендаций, что и как сделать я не смогу. Смотрим, какой стиль, за что отвечает и если есть необходимость редактируем его, до тех пора, пока не будет достигнута схожесть с прототипом. Или как другой вариант наполняем модули, html кодом нужных нам фрагментов из прототипа.
Как пример, рассмотрим реальную ситуацию, в html+css прототипе допустим есть колонка с категориями и приглашение в личный кабинет (отмечено красной рамкой)

Модуль «Категории» нужно оформить как колонку «CATEGORIES».
Модуль выводящий приглашение в личный кабинет по умолчание в OpenCart отсутствует, ищем в Интернете что-то похожее, далее устанавливаем и редактируем, пока не будет сходство.
Представление модулей располагается в директории «catalog\view\theme\имя_темы\template\module»
На этом описание методики верстки можно остановить, данные 6 шагов, достаточны для того что бы на начальном этапе понимания OpenCart создать свой собственный шаблон. Со временем, конечно же у вас набьется рука и вы выработаете свои принципы, данный материал не стоит рассматривать как идеальный и не оспоримый. Удачи!
Натянуть верстку на opencart 3
Создайте аккаунт или войдите в него для комментирования
Вы должны быть пользователем, чтобы оставить комментарий
Создать аккаунт
Зарегистрируйтесь для получения аккаунта. Это просто!
Войти
Уже зарегистрированы? Войдите здесь.
Больше способов поделиться.
Похожие публикации
 Opencart 5 1 2 
Автор: MaxD, 27 июля
 S.O.L.I.D. и OpenCart 
Автор: sv2109, В четверг в 13:41

0 комментариев
86 просмотров


buslikdrev
В четверг в 20:03

 Програміст на Opencart 
Автор: Blofield, 9 ноября
 Opencart на стероїдах 

nginx
cache


24 комментария
1 495 просмотров


buslikdrev
5 ноября

 [Поддержка] ChatGPT в Opencart (Opencart ChatGpt) 1 2 3 

chatgpt
openai
(и ещё 3) 
Сейчас на странице 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 и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.


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

Как выйти из аккаунта google на другом устройстве
Как зайти в рекавери на xiaomi redmi note 4
Как проверить датчик коленвала kia ceed
Что безопаснее андроид или ios