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

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

  1. TopicStarter Overlay
    Offline

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

    Сообщения:
    2.327
    Симпатии:
    77.287
    Репутация:
    170
    Итак у вас есть 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 стилей отвечающий за вывод содержимого контента сайта, за корзину, за вывод модулей, подгоняем таким образом пока не будет достигнута единый стиль сайта.
    С первым способом решения думаю проблем быть не должно, поэтому, в данном посте, я буду описывать второй путь, итак начнем …

    Верстка шаблона под OpenCart


    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, внутри мы увидим:

    Код:
    <?phpecho$header;?><?phpecho$column_left;?><?phpecho$column_right;?>
    <div id="content"><?phpecho$content_top;?>
    <h1 style="display: none;"><?phpecho$heading_title;?></h1>
    <?phpecho$content_bottom;?></div>
    <div class="clearthis">&nbsp;</div>
    <?phpecho$footer;?>
    Содержимое нам говорит, что первым делом выводиться представление шапки $header, далее файлы представления левой и правой колонки, потом контент сверху/снизу и наконец подвал сайта $footer.

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

    Код:
    <?phpforeach($modulesas$module){?>
      <?phpecho$module;?>
    <?php}?>
    Если модули отключены в панели администратора, то данные файлы представления (.tpl) ничего не выводят.

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

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



    18_.jpg



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


    17_.jpg

    Открываем «header.tpl» и копируем туда html код шапки сайта. Обычно это код с <!DOCTYPE> до блока <div id=»container»> (не включительно). Аналогично с шаблоном «footer.tpl», вставляем код подвала сайта, как пример это код с <div id=»footer»> до тэга </html>.

    Вернемся к «home.tlp», в него нужно разместить все остальное что осталось, но только каркас без содержимого.

    Например есть html шаблон со кодом

    Код:
    <!DOCTYPE>
    <html>
    <head>
      Код html, много чего…
    </head>
    
    <body>
      <div id="header">
      Код html, много чего…
      </div>
      <div id="container">
    <div id="center"class="column">
    <a href="#"class="banner">
      <img src="images/bigbanner.jpg"alt=""
    width="572"height="236" />
    </a><br />
    <div id="content">
    Код html, много чего…
    </div>
    </div>
    <div id="left"class="column">
    Код html, много чего…
    </div>
    <div id="right"class="column">
    Код html, много чего…
    </div>
      <div id="footer">
    Код html, много чего…
      </div>
    </body>
    </html>
    Тогда home.tpl должен выглядеть вот так:

    Код:
    <?phpecho$header;?>
    <div id="container">
    <div id="center"class="column">
    <ahref="#"class="banner">
    <img src="image/bigbanner.jpg"alt=""
    width="572"height="236">
    </a><br>
    <div id="content">
    <?phpecho$content_top;?>
    <?phpecho$content_bottom;?>
    </div>
      </div>
    <?phpecho$column_left;?>
    <?phpecho$column_right;?>
    </div>
    <?phpecho$footer;?>
    В файле header.tpl изменим путь к файлу css, на «catalog/view/theme/MyTempl/stylesheet/style.css» и скопируем папку «images» нашего html+css шаблона в директорию «catalog\view\theme\MyTempl».

    Откроем наш style.css и произведем автоматическую замену с «images» на «../images», это позволит нашему шаблону увидеть изображения. В OpenCart результирующая html страница расположена немного по-другому относительно папки images (не в одной директории), поэтому необходимо делать такие изменения.

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

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

    32_.jpg

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

    3. Боремся с тегом <img>

    Настало время, когда необходимо подправить контроллер, возникла это необходимость, потому что я не обнаружил какая переменная в 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/<?phpecho$template?>/images/flag2.gif
    Теперь ссылка на источник изображения динамично формируется и не зависит от имени шаблона.

    Лучше этот процесс автоматизировать и произвести везде авто замену с

    Код:
    images/
    на

    Код:
    catalog/view/theme/<?phpecho$template?>/images/
    Замену производим везде, но кроме логотипа (что в шапке), он должен быть настраиваемым через панель администратора.

    (если тэг <img> с явным указанием путей к изображениям есть и в home.tpl, footer.tpl, то делаем все по аналогии, открываем их контроллер(ы), добавляем переменную template, далее в шаблонах производит авто замену).

    4. Наполняем сайт динамичным содержимым

    Итак мы отредактировали шаблоны и контролеры, в результате система OpenCart должна выводить страницу со всеми изображениями, но без контента:

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

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

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

    Читайте вторую часть методики верстки
     
    Юрий.И, Bermamyt и Евгения нравится это.