Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Magento для дизайнеров: часть 5

by
Read Time:11 minsLanguages:
This post is part of a series called Magento for Designers.
Magento for Designers: Part 4
Magento for Designers: Part 6

Russian (Pусский) translation by Alex Grigorovich (you can also view the original English article)

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

В этой пятой части мы будем строить один из основных видов нашего магазина - страницу информации о продукте. В восторге? Давайте начнем!


Полная серия


Быстрый ответ

В последней части мы определили структуру темы, построив повторяющиеся части темы и существенно определяя общий макет темы.

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


Что мы строим сегодня?

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


Цели для страницы

Наша цель для этой конкретной страницы относительно проста. Мы хотим, чтобы страница без излишеств делала только основные вещи. Таким образом, я составил короткий список элементов, которые, как мне кажется, нужны:

  • Название продукта: Довольно очевидно
  • Возможность показать изображение продукта
  • Быстрый и полный обзор
  • Доступность и цена продукта и, наконец,
  • Кнопка добавления в корзину, чтобы поместить ее в корзину

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


Основной вид

Страница в основном должна выглядеть так:


Шаг 1 - HTML

Сначала мы рассмотрим HTML для части контента. Я предполагаю, что вы довольно свободно владеете HTML и CSS, поэтому я перейду к довольно важным частям.

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

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

Остальная часть HTML очень проста. Заголовок находится в секции h1, в то время как заголовки отдельных секций занимают h2. Краткий обзор вложен в абзац, в то время как полный обзор занимает div.

Теперь мы можем перейти к стилю.


Шаг 2 - CSS

Ничего особенного здесь. Очень простой CSS для размещения элементов в позиции.

Я также использовал немного CSS3, чтобы сделать кнопки немного лучше.


Шаг 3 - Создание нашего файла catalog.xml

Как я уже упоминал в предыдущей части, каждый модуль получает свой собственный XML-файл, чтобы определять, какие элементы включать и общий макет страницы. Страница, которую мы создаем сегодня, основывается на файле catalog.xml, который определяет его содержимое и структуру.

Этот файл должен присутствовать в папке макета, поэтому давайте создадим файл XML и назовите его каталогом.

Полный файл на сегодня выглядит так. Я объясню каждую часть бит частью ниже.

Не обращайте внимания на первоначальные объявления версии XML и макета. Теперь они не имеют для нас никакого значения.

Во-первых, мы даем системе понять, что мы намерены изменить часть представления продукта в системе. Это связано с тем, что в catalog.xml размещается макет для нескольких других видов, поэтому нам необходимо указать, какой вид мы намерены модифицировать.

Теперь мы сообщаем Magento загрузить файл 1column.phtml в качестве основного основного шаблона для этого представления. Это связано с тем, что каждый отдельный вид может использовать любую предопределенную структуру. Например, ваша домашняя страница может использовать очень сложную настраиваемую структуру, вашу страницу продукта - это двойной столбец, а на вашей странице поиска - один столбец.

Если ничего не указано, он загрузит шаблон по умолчанию, указанный в файле page.xml. Поскольку мы используем его для всего остального, эта часть избыточна, но когда вы изменяете этот шаблон для личного использования, редактирование имени файла намного проще, чем добавление фрагментов XML в файл макета.

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

Сначала мы получаем ссылку на головную часть файла, а затем вставляем в нее наш контент, специфичный для страницы. Здесь я вставляю файл с именем product.css, который содержит весь CSS, который мы смотрели выше.

Обратите внимание, что вы не ограничены CSS. В том числе JS и другие активы также возможны.

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

Этот блок определяет все отдельные блоки внутри основного блока содержимого. По сути, мы используем отдельные шаблоны для отображения изображения, обзора и описания продукта, доступности / цены и, наконец, функциональности добавления в корзину.

И с этим наш базовый файл catalog.xml завершен.


Шаг 4 - Создание основного шаблона

Итак, теперь, когда мы указали наш макет, мы можем перейти к созданию файла catalog/product/view.phtml, который мы указали в качестве основного шаблона для раздела контента в XML ранее.

Этот файл немного отличается от шаблона скелета, который мы создали в последней части, потому что мы будем добавлять некоторые мелкие вещи непосредственно, а не проходить путь шаблона, чтобы избежать наворотов вместе с smidgen вызовов API, чтобы помочь нам.

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

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

Здесь мы используем один из методов API Magento для динамического создания URL-адреса, в который должна быть отправлена форма.

Мы используем другой метод Magento для непосредственного получения названия продукта.

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


Шаг 5 - Создание шаблонов для наших блоков

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

Мы будем решать каждый по порядку появления в нашем коде:

Изображение продукта

getChildHtml('media') отображается непосредственно в catalog/product/view/media.phtml. Наш файл выглядит так:

Некоторые простые PHP-коды. Мы используем вспомогательные методы для получения изображения продукта, а затем визуализируем его на экране.

Наличие / Цена

getChildHtml('product_type_data') отображается непосредственно в catalog/product/view/type/simple.phtml. Наш файл выглядит так: Наш файл выглядит так:

Сначала мы проверяем, доступен ли элемент или нет, а затем выведите требуемый HTML. Приобретение цены на продукт - это простой метод вызова!

Добавить в корзину

getChildHtml('addtocart') отображается непосредственно в catalog/product/view/addtocart.phtml. Наш файл выглядит так:

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

Описание товара

getChildHtml('description') отображается непосредственно в catalog/product/view/description.phtml. Наш файл выглядит так:

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

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


Что мы будем строить в следующей части

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


Последнее слово

И все готово! Сегодня мы создали первое представление о нашей теме Magento, представлении продукта, а также о том, как Magento позволяет нам добавлять специальные ресурсы и контент страницы. Надеюсь, это было полезно для вас, и вы сочли это интересным. Поскольку это довольно новая тема для многих читателей, я буду внимательно следить за секцией комментариев, так что, если у вас возникнут какие-либо сомнения.

Вопросы? Хорошие вещи, чтобы сказать? Критицизмы? Поделитесь секцией комментариев и оставьте мне комментарий. Счастливое кодирование!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.