Создание новой темы

Last modified by vso on Sat, January 29, 2011 03:51
Source|Old Revisions  

Внимание: НЕ ДУБЛИРУЙТЕ СУЩЕСТВУЮЩИЕ ТЕМЫ. Да, это сделает немного проще создание новой темы, но это так же сделает вашу тему полностью не совместимой с обновлениями Magento. Многие дизайнеры (включая некоторые основные дизайнерские компании работающие с Magento) делали это в течении долгого времени и оставили мир Magento в небольшом беспорядке к выходу Magento 1.4. Вместо этого, используйте подход «наименьшего воздействия», чтобы максимизировать совместимость с обновлениями описанный в этой статье. На первом этапе создадим папки для новой темы. Мы назовем наш новый дизайн new_theme. Создаем следующие папки: Новые папки:

1.    /app/design/frontend/your_package/new_theme/ - наша новая тема
2.    /app/design/frontend/your_package/new_theme/layout
3.    /app/design/frontend/your_package/new_theme/template
4.    /skin/frontend/your_package/new_theme/ - наши новые папки оболочки
5.    /skin/frontend/your_package/new_theme/css/
6.    /skin/frontend/your_package/new_theme/images/

Где your_package – любое название вашего пакета

Также создаем следующие новые файлы:

Новые файлы:

1.    /app/design/frontend/default/new_theme/layout/local.xml
2.    /skin/frontend/default/new_theme/css/local.css

Наконец, добавим шаблон в local.xml, так чтобы в local.css оказалось включено:

local.xml:

  1.     <?xml version="1.0" encoding="UTF-8"?>
  2.  
  3.     <layout>
  4.         <default>
  5.        
  6.             <!— Убираем выноски и редко используемые вещи -->
  7.             <remove name="right.poll"/>
  8.             <remove name="right.permanent.callout"/>
  9.             <remove name="left.permanent.callout"/>
  10.             <remove name="paypal.partner.right.logo"/>
  11.      
  12.             <!— добавляем локальную таблицу стилей -->
  13.             <reference name="head">
  14.                 <action method="addCss"><stylesheet>css/local.css</stylesheet>
  15.                 </action>
  16.             </reference>
  17.         </default>
  18.     </layout>

Хороший стиль программирования имеет следующие признаки:

  1. отдельный файл макета, названный local.xml, где указаны все изменения в макете.
  2. избегать дублирования названия файлов макета с файлами макетов в основной теме.
  3. избегать дублирования названия css файлов с css файлами оболочке по умолчанию.
  4. никаких шаблонных .phtml файлов, за исключением тех которые изменяются для поддержки вашей новой темы. (Обычно их число бывает очень малым.)

Настройка новой темы в административной части

После создания папок необходимо переключить тему в административной зоне.

  1. Идем в меню System (Система) > Configuration > Design через верхнюю навигационную панель
  2. Около “Themes” и в текстовом поле “Default” печатаем: new_theme
  3. Нажимаем кнопку “Save config” в верхнем правом углу

Добавление библиотек стилей и js (часть I)

Любые дополнительные файлы стилей (css) или библиотек javascript/ajax (js), которые мы хотим включить в наш новый проект должны быть скопированы в соответствующие папки. Стили. Копируем в папку /skin/frontend/default/new_theme/css/. Чтобы подключить эти файлы, есть один из двух способов или модифицировать local.xml чтобы добавить новый файл, или добавить импортирование в local.css, например:

  1. @import url('my_new.css');

Javascript / AJAX библиотеки. Создаем новую папку в /js/ названную new_theme и копируем ваши файлы в нее. Если Вы используете библиотеки javascript тогда это хорошое место чтобы разместить файлы библиотеки. Файлы Javascript могут быть добавлены в Вашу тему добавлением следующего в local.xml:

  1.     <?xml version="1.0" encoding="UTF-8"?>
  2.      
  3.     <layout>
  4.         ...
  5.         <default>
  6.         ...
  7.             <reference name="head">
  8.                 ...
  9.                 <action method="addJs"><script>varien/js.js</script></action>
  10.                 ...
  11.             </reference>
  12.         ...
  13.         </default>
  14.         ...
  15.     </layout>

Использование XML для изменения макета

С помощью XML мы можем изменить почти каждый аспект нашего нового шаблона. Например, мы можем задать альтернативный макет колонки для части страниц, изменить META информации, кодировку страницы, типы блоков, используемые на каждой странице и т.д. Чтобы достичь этого, Вы просто добавляете различные секции в Ваш файл local.xml. Для лучшего понимания посмотрите:

    app/design/frontend/base/default/layout/page.xml

В 1.3.x и ранее, это находится в:

    app/design/frontend/default/default/layout/page.xml

Изменение META секции

(разве это не ужасно устаревший раздел?) Основной файл используемый для контроля значений META тэгов и других, разных деталей это config.xml, который располагается в папке /app/design/frontend/new_template/default/etc/. Ниже краткое описание каждого META тэга и возможные значения:

  1.     <title>Magento Commerce</title>

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

  1.     <media_type>text/html</media_type>

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

  1.     <charset>utf8</charset>

UTF8 это кодировка Unicode с переменной длинной символов. Она в состоянии представить любой символ в стандарте Unicode, к тому же младшие байты системы кодирования и символьное распределение в UTF-8 обратно совместимы с таблицей ASCII. По этим причинам она устойчиво становится предпочтительной кодировкой для электронной почты, веб страниц и в других случаях, когда символы встроены или переданы потоком. Конечно же, мы можем изменить ее на любую другую кодировку (например, ISO-8859-1 или ISO-8859-2), но на это нет необходимости пока мы предпочитаем сохранять наши файлы в кодировки UTF8. Больше информации о UTF8 можно найти в Wiki: http://ru.wikipedia.org/wiki/UTF-8

  1.     <description>Default Description</description>

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

  1.     <keywords>Magento, Varien, E-commerce</keywords>

Тэг keywords управляет мета-тегом ключевое слово и это место, куда помещают наиболее важные слова, которые передают содержание сайта. Самый практичный совет это писать не больше 500 символов и не более 20 слов для наилучших результатов.

  1.     <robots>*</robots>

Тэг robots управляет директивами для роботов и является простым механизмом указывать посещающим веб ботам и роботам поисковых систем нужно ли индексировать страницу или перейти на следующую страницу. Содержание мета-тега Robots содержит директивы разделенные запятыми. Популярными директивами являются index, noindex, follow и nofollow. Две директивы index определяют следует ли индексирующему роботу индексировать страницу или нет. Две директивы follow определяет может ли робот переходить по ссылкам на этой страницы или нет. По умолчанию index and follow. Значения all и none задают всем директивам разрешающие или запрещающие значения: all=index,follow и none=noindex, nofollow Мы просто можем переписать директивы Magento по умолчанию разместив одну из четырех следующих линей в этом тэги, хотя это и не рекомендуется. Вот они:

  • index,follow
  • noindex,follow
  • index,nofollow
  • noindex,nofollow

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

  1.     <logo_src>images/logo.gif</logo_src>

Тэг logo_src устанавливает связь с файлам логотипа, которым мы хотим использовать в нашем сайте. Картинка logo.gif расположенная в папке /skin/frontend/new_template/default/images/ так что если мы хотим изменить ее мы должны скопировать новый файл в эту папку. Мы также сожжем создать новую папку внутри папки с изображениями (например new_images) и разместить все наши новые файлы используемые в новом шаблоне и изменить это тэг соответственно. Самым простым способом поменять логотип это просто переписать старый файл logo.gif новым файлом logo.gif.

  1.     <logo_alt>Magento Commerce</logo_alt>

Тэг logo_alt определяет атрибут alt для нашего изображения логотипа и обычно используется программами чтения с экрана и браузерами с отключенными изображениями. Если один из наших покупателей использует программу для чтения с экрана или браузер с отключенными изображениями, тогда он увидит текст из тэга alt вместо изображения.

Понимание макета XML файлов

Введение

Использование xml вместо методов(JSON, .ini файлов, функции include / require) позволяет нам изменять многие аспекты нашей страницы без прямого изменения .phtml файлов. Эта глава относится к теме по умолчанию, так после изменения темы (как мы сделали выше) пути также изменятся.

Макет / структура страницы

Основной макет определен в page.xml, который размещается в /app/design/frontend/base/default/layout/page.xml. Существует две огромных задачи осуществляемые макетом. Первая это определить визуальный шаблон вашего магазина. По умолчанию Magento использует шаблон из 3-х колонок, так что это определяет использование 3columns.phtml (Расположенный в Вашей папке template/page/):

  1. <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

Если Вы хотите изменить шаблон Вашего магазина, например, на 2-х колоночный Вам нужно сослаться на это в секции в local.xml, и воспользоваться действием (action) чтобы заменить .phtml на необходимый (в этом случае, 2columns-left.phtml или 2columns-right.phtml).

  1. <reference name="root">
  2.     <action method="setTemplate"><template>page/2columns-right.phtml</template>
  3.     <!-- Mark root page block that template is applied -->
  4.     <action method="setIsHandle"><applied>1</applied></action>
  5. </action>
  6. </reference>

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

  1.     <new_layout translate="label">
  2.         <label>New Layout</label>
  3.         <reference name="root">
  4.             <action method="setTemplate"><template>page/new-layout.phtml</template></action>
  5.             <!-- Mark root page block that template is applied -->
  6.             <action method="setIsHandle"><applied>1</applied></action>
  7.         </reference>
  8.     </new_layout>

Больше информации о тэге action и связанных методах размещены в секции d этой главы. Вторая это создание “блок-контейнеров” заполненные прикладными данными для вывода в ваших .phtml шаблонных файлах. Во-первых, если взглянуть на стандартный файл 3column.phtml Вы увидите, что там вызывается метод (функция) getChildHtml() несколько раз: (цитата из 3columns.phtml – начиная с линии 56):

  1. <?=$this->getChildHtml('header')?>
  2. /div><!-- [end] header --><!-- [start] middle --><div class="main-container">
  3. <div id="main" class="col-3-layout">
  4. <?=$this->getChildHtml('breadcrumbs')?>
  5. <!-- [start] left -->
  6. <div class="col-left side-col">
  7. <?=$this->getChildHtml('store')?>
  8. <?=$this->getChildHtml('left')?>
  9. </div>
  10. <!-- [end] left -->

Каждая из этих ссылок указывает на “блок-контейнер” определенный в вашем page.xml и в последующих файлах Модулей .xml. Вы заметите контейнер для колонок “left”, “right”, “content” и других стандартных областей. Он служит для вывода из ваших файлов шаблонов .phtml. Взгляните на это: /app/design/frontend/default/default/layout/page.xml

  1. <block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
  2. <block type="core/text_list" name="left" as="left"/>
  3. <block type="core/messages" name="global_messages" as="global_messages"/>
  4. <block type="core/messages" name="messages" as="messages"/>
  5. <block type="core/text_list" name="content" as="content"/>
  6. <block type="core/text_list" name="right" as="right">

Так что в основном page.xml создает Блоки Данных, Ваши .phtml Вывода с данными, где вам необходимо. Следовательно, для имен left, right и так далее в вашем .phtml. Чтобы добавить, удалить или модифицировать блоки в вашей теме, используйте файл local.xml, не копию page.xml. Тэг reference позволяет Вам определить с какой часть темы вы работаете, затем Вы можете определять дополнительные блоки или используя тэг action изменять или удалять блоки. Теперь Вы знаете что page.xml содержит дескриптор называемый “<default>”. Команды XML вложенные внутрь <default> компонуют макет задаваемый по умолчанию для всего сайта. Последующие дескрипторы (как показано в верхней части page.xml) просто обновляют макет по умолчанию соответствующим макетом для страницы.

  1. <layoutUpdate>
  2. <reference name="top.menu">
  3. <block type="catalog/navigation" name="catalog.topnav">
  4. <action method="setTemplate"><template>catalog/navigation/top.phtml</template></action>
  5. </block>
  6. </reference>
  7. <reference name="right">
  8. <block type="catalog/product_compare_sidebar" name="catalog.compare.sidebar">
  9. <action method="setTemplate"><template>catalog/product/compare/sidebar.phtml</template></action>
  10. </block>
  11. </reference>
  12. </layoutUpdate>

Если вы прочитаете код и подумаете о том, что происходит смысл, станет понятен. <layoutUpdate> обговляет ваш код новыми блоками. Как же становится понятным куда размещать новый блок? Помните в вашем теге default Вы определили “блок-контейнеры” для left, right, и т.д. Так что когда говорим

  1. <reference name = "right">

Это говорит Magento вставить следующий блок в колонку RIGHT когда вы оказываетесь в представлении “Catalog”. (Помните, оно находится в layout/catalog/) так что он появляется только, когда вы входите в раздел сайта - каталог. Он также определяет шаблон для нового блока, чтобы использовать, так что в примере выше блок сравнения имеет свой собственный шаблон, расположенный в catalog/product/compare/sidebar.phtml (в папке вашего шаблона). Эти же самые дескрипторы могут быть использованы в local.xml чтобы ограничить границы частичного обновления. Например, пусть Вы хотите чтобы wishlist был на каждой страницы магазина, но не хотите чтобы он был на страницах учетной записи покупателя. Вам нужно рассмотреть дескриптор, используемый на страницах учетной записи (это в customer.xml) и добавить этот дескриптор в local.xml. Затем удалить wishlist, так что это не будет загружаться на страницах учетной записи. Пример ниже удаляет “Login” и добавляет “Register” взамен, но если покупатель уже не авторизовался:

  1.     <customer_logged_out>
  2.         <reference name="top.links">
  3.             <action method="removeLinkByUrl" module="catalog"><url helper="customer/getLoginUrl" /></action>
  4. <action method="addLink" translate="label title" module="customer">
  5. <label>Register</label>
  6. <url helper="customer/getRegisterUrl"/>
  7. <title>Register</title>
  8. <prepare/>
  9. <urlParams/>
  10. <position>100</position>
  11. </action>
  12.         </reference>
  13.     </customer_logged_out>

Значение/атрибуты тэга Reference:

Как Вы видели в тэгах reference могут использоваться разные атрибуты для отображения блоков на страницы. Возможные значения:

  • root – мы меняем его в основном чтобы задать другой файл .phtml в виде корневого шаблона например (1column.phtml , 2columns-left.phtml ,2columns-right.phtml и т.д.)
  • head – это относится к <HEAD> секции страницы, мы будем использовать это имя ссылки чтобы отразить наши изменения в этой секции
  • top.menu – определяет содержание для верхнего меню
  • left – задает содержание левой колонки
  • right – задает содержание правой колонки
  • content – определяет блоки размещенные в основной части нашей страницы
  • before_body_end – используется для добавления блока в конец страницы, т.е. перед тегом </BODY>

Далее еще несколько названий ссылок которые мы можем использовать, но они для более специфичных страниц не же ли глобальных страниц, например:

  • customer_account_navigation
  • customer_account_dashboard

применяются на странице учетной записи клиента.

product.info.additional - задает дополнительный блок для размещения связанных товаров, оценки доставки и т.д.

Методы тэга Action:

Методы тэга Action позволяют нам изменять многие настройки темы без внесения ручных изменений в файлы .phtml. Метод, указанный в атрибуте метода относится к методу в Модели, который связан с конкретным блоком в запросе. Наиболее важные методы описаны ниже.

setTemplate Метод Действия setTemplate позволяет нам изменять файл .phtml по умолчанию используемый в конкретном блоке. Например, перейдя в app/design/frontend/default/default/layout/catalog/product/view.xml мы увидим такую ссылку:

  1. <reference name="root">
  2. <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
  3. </reference>

и использование другого значения <template> нам позволит изменить используемый файл .phtml по умолчанию на странице продуктов. Возможные значения: 1column.phtml 2columns-left.phtml 2columns-right.phtml 3columns.phtml one-column.phtml dashboard.phtml Как Вы видите в app/design/frontend/default/default/layout/checkout/cart.xml, есть также 2 дополнительных значения для пустой и не пустой корзины

  1. <action method="setCartTemplate"><value>checkout/cart.phtml</value></action>
  2. <action method="setEmptyTemplate"><value>checkout/cart/noItems.phtml</value></action>
  3. <action method="chooseTemplate"/>

Метод chooseTemplate используется для задания шаблона (setCartTemplate / setEmptyTemplate) зависящего от количества товаров в корзине. Если там больше 0 тогда используется

  1. <action method="setCartTemplate"><value>checkout/cart.phtml</value></action>

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

  1. <action method="setEmptyTemplate"><value>checkout/cart/noItems.phtml</value></action>

Функция, реализующая это в Модели, показана ниже:

  1. public function chooseTemplate()
  2.     {
  3.         if ($this->getQuote()->hasItems()) {
  4.             $this->setTemplate($this->getCartTemplate());
  5.         } else {
  6.             $this->setTemplate($this->getEmptyTemplate());
  7.         }
  8.     }

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

addCss Этот метод позволяет нам добавить дополнительный файл CSS на конкретную страницу или для всего глобального шаблона. Если мы используем имя ссылки “head” и метод действия addCss

  1. <reference name="head">
  2. <action method="addCss"><link>style.css</link></action>
  3. </reference>

Тогда наша страница будет иметь дополнительную строку в коде присоединяющая CSS файл, например:

  1. <link rel="stylesheet" type="text/css" media="all" href="http://www.ourstore.com/skin/frontend/default/default/css/style.css" ></link>

Как мы видим путь в тэге <link> соответствует папке /skin/frontend/default/default/css/ .

addCssIe Этот метод очень похож на предыдущий, но файл css будет выведен в том случае если User-Agent (браузером) является Internet Explorer или Maxthon. Так что используя этот метод мы можем присоединить специальный css файл для этих браузеров. Это очень полезно, если нашей страницы будут необходимы изменения в css зависящие от браузера. Используя:

  1. <reference name="head">
  2. <action method="addCssIe"><link>style.css</link></action>
  3. </reference>

выведем в исходный код страницы:

  1. <!--[if IE]>
  2. <link rel="stylesheet" type="text/css" media="all" href="http://www.ourstore.com/skin/frontend/default/default/css/style.css" ></link>
  3. <![endif]-->

addJs Этот метод позволяет присоединить скрипт .js таким же образом как и присоединение CSS файла. Скрипт находится в папке /js/test/ но Вы можете задать любой подкаталог в /js/ Используя:

  1. <reference name="head">
  2. <action method="addJs">test/script.js</action>
  3. </reference>

будет добавлен скрипт на страницу с атрибутом src

  1. <script src="http://www.ourstore.com/js/test/script.js" />

addJsIe – добавляет файл .js в заглавную секцию страницы и используется если User Agent (браузером) является Internet Explorer. Если мы добавляем различные файлы css зависящие от User-Agent мы можем сделать тоже самое и с файлами .js. Используя:

  1. <reference name="head">
  2. <action method="addJsIe">our/script.js</action>
  3. </reference>

будет добавлен скрипт на страницу с атрибутом src

  1. <script src="http://www.ourstore.com/js/our/script.js" />

но внутри комментария

  1. <!--[if IE]><![endif]-->

setContentType Этот метод может переписать заголовки по умолчанию посылаемые нашей страницей браузеру. Так что мы можем установить text/xml вместо text/html (или другой если пожелаете). Используйте:

  1. <reference name="head">
  2. <action method="setContentType"><content>text/xml</content></action>
  3. </reference>

setCharset позволяет нам переписать кодировку страницы по умолчанию на каждой страницы или всем шаблоне. Пока мы сохраняем файлы в необходимой кодировке это не понадобится. Используя:

  1. <reference name="head">
  2. <action method="setCharset"><charset>ISO-8859-2</charset></action>
  3. </reference>

Так что в этом случае наша страница будет иметь Центрально Европейскую кодировку вместо UTF-8 addLink addLink методы могут быть использованы для задания настроек по которым можно обращаться к нашим файлам .phtml шаблонов без ручного изменения файлов .phtml. Пример использования : Внимание, этот пример требует дублирования account.xml, который может быть нарушен после обновления. Необходимо использовать local.xml вместо него. При добавлении блока расположенного в app/design/frontend/default/default/layout/customer/account.xml в наш тэг <reference name=”content”> в app/design/frontend/default/default/layout/checkout/cart.xml мы позволим клиенту переходить к учетной записи прямо из корзины.

  1. <block type="customer/account_navigation" name="customer_account_navigation" before="-">
  2. <action method="setTemplate"><template>customer/account/navigation.phtml</template></action>
  3. <action method="addLink" translate="label"><name>account</name><path>customer/account/</path><label>Account Dashboard</label></action>
  4. <action method="addLink" translate="label"><name>address_book</name><path>customer/address/</path><label>Address Book</label></action>
  5. <action method="addLink" translate="label"><name>account_edit</name><path>customer/account/edit/</path><label>Account Information</label>
  6. </block>

Файл cart.xml должен выглядеть так

  1. <layoutUpdate>
  2. <reference name="root">
  3. <action method="setTemplate"><template>page/1column.phtml</template></action>
  4. </reference>
  5.    
  6. <reference name="content">
  7. <block type="customer/account_navigation" name="customer_account_navigation" before="-">
  8. <action method="setTemplate"><template>customer/account/navigation.phtml</template></action>
  9. <action method="addLink" translate="label"><name>account</name><path>customer/account/</path><label>Account Dashboard</label></action>
  10. <action method="addLink" translate="label"><name>address_book</name><path>customer/address/</path><label>Address Book</label></action>
  11. <action method="addLink" translate="label"><name>account_edit</name><path>customer/account/edit/</path><label>Account Information</label><base>{{baseSecureUrl}}</base></action>
  12. </block>
  13. <block type="checkout/cart" name="checkout.cart">
  14. <action method="setCartTemplate"><value>checkout/cart.phtml</value></action>
  15. <action method="setEmptyTemplate"><value>checkout/cart/noItems.phtml</value></action>
  16. <action method="chooseTemplate"/>
  17.  
  18. <block type="checkout/cart_coupon" name="checkout.cart.coupon" as="coupon">
  19. <action method="setTemplate"><template>checkout/cart/coupon.phtml</template></action>
  20. </block>
  21. <block type="checkout/cart_shipping" name="checkout.cart.shipping" as="shipping">
  22. <action method="setTemplate"><template>checkout/cart/shipping.phtml</template></action>
  23. </block>
  24. <block type="checkout/cart_crosssell" name="checkout.cart.crosssell" as="crosssell">
  25. <action method="setTemplate"><template>checkout/cart/crosssell.phtml</template></action>
  26. </block>
  27. </block>
  28. </reference>
  29. </layoutUpdate>

Конечно, в соответствии с предыдущим материалом мы также можем изменить

  1. <action method="setTemplate"><template>page/1column.phtml</template></action>

в коде выше согласно нашим нуждам. Я использовал для примера

  1. <action method="setTemplate"><template>page/one-column.phtml</template></action>

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

Макет блоков

Как мы видели ранее, большинство наших xml файлов имеют тэг <block>. Он определяет тип блока(“type”), его имя(“name”) и псевдоним(“as”), так что мы можем передавать его на нашу страницу. Основная структура блока выглядит так:

  1. <block type="catalog/product_view_super_config" name="product.info.config" as="super_config">
  2. <action method="setTemplate"><template>catalog/product/view/super/config.phtml</template></action>
  3. </block>

type=”catalog/product_view_super_config” – определяет тип блока на странице. Этот пример отправит в файл /app/code/core/Mage/Catalog/Block/Product/View/Super/Config.php который определяет класс Mage_Catalog_Block_Product_View_Super_Config;

name=”product.info.config” – определяет имя нашего блока и оно должно быть уникальным;

as=”super_config” – определяет короткое название нашего блока, которое может быть использовано в функции getChild на конкретной странице.

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

Понимание .phtml файлов

Введение

Phtml файлы это шаблонные файлы которые обрабатывают вывод в браузер. Они не что иное как html файлы с использованием php тэгов. Мы используем их, чтобы стилизовать нашу страницу и вид сайта.

Редактирование .phtml файлов требует основные познания в XHTML, CSS и понимание как использовать PHP функции на странице.

ВАЖНО: Перед изменением .phtml файла, он должен быть скопирован из base (или default) темы, в новую тему. Когда Magento обнаружит один из файлов в новой теме, будет проигнорирован .phtml файл из base(или default) темы, так что важно копировать только файлы которые точно необходимо изменить. Это минимизирует количество ошибок при обновлении Magento.

Давайте взглянем на header.phtml размещенный в template/page/html.

  1. <div class="header-top-container">
  2.     <div class="header-top">
  3.         <h1 id="logo"><a href="<?=$this->getUrl('')?>"><img src="<?=$this->getLogoSrc()?>" alt="<?=$this->getLogoAlt()?>"/></a></h1>
  4.         <p class="no-show"><a href="#main"><strong><?=__('Skip to main content')?> &raquo;</strong></a></p>
  5.         <div class="quick-access">
  6.             <div class="account-access">
  7.                <strong><?=$this->getWelcome()?></strong> <?=$this->getChildHtml('topLeftLinks')?>
  8.             </div>
  9.             <div class="shop-access">
  10.                 <?=$this->getChildHtml('topRightLinks')?>
  11.             </div>
  12.         </div>
  13.  
  14.     </div>
  15. </div>
  16. <?=$this->getChildHtml('topMenu')?>

В этом файле мы видим основные XHTML тэги, применение CSS классов, но наиболее важное – это функции Magento используемые для получения XML блоков и визуализации их в phtml файле.

Обычно в наших шаблонах вы видите тэги <? ?> используемые для вызова функций. Основываясь на примере выше: <?=$this→getUrl(’‘)?> - вызов, используемый без параметров, вернет основной путь нашего магазина;

<?=$this→getLogoSrc()?> - отобразит изображение логотипа, основываясь на пути используемый в etc/config.xml <logo_src>images/logo.gif</logo_src> Если мы хотим изменить наш логотип, мы можем сделать это двумя способами.

Первая возможность это изменить путь в <logo_src> на какой-нибудь другой. Второй возможностью является непосредственное изменение прямо в phtml файле строки

  1. <img src="<?=$this->getLogoSrc()?>" alt="<?=$this->getLogoAlt()?>"/>

Но это решение не рекомендуется, т.к. мы должны использовать функции ядра и понять, как их применять.

<?=$this→getLogoAlt()?> - эта функция позволяет нам изменять тэг alt нашего логотипа, так что если он будет не доступен, будет появляться информация из этого тэга. Любые изменения могут быть сделаны изменением <logo_alt>Magentso Commerce</logo_alt> или указывая их непосредственно в phtml файле.

<?=(Skip to main content)?> - все тэги похожие на этот будут использоваться для динамического перевода содержимого на другой язык. Нам следует понимать это как <?=__(’Английский текст для перевода’)?>

<?=$this→getChildHtml(’topLeftLinks’)?> - Функция getChildHtml() наиболее важная функция используемая в нашем шаблоне. Она вызывает конкретный блок указываемый в XML файле и формирует из него изображение в виде HTML , а затем выводит его в браузер. Мы можем вызывать блоки от всюду и из соответствующих XML файлов.

Для использования getChildHtml(’topLeftLinks’) нам необходим определенный в псевдониме “as” потомок, так что поподробней рассмотрим page.xml (макет/ папка). Далее что нужно рассмотреть:

  1. <block type="page/html_toplinks" name="top.left.links" as="topLeftLinks"/>

Как мы видим getChildHtml(’topLeftLinks’) использует указанный псевдоним “as” и вызывает его из XML. Функция getChildHtml() позволяет Magento только вызывать блок, если он определен в соответствующем XML файле.

Мы так же можем переписать этот механизм используя вызов другой функции:

<?=$this→getLayout()→getBlock(’top.left.links’)→toHtml()?> Эта конструкция будет вызывать верхний искомый блок (основываясь на его имени а не псевдониме “as”) из всех ваших шаблонов, так что нам не нужно определять его повсюду в наших XML файлах. Запомните использование атрибута “name” вместо атрибута “as” является обходным приемом.

Мы должны понимать, что каждый phtml файл и каждая функция всегда обращается к соответствующему файлу или файлам. Мы можем определить используемые phtml файлы просто обнаружив следующее:

  1. <action method="setTemplate"><template>wishlist/sidebar.phtml</template></action>

что скажет нам какой phtml файл будет использован.

Структура папок

Каждое представление, используемое в нашем приложении, разбито на каталоги и подкаталоги для хранения шаблонных файлов. Давайте взглянем на структуру каталога:

  • callouts – папка где размещаются файлы для наших выносок и размещенных объявлений
  • catalog – папка для хранения файлов используемых в наших категориях, быстрой навигации, продуктах, страницах сравнения
  • catalogsearch – здесь мы найдем файлы, которые участвуют в формировании механизма поиска и результирующих страницах
  • checkout – все страницы используемые в процессе проверки и оформлении покупок в нашем магазине. Здесь мы так же найдем шаблоны корзины и блоки кросс-продаж и купонов.
  • cms – папка для шаблонов статических страниц.
  • core – папка содержащая шаблоны переключения между магазинами (пока не активна)
  • customer – все страницы покупателя (например. нанель учетной записи, адресные формы, список заказов и отзывов)
  • datafeed – папка для хранения наших csv, txt, xml файлов, используемых для механизма сравнения и других внешних приложений
  • directory – здесь мы найдем переключатель валют для нашего магазина
  • email – здесь мы найдем все страницы необходимые для отправки электронной почты, например заказа, восстановление пароля, подписка на новости
  • install – шаблонные файлы для инсталлера Magento
  • newsletter - subscribe.phtml помещенный в эту папку позволит нам изменить внешний вид подписки на рассылку размещенный на страницы
  • page – наиболее важная папка в которой мы найдем все основные файлы определяющий стиль нашего сайта. Более подробно это будет описано в следующих подглавах.
  • payment – шаблоны используемые для стилизации платежных форм
  • poll - 2 файла чтобы менять внешний вид нашего опроса в зависимости от состояния (еще не голосовали / показать результат)
  • rating – рейтинговый блок используемый на страницах продуктов
  • review – все файлы применяемые для формирования изображения блоков используемые в отзывах
  • sales – страницы для детализации заказов, инвойсов, последних заказов
  • searchlucene – результат вывода для контроллера Zend_Lucene используемый в Magento
  • tag – шаблоны тэгов продукта хранятся здесь
  • wishlist – файлы-шаблоны для обработки вывода наших действий листа пожеланий.

Добавление основных изменений в шаблоны

Каждый файл используемый для обертывания основного внешнего вида шаблона размещается в папке template/page. Там мы видим 1column.phtml 2columns-left.phtml 2columns-right.phtml 3columns.phtml one-column.phtml dashboard.phtml

Это по существу скелет наших страниц в HTML файлах. Изменяя эти файлы мы можем устанавливать новый внешний вид структуры страницы.

Также в template/page располагаются html подпапки в которых мы можем изменять нижний колонтитул, верхний колонтитул и блоки ссылок нашего шаблона.

Каждый из них использует простые вызовы функций (например, getChildHtml ()) так что мы можем также определить блок поиска в XML-файлах. Например когда мы видим

  1. <reference name="root">
  2. <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
  3. </reference>

это говорит нам что эта страница будет использовать 2columns-right.phtml как скелет нашей страницы.

Вызов макета блоков, используя функции Magento

Как было описано ранее существует два способа вызывать блоки.

  1. <block type="page/html_toplinks" name="top.left.links" as="topLeftLinks"/>

<?=$this→getChildHtml(’as’)?> - используя псевдоним блока “as” из XML файла мы можем отображать блок на нашей страницы при условии что он был уже определен в соответствующем XML файле.

<?=$this→getLayout()→getBlock(’name’)→toHtml()?> - используя имя блока из XML файла, мы можем вызвать блок, так или иначе, уже определенного в соответствующем XML файле

e. Добавление библиотек стилей и js (часть II)

Есть две возможности добавить пользовательский js и библиотеку стилей в наш шаблон. Рекомендованный метод это расширением head секции в в XML файле по умолчанию. Но у вас есть также возможность добавлять файлы непосредственно в конкретный корневой файл-шаблон.

  1. <script type="text/javascript" src="<?=$this->getJsUrl()?>varien/js.js" ></script>
  2. <script type="text/javascript" src="<?=$this->getJsUrl()?>varien/form.js" ></script>
  3. <script type="text/javascript" src="<?=$this->getJsUrl()?>varien/menu.js" ></script>

Как мы видим, мы также можем воспользоваться методом getJsUrl который добавляет путь к скрипту в атрибут src. Должно будет выведено http://yoursite.com/js/, так что исходник будет выглядеть так:

  1. <script type="text/javascript" src="http://yoursite.com/js/varien/js.js" ></script>
  2. <script type="text/javascript" src="http://yoursite.com/js/varien/form.js" ></script>
  3. <script type="text/javascript" src="http://yoursite.com/js/varien/menu.js" ></script>

Добавление таблиц стилей не сложнее чем добавление js файла. Мы делаем это используя функцию которая выводит путь к папке skin.

  1. <link rel="stylesheet" href="<?=$this->getSkinUrl('css/styles.css')?>" type="text/css" media="all"/>

И результат будет

  1. <link rel="stylesheet" href="http://yoursite.com/skin/frontend/default/default/css/styles.css" type="text/css" media="all"/>

так что getSkinUrl() устанавливает актуальный путь к папке скинов: http://yoursite.com/skin/frontend/default/default/




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs