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

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

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

Полная серия

Краткий обзор

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

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

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

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

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

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

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

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

Основной взгляд

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

Шаг 1 — HTML

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

<div id=»content» class=»product»>
<div id=»main-product-image»><img src=»images/primg.gif» /></div>
 
<div id=»product-details»>
<div id=»product-availability»>Availability <span class=»available»>In stock
<div id=»product-price»>Price <span>$29.00
<a class=»button» href=»#»>Add to cart</a>
</div>
 
<h1>Photoshop to HTML</h1>
 
<h2>Quick Overview</h2>
<p class=»quick-overview»>
</p>
 
<h2>Product Description</h2>
<div class=»product-description»>
 
</div>

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

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

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

Теперь мы можем перейти к стайлингу.

Шаг 2 — CSS

/* Product page */
 
#main-product-image {
    margin: 0 20px 10px 0;
    padding: 10px;
    float: left;
    border: 1px solid #E1E1E1;
    background: #F3F3F3;
}
 
#product-details {
    width: 180px;
    padding: 10px;
    float: right;
    border: 1px solid #E1E1E1;
    background: #F3F3F3;
    margin: 0 0 0 20px;
}
 
#product-availability span.available, #product-price span {
    color: #7db000;
    float: right;
}
 
.button {
    margin: 10px auto;
    display: block;
    width: 140px;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    color: #555;
    border: 1px solid #ccc;
    font-size: 18px;
    background: #ddd;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    box-shadow: 1px 1px 2px rgba(0,0,0,.5);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
    text-shadow: #fff 0px 1px 1px;
    background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
    background: -moz-linear-gradient(top, #eeeeee, #cccccc);
 
    }
 
.button:hover {
    background: #014464;
    background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));
    background: -moz-linear-gradient(top, #cccccc, #999999);
    color: #000;
    }
 
.button:active {
    -moz-box-shadow: 0 2px 6px black;
    -webkit-box-shadow: 0 2px 6px black;
    }

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

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

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

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

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

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

<?xml version=»1.0″?>
<layout version=»0.1.0″>
    <catalog_product_view translate=»label»>
        <label>Catalog Product View (Any)</label>
        <!— Mage_Catalog —>
        <reference name=»root»>
            <action method=»setTemplate»><template>page/1column.phtml</template></action>
        </reference>
        <reference name=»head»>
            <action method=»addCss»><stylesheet>css/product.css</stylesheet></action>
        </reference>
        <reference name=»content»>
            <block type=»catalog/product_view» name=»product.info» template=»catalog/product/view.phtml»>
               <block type=»catalog/product_view_media» name=»product.info.media» as=»media» template=»catalog/product/view/media.phtml»/>
               <block type=»catalog/product_view_description» name=»product.description» as=»description» template=»catalog/product/view/description.phtml»/>
               <block type=»catalog/product_view_type_simple» name=»product.info.simple» as=»product_type_data» template=»catalog/product/view/type/simple.phtml»/>
               <block type=»catalog/product_view» name=»product.info.addtocart» as=»addtocart» template=»catalog/product/view/addtocart.phtml»/>
            </block>
        </reference>
    </catalog_product_view>
</layout>

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

<catalog_product_view translate=»label»>

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

<reference name=»root»>
            <action method=»setTemplate»><template>page/1column.phtml</template></action>
</reference>

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

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

<reference name=»head»>
    <action method=»addCss»><stylesheet>css/product.css</stylesheet></action>
</reference>

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

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

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

<block type=»catalog/product_view» name=»product.info» template=»catalog/product/view.phtml»>

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

<block type=»catalog/product_view_media» name=»product.info.media» as=»media» template=»catalog/product/view/media.phtml»/>
<block type=»catalog/product_view_description» name=»product.description» as=»description» template=»catalog/product/view/description.phtml»/>
<block type=»catalog/product_view_type_simple» name=»product.info.simple» as=»product_type_data» template=»catalog/product/view/type/simple.phtml»/>
<block type=»catalog/product_view» name=»product.info.addtocart» as=»addtocart» template=»catalog/product/view/addtocart.phtml»/>

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

На этом наш базовый файл catalog.xml готов .

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

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

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

<?php
    $_helper = $this->helper(‘catalog/output’);
    $_product = $this->getProduct();
?>
 
<form action=»<?php echo $this->getAddToCartUrl($_product) ?>» method=»post» id=»product_addtocart_form»<?php if($_product->getOptions()): ?> enctype=»multipart/form-data»<?php endif;
        <div class=»no-display»>
            <input type=»hidden» name=»product» value=»<?php echo $_product->getId() ?>» />
            <input type=»hidden» name=»related_product» id=»related-products-field» value=»» />
<div id=»main-product-image»><?php echo $this->getChildHtml(‘media’) ?></div>
 
<div id=»product-details»>
<?php echo $this->getChildHtml(‘product_type_data’) ?>
<?php echo $this->getChildHtml(‘addtocart’) ?>
</div>
 
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), ‘name’) ?></h1>
 
<?php if ($_product->getShortDescription()):?>
                    <h2><?php echo $this->__(‘Quick Overview’) ?></h2>
                    <p class=»quick-overview»><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), ‘short_description’) ?></p>
<?php endif;?>
 
<?php echo $this->getChildHtml(‘description’) ?>
</form>
</div>

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

<?php
    $_helper = $this->helper(‘catalog/output’);
    $_product = $this->getProduct();
?>

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

<form action=»<?php echo $this->getAddToCartUrl($_product) ?>» method=»post» id=»product_addtocart_form»<?php if($_product->getOptions()): ?> enctype=»multipart/form-data»<?php endif;

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

<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), ‘name’) ?></h1>

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

<?php if ($_product->getShortDescription()):?>
                    <h2><?php echo $this->__(‘Quick Overview’) ?></h2>
                    <p class=»quick-overview»><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), ‘short_description’) ?></p>
<?php endif;?>

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

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

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

Мы рассмотрим каждый из них в порядке появления в нашем коде:

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

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

<?php $_product = $this->getProduct();

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

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

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

<?php $_product = $this->getProduct() ?>
<div id=»product-availability»>Availability
<?php if($_product->isSaleable()): ?>
    <span class=»available»><?php echo $this->__(‘In stock’) ?>
<?php else: ?>
    <span class=»unavailable»><?php echo $this->__(‘Out of stock’) ?>
<?php endif;
</div>
<div id=»product-price»>Price <span><?php echo $this->getPriceHtml($_product) ?>

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

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

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

<?php $_product = $this->getProduct() ?>
 
<?php if($_product->isSaleable()): ?>
        <button title=»<?php echo $this->__(‘Add to Cart’) ?>» class=»button btn-cart»><?php echo $this->__(‘Add to Cart’) ?></button>
<?php endif;

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

описание продукта

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

<?php $_description = $this->getProduct()->getDescription();
<?php if ($_description): ?>
        <h2>Product Description</h2>
        <div class=»product-description»><?php echo $this->helper(‘catalog/output’)->productAttribute($this->getProduct(), nl2br($_description), ‘description’) ?></div>
<?php endif;

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

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

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

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

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

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

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