Розробка Теми для Magento: Файли Шаблону

() translation by (you can also view the original English article)

В цій статті ми оглянемо основи файлів шаблону Мадженто. Оглянемо їх впровадження і зробимо деякі основні зміни.

Ці зміни будуть включати в себе показ рекомендованих товарів на головній сторінці сайту і завантаження JavaScript у футері.

Виходячи з нашої попередньої статті ми побачили, що файли макета контролюють кожен блок в темі і вирішують, що повинно, і що не повинно відображатись. Але те, що рендериться всередині цього блоку, - це саме те, коли файли шаблонів вступають в дію.

У цій статті ми будемо концентруватися на наступних папках:

Шаблон - app/design/frontend/<назва_пакету>/<назва_теми>/template/
Локалізація -app/design/frontend/<назва_пакету>/<назва_теми>/locale/

Якщо ви лише щойно приєдналися до нас, будь ласка, переконайтеся, що прочитали попередні частини цієї серії статей.

Для довідки, ми вже розглянули:

А тепер давайте розпочнемо роботу.

Шаблон

Файли шаблону Magento - це файли PHTML, що складаються із суміші HTML і PHP. Деякі з них генерують цілі сторінки, такі як 1column.phtml, у той час як інші генерують конкретні блоки в межах сторінки, такі як header.phtml.

Для більшості випадків це саме ті файли, з якими ми будемо в основному працювати під час розробки веб-сайту, маючи на увазі, що саме вони призначені для фронтенд розробників. Як тільки оголошено XML і шаблон викликається, очікується, що файл проаналізовано і він відображається коректно.

Є сотні файлів шаблону і знати, який з них потрібно редагувати, а потім віднайти потрібний файлі в ієрархії, на початку це може бути дуже складним завданням.

Щоб допомогти в цьому і врятувати нас від багатьох годин головного болю, в адмін панелі є кілька корисних параметрів.

Важливо зазначити, що ми можемо використовувати такі настройки тільки задіявши область дії конфігурації "Сайт" або "Вид Магазину". При поточній області дії конфігурації "За замовчуванням", потрібні нам параметри будуть недоступні, тож зверніть на це увагу після входу в систему. Цей функціонал є дуже корисним, хоча і працює він для певного веб-сайту або вигляду магазину, а не глобально.

Підказки Шаблону

Вони швидко визначають, які файли завантажуються для певної сторінки, і показують нам шлях до цих файлів. Щоб включити цю функцію, зайдіть в адмінку сайта.

Перейдіть до Система > Конфігурація. Потім в меню зліва пролистайте сторінку до кінця і натисніть кнопку "Для розробника" в секції «Розширені параметри». Після того, як ми змінили область дії конфігурації на "Головний сайт", в налаштуваннях стане доступна секція "Пошук та усунення несправностей (debug)".

Здавалося б, що нічого не відбулося, як тільки ви натиснули "Зберегти конфігурацію", але якщо ви перейдете до фронтенду вашого сайту, на головну сторінку, наприклад, і оновите її, то побачите підказки шляхів шаблону.

За допомогою цього ми будемо знати, де розташовуються потрібні файли, і якщо потрібні будь-які зміни в кореневих файлах, ми зможемо простим копіюванням, із дотриманням повного шляху, файл шаблону з base теми скопіювати до своєї теми, і вже там внести необхідні зміни.

Ми можемо також включити функцію "Додавати назву блоку до підказок", якщо нам потрібно ще більше інформації. Хоча цей параметр буде цікавим більше для бекенд розробників.

Тепер, перейдемо до коду. Я огляну кілька модифікацій, які найбільш часто використовуються при розробці шаблону, але знову ж таки це буде тільки незначний огляд всієї масивної поверхні цього питання.

Показ Рекомендованих товарів на головній сторінці
Завантаження скриптів JavaScript у футері

Давайте почнемо...

1. Показ Рекомендованих товарів на головній сторінці

Це питання є одним із найбільш поширених запитів на будь-якому сайті, адже кожен хоче показувати кілька товарів на головній сторінці свого сайту, правильно ж?

Це насправді набагато простіше, ніж ви можете собі уявити, з поєднанням XML та PHP ми можемо досягти цього в найкоротші терміни. Існує, як і в іншому в Magento, більш ніж один спосіб зробити це. Я збираюся показати вам спосіб, який на мою думку, є найпростішим методом.

По-перше, нам потрібно створити тестову категорію в адмінці, яка буде містити наші товари. Увійдіть в систему Каталог > Керування категоріями. Для цього прикладу ми створимо підкатегорію до кореневої категорії, тож ми повинні натиснути на "Кореневому каталозі", а потім клацнути на кнопку "Додати підкатегорію". Введіть назву для категорії, переконайтеся, що вибрано значення "Так" для пункту "Активно" і натисніть кнопку "Зберегти категорію".

Зверніть увагу на ID номер категорії у верхньому рядку, адже це знадобиться нам пізніше:

Тепер чудовий момент для того, щоб додати деякі товари до категорії, яку ми щойно створили. Відкрийте вкладку «Товари Категорії» і відмітьте ті товари, які потрібно показувати на головній, і не забудьте після цього натиснути кнопку "Зберегти категорію".

Далі нам потрібно створити шаблон, в якому буде виконуватись оператор перебору масивів foreach.

Для цього ми будуть використовувати шаблон із теми ядра base зі списком товарів, в якому є майже весь необхідний нам код, і нам залишиться зробити лише кілька коригувань.

app/design/frontend/base/default/catalog/product/list.phtml

Копіюємо до:

app/design/frontend/<назва_пакету>/default/catalog/product/list-home-featured.phtml

Потім ми зробимо деякі зміни в нашому файлі.

Завантаження нашої колекції товарів через ID категорії
Показувати лише один вигляд (я взяв лише вигляд товарів сіткою), але ви можете змінити це
Видалити тулбар (сортувальник товарів та нумерація сторінок), адже він вже не потрібен нам
Додати ім'я нашої категорії в заголовок

Готовий файл буде виглядати наступним чином:

<?php
/**
 * Product list template
 *
 * @see Mage_Catalog_Block_Product_List
 */
?>
<?php
    $_categoryId = 35;
    $_category = new Mage_Catalog_Model_Category();
    $_category->load($_categoryId);
    $_productCollection = $_category->getProductCollection();
    $_productCollection->addAttributeToSelect('*');
?>

<h2><?php echo $_category->getName(); ?></h2>

<?php if(!$_productCollection->count()): ?>
    <p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
    <div class="category-products">
        <ul class="products-grid">
            <?php foreach ($_productCollection as $_product): ?>
                <li class="item">
                    <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
                    </a>

                    <h2 class="product-name">
                        <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>">
                            <?php echo $_product->getName(); ?>
                        </a>
                    </h2>

                    <?php if($_product->getRatingSummary()): ?>
                        <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                    <?php endif; ?>

                    <?php echo $this->getPriceHtml($_product, true) ?>

                    <div class="actions">
                        <?php if($_product->isSaleable()): ?>
                            <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                        <?php else: ?>
                            <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                        <?php endif; ?>

                        <ul class="add-to-links">
                            <?php if ($this->helper('wishlist')->isAllow()) : ?>
                                <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                            <?php endif; ?>
                            <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                                <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                            <?php endif; ?>
                        </ul>
                    </div>
                </li>
            <?php endforeach ?>
        </ul>
    </div>
<?php endif; ?>

Не забудьте змінити значення змінної $_categoryId на свій ID категорії.

І нарешті ми повинні лише створити XML-блок, який буде завантажувати шаблон, що ми створили вище. Ми зробимо це в нашому файлі local.xml наприклад так:

<?xml version="1.0"?>
<layout version="0.1.0">
    <cms_index_index>
        <reference name="content">
            <!-- home featured products -->
            <block type="catalog/product_list" name="home.featured.products" after="-" template="catalog/product/list-home-featured.phtml" />
        </reference>
    </cms_index_index>
</layout>

Це все, що потрібно для цього, досить просто, чи не так? Нижче наведено скріншот готового виводу товарів.

2. Завантаження JavaScript у футері

По-перше, ми могли б подумати, що Magento вже має таку здатність на основі XML, коли ми додаємо наші скрипти. Такий свого роду параметр, що ми могли б передати для цього, але це хибна думка - Magento не збирається робити це таким простим для нас!

WordPress, з іншого боку, це робить чудово через wp_register_script. Може бекенд розробник і додасть таку можливість через додатковий параметр XML, але зараз нам не потрібно цим перейматись.

Є бажаючі?

Але на щастя для нас є альтернативний метод, щоб досягти цього.

Я думаю, що це питання важливо оглянути, адже це прискорить швидкість сайту, чого кожен прагне. Я, як правило, залишаю основні JavaScript файли ядра Magento так, як вони і є в секції <head>, я лише зменшую їх кількість наскільки це можливо.

Всі скрипти, що ми додаємо в шапку Magento, такі як jQuery і наші власні користувацькі функції, ми можемо завантажувати і у футері. При розробці веб-сайту, я, як правило, постійно оглядаю секцію <head> на предмет того, що модуль сторонніх розробників додає свої скрипти сюди. Невеликим зусиллям ми можемо відредагувати XML-файл стороннього модулю і вказати завантаження його скриптів у футері - на це потрібно не більше п'яти додаткових хвилин!

Нам необхідно створити XML-блок в нашому файлі local.xml у ноді макета за замовчуванням (default), наприклад так:

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="root">
            <!-- adds ability to load js in the footer -->
            <block type="page/html_head" name="footer.js" as="footer.js" template="page/html/footer-js.phtml">
                <action method="addItem"><type>skin_js</type><name>js/build/jquery.min.js</name></action>
            </block>
        </reference>
    </default>
</layout>

Зверніть увагу, що ми використовуємо той же метод додавання JavaScript файлів, як ми це робили і в попередній статті. Якщо вам потрібно освіжити пам'ять натисніть тут, в демонстраційних цілях, ми будемо додавати локальну копію jQuery.

Тепер ми можемо створити свій власний файл шаблона. Створіть новий файл в:

app/design/frontend/<назва_пакету>/default/page/html/footer-js.phtml

з наступним змістом:

1	<?php echo $this->getCssJsHtml() ?>

Нарешті, ми повинні додати один рядок коду в наші файли шаблонів перед закриттям тегу </bode>.

Наші файли шаблонів можуть бути знайдені в app/design/frontend/base/default/page/ і не забувайте скопіювати їх у свою власну тему. Є декілька файлів шаблону, на які потріно звернути увагу:

1column.phtml
2columns-left.phtml
2columns-right.phtml
3columns.phtml

Нижче наводиться приклад того, як вони повинні виглядати:

        ...
        ...
        
        <?php echo $this->getAbsoluteFooter() ?>

        <!-- adds ability to load js in the footer -->
        <?php echo $this->getChildHtml('footer.js') ?>
    </body>
</html>

Якщо ми завершимо всі ці кроки і оновимо вигляд вихідного коду нашої сторінки, то побачимо, що скрипти завантажуються перед закриттям тегу </body>.

Якщо ви вже зробили це, я вітаю вас! Існує ще багато чого, що потрібно ще оглянути, але сподіваюся, що вже з цієї статті для вас відкривається новий сенс.

Підведення підсумків!

Ця серія є тільки верхівкою айсберга, яким є дуже потужна платформа Magento, яка вміє набагато більше, ніж те, що ми оглянули. Я сподіваюся, що ця серія дала вам змогу заглянути в основу принципів Magento, і що ви зможете знайти їй хороше застосування.

Немає кращого способу дізнатися Magento, ніж просто застрягти в ній і шукати вихід, але так ви будете знати більшість досконально і в найкоротші терміни.

Як завжди, я більш ніж радий допомогти, якщо вам потрібна буде допомога. Також не забудьте звернути увагу на мій Шаблонний Magento, який має цілу купу корисного всередині.

До наступного разу.