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

 

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

Подводный камень №1. Иногда вам придется заменять целые div блоки на печать переменных, например блочок с выбором языка

5

вам придется заменить на  <?php echo $language; ?>.  И тогда вид его измениться на:

6

Для того что бы, его внешний вид соответствовал изначальному, нам нужно подправить файл представления отвечающий за вывод данного блочка. Смотрим статью переменные 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.

72_

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

81_

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

 

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

91_

В зеленом квадрате обозначены ссылка на «Новую продукцию». По сути, за вывод последней поступившей продукции у нас отвечает модуль «Последние». Нам нужно создать новую страницу-шаблон (.tpl) для «Новой продукции», далее в панели администратора активировать модуль «Последние» для данной страницы.. После всего, в контролере header.php добавить строку.

И на конец, в header.tpl добавим печать переменной с ссылкой в нужное место меню.

Подробнее как создать страницу в OpenCart я описал в статье по ссылке.

 

Подводный камень №4. Когда вы все сверстали, у вас может оказаться, что все равно где-то окажется картинка со статичной ссылкой на изображение или статичный текст. Причем эту картинку или текст нельзя отнести к модулю. Пример картинки в красном квадрате:

101_

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

 

 5. Обязательные стили

 

Как итог предыдущего этапа, у нас должен получиться сайт с всеми рабочими ссылками, с правильными картинками и (!) внимание с неправильным отображением содержимым, оно вроде бы есть но выводить как то не так, нагромождается друг на друга, вертикально выстраивается и т.п. Например, при нажатие на корзину покупок мы видим следующее:

111_

 

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

 

121_

Если включить модули, то с ними будет тот же эффект.

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

Возможно, возникнет вопрос, а почему бы нам просто не подключить файл  целиком«stylesheet.css»? Ответ: если мы его подключим, у нас могут совпасть селекторы с нашим html+css прототипом и как результат стили потруться стилями stylesheet.css, что вызовет к неправильному отображению сайта. Поэтому будем работать по «чистому», возьмем именно те стили которые нам нужны.

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

Обязательно понадобяться следующий стили (скопировать в наш css файл)

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

 

6. Подгоняем оформление контента и модулей под дизайн html+css макета

 

Здесь дать конкретных рекомендаций, что и как сделать я не смогу. Смотрим, какой стиль, за что отвечает и если есть необходимость редактируем его, до тех пора, пока не будет достигнута схожесть с прототипом. Или как другой вариант наполняем модули, html кодом нужных нам фрагментов из прототипа.

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

131_

Модуль «Категории» нужно оформить как колонку «CATEGORIES».

Модуль выводящий приглашение в личный кабинет по умолчание в OpenCart отсутствует, ищем в Интернете что-то похожее, далее устанавливаем и редактируем, пока не будет сходство.

Представление модулей располагается в директории «catalog\view\theme\имя_темы\template\module»

 

На этом описание методики верстки можно остановить, данные 6 шагов, достаточны для того что бы на начальном этапе понимания OpenCart создать свой собственный шаблон. Со временем, конечно же у вас набьется рука и вы выработаете свои принципы, данный материал не стоит рассматривать как идеальный и не оспоримый. Удачи!

 

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

 




Буду признателен если вы поделитесь данным постом

Комментарии
  1. Arthur пишет:

    Доброго дня!

    Хотелось бы получить вашу помощь в копировании 2-х шаблонов для opencart: есть небольшой бюджет 2 000 рублей, могли бы вы скопировать шаблоны или побыть в качестве ментора и подсказать что и как нужно сделать?

    Донор: http://livedemo00.template-help.com/opencart_45943/index.php

    Копия: http://upgrade-gun.com/

    Надеюсь на вашу отзывчивость.

  2. admin пишет:

    Добрый день, я ответил вам на почту, проверьте её.

  3. Elina пишет:

    Здравствуйте! Есть в код html+css, нужно его «натянуть» на стандартную тему. Не могли бы вы помочь с этим? О вознаграждении договоримся.

  4. admin пишет:

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

  5. lexy пишет:

    Привет! Может быть и мне поможете? 🙂 А то я уже начал сдаваться, делал по Вашей инструкции, трудности начались при замене переменных, за основу взял шаблон opencart’a из интернета, главная страница получилась, надо прикрутить как я понимаю модуль (номер телефона)и ссылки для меню, к какому меню относится «мое» меню сказать немогу( Делаю на денвере. С удовольствием посмотрел бы пример Ваших исходников для моего шаблона 🙂

  6. admin пишет:

    Хм… алексей дайте ссылку на ваш сайт, что то я не совсем понял.

  7. lexy пишет:

    Да он на денвере, могу скинуть тот по которому делал, в личку если можно.

  8. admin пишет:

    Алексей, ближе к обеду я напишу вам по e-mail.

  9. Georgij пишет:

    Доброго дня.
    Ув. admin, мне нужна оплачиваемая помощь по «натяжке» простого шаблона на cms OpenCart(ocStore).
    Буду рад, если вы свяжитесь со мной по указанному email и дадите свои контактные данные (например skype) для более предметного диалога.

    Спасибо. С уважением и наилучшими пожеланиями, Георгий.

  10. admin пишет:

    Здравствуйте Геогий, я отвечу вам на e-mail в обед по Москве.

  11. bdseo.ru пишет:

    переношу весь цикл со всеми данными с футера в хедер, в ИД линкс, но выдает ошибку отсутствия информашион, хотя в футере показывает норм.
    что делать?

  12. admin пишет:

    Все правильно, контроллер header-а ничего не знает о переменной information. Мой пост о переменных Opencart, только подтверждает это ().

    Для того что-бы в header была видна переменная information, для этого вам нужно:
    1. Открыть контроллер header, т.е. файл «catalog\controller\common\header.php»
    2. Добавить в любое место следующий код:

    $this->data['informations'] = array();

    foreach ($this->model_catalog_information->getInformations() as $result) {
    $this->data['informations'][] = array(
    'title' => $result['title'],
    'href' => $this->url->link('information/information', 'information_id=' . $result['information_id'])
    );
    }

    $this->data['contact'] = $this->url->link('information/contact');

  13. lavlan пишет:

    Все это очень интересно….
    А ДАЛЬШЕ……….

  14. admin пишет:

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

  15. lavlan пишет:

    есть сайт http://www….
    хочу под опенкарт 2.0.1.1 шаблон такой же сверстать. Получится или не получится? Вот в чем вопрос…

  16. admin пишет:

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

  17. Александр пишет:

    Здравствуйте!
    Так же хочу обратится к автору за помощью в создании шаблона (у нас есть сайт, но он старый и хотели бы перенести его на opencart), не бесплатно конечно. Жду Вашего письма.
    Спасибо.

  18. admin пишет:

    Здравствуйте Александр!
    Я отвечу вам на почту в обед по Москве.

  19. Nick пишет:

    Здравствуйте, нужно сверстать мультимагазин. Что-то совсем запутался. Готов оплачивать.

    Спасибо!

  20. admin пишет:

    Добрый день Nick.
    Ближе к обеду (по Московскому времени), я напишу вам на почту примерные расценки работ.

  21. Алексей пишет:

    Здравствуйте,
    Обстоятельная и полезная статья. Спасибо.
    Не могли бы Вы скинуть свой e-mail для коммерческой переписки?

  22. admin пишет:

    Добрый день Алексей, я отвечу вам на почту ближе к 19.00 (по Московскому времени).

  23. Игорь пишет:

    Просто спасибо за информацию)

  24. admin пишет:

    Всегда пожалуйста Игорь!

  25. Alex пишет:

    Спасибо за материал! Вот не пойму в модулях, где прописывается путь к стилю? в каком файле указывается путь, и как?

  26. admin пишет:

    Всегда пожалуйста Алекс.
    Путь к стилю, можно прописать в файле представления header.tpl (что в директории common). Этот файл отвечает за вывод шапки сайта, в нем прописываются пути к файлам стилей.

  27. Андрей пишет:

    Здравствуйте, подскажите пожалуйста, когда мы изменяем файлы движка, они ведь перетрутся при обновлении OpenCart?

  28. admin пишет:

    Добрый день Андрей.

    Да, такая возможность есть, поэтому используйте vqmod.

  29. Михаил пишет:

    Здравствуйте, спасибо за подробное описания верстки шаблона. Очень полезная статья. А как быть с адаптивной версткой? Ведь по сути там поменяется всего лишь структура css? т.е. логично предположить, что Ваша статья применима и для адаптивной верстки?
    С ув., Михаил

  30. admin пишет:

    Добрый день.
    Для адаптивной верстки вам нужно работать с файлом css, там вся работа.

  31. Дмитрий пишет:

    Здравствуйте

    У нас готов дизайн, посмотрите пожалуйста можно ли натянуть его на шаблон или нужно с нуля.
    Так же скажите возьметесь ли за проект.
    Спасибо

  32. admin пишет:

    Добрый день Дмитрий. Свяжитесь со мной через страницу услуги.



Ваш комментарий


Ответ в цифрах

 
© s-engineer.ru, 2012-2017 | Все права защищены