Opencart - Методика Верстки Шаблона 2 Часть

Тема в разделе "Шаблоны, дизайн и оформление магазина", создана пользователем admin, 6 ноя 2016.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

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

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

    52.jpg

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

    62.jpg

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


    Код:
    <ul>
    <?phpforeach($informationsas$information){?>
      <li><ahref="<?phpecho$information['href'];?>">
      <?phpecho$information['title'];?></a></li>
    <?php}?>
    </ul>
    И наконец красной рамкой обозначенные переменные ссылки на соответствующие шаблоны, они ни чем принципиальным не отличаются от тех что в желтой рамке, различия их только в видимости. Данные переменные по умолчанию видны в footer.tpl.

    72_.jpg

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

    81_.jpg

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

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


    91_.jpg

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

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

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

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


    101_.jpg

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

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

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

    111_.jpg

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


    [​IMG]

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

    Вся проблема заключается в том, что за оформление контента (за вывод содержимого сайта, корзины, поиска по товарам и модулей) отвечает некое количество стилей, а т.к. мы не подключаем «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_.jpg

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

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

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

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

    Вложения:

    • 121_.jpg
      121_.jpg
      Размер файла:
      79,2 КБ
      Просмотров:
      1
    semandro и Евгения нравится это.
  2. Offline

    Kostroma-Andrey Пользователь

    Сообщения:
    69
    Симпатии:
    28
    Репутация:
    1
    Вот это мегамозги, но я считаю когда обсуждают ,
    Методика Верстки Шаблона 2 Часть
    для большинства людей просто необходима пошаговая инструкция, а то так можно дойти до вещей которые понятны людям в теме и практикой 3-10 лет, а кто начинает тот в стороне.
     
  3. Offline

    Kostroma-Andrey Пользователь

    Сообщения:
    69
    Симпатии:
    28
    Репутация:
    1
    И как правило вопросы задают не профи, а ребята которые учатся, и пытаются попробовать вещи в большинстве случаев которые ранее не использовал (Я не исключение- ищу новое и постоянный ученик). Это как в ВУЗе Преподаватель знает на 4- , -студент на -3, а на отлично никто не знает. так как сам преподаватель еле до 4 дотянул :banan::banan::banan::banan::banan: