Розробка теми для magento макет

У цій статті ми розглянемо основи макета XML для Magento, введемо деякі зміни в local.xml. Він відповідає за додавання та видалення скриптів, блоків і зміна макета.

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

Файли шаблону розподіляються за двома папок:

  • Розмітка: app / design / frontend /// Layout /
  • Шаблони: app / design / frontend /// Template /

Сьогодні ми розглянемо все, що стосується файлів розмітки.

Перш ніж ми почнемо, нам потрібно зробити одну важливу річ, яка дозволить відключити кеш Magento. Цей крок дозволить нам миттєво переглядати всі зміни, замість того, щоб очищати кеш кожен раз, після будь-яких змін. В ідеалі, цей параметр має бути відключена під час розробки. Вирушаємо в адмінку, system> cache management і відключаємо всі опції.

Тепер можемо спокійно переходити до подальших дій.

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

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

Отже, як же дізнатися який файл потрібно редагувати?

Умовні позначення назв файлів полегшують пошук того файлу, який нам потрібен. Наприклад, модулю Magento app / code / core / Mage / Page / відповідає власний XML файл з назвою app / design / frontend / base / default / layout / page.xml. Як ви могли помітити, тут все і починає прояснюватися. Після того як ви ознайомилися і зробили кілька магазинів, ви незабаром помітите деякі закономірності і повторення в файлах які необхідно відредагувати.

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

Шлях до файлу конфігурації: app / code / local ///etc/config.xml

Зверніть увагу, що беру за основу base / default. Якщо вам потрібно внести зміни завжди копіюйте файли з даного каталогу в свою. власну папку package / theme. Ніколи не редагуйте самі файли в base / default.

Для редагування цього файлу потрібно вже володіти якимось початковим досвідом розробки тем. Оскільки ця серія уроків розрахована на початківців, ми зупинимося на питанні особливостей файлу local.xml. і на тому, як він пов'язаний з розробкою тем.

Для чого потрібен local.xml?

Простими словами в даному файлі будуть розташовані спеціальні настройки для нашої теми. Мені здається, що це відмінний спосіб внесення невеликих змін в, таких як додавання / видалення блоків, зміни макета. Це не місце, де ви повністю розробляєте макет вашої сторінки, продукту або чогось ще. Для цього варто скористатися окремим файлом catalog.xml.

Отже, як же все налаштувати.

Створюємо файл local.xml всередині нашої папки розмітки теми app / design / frontend //default/layout/local.xml і додаємо базову структуру XML:

Тепер, коли у нас є готовий файл, я покажу вам кілька поширених фішок.

1. Додавання / видалення скриптів і таблиць стилів

Для приєднання файлу нам потрібно вирішити яким він буде: глобальним (підключений до всіх сторінок магазину) або просто прикріплений до однієї сторінки.

Я представлю два маркера розмітки: і . Звичайно, є ще ціла безліч доступних для нас маркерів, але зараз давайте зосередимося тільки на цих двох.

маркер є глобальним, а торкнеться тільки головну сторінку.

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

  1. Методи, в яких ми хочемо вчинити дії;
  2. Тип файлу, і його положення в загальній ієрархії;
  3. Назва, шлях до файлу.

Типи підключаються файлів:

  • skin_js: skin / frontend // Default /
  • skin_css: skin / frontend // Default /
  • js: js /

Зверніть увагу, що завантажуючи файл із зовнішнього джерела, наприклад CDN, ви повинні використовувати дещо інший синтаксис. Також важливо включити в кінець скрипта jQuery.noConflict ().

2. Видалення блоків

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

Також існує метод unsetChild. який видалить блок тільки в межах певного шаблону.

3. Виправлення шаблону

Тепер давайте розглянемо процес додавання додаткового структурного блоку на домашню сторінку. Ми посилаємося на блок контенту і використовуємо атрибут after. щоб уточнити, що даний блок повинен бути розташований в кінці контенту.

4. Вставка статичного CMS блоку

Нарешті, ми розглянемо приклад додавання статичного CMS блоку, але щоб почати з ним працювати спочатку ви повинні його створити.

Усередині block_id вказуємо ідентифікатор блоку.

подальші керівництва

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

Що далі?

У наступній статті ми розглянемо роботу з файлами шаблонів.

Коли мова йде про безпеку веб-сайту, то фраза "фільтруйте все, екрануйте все" завжди буде актуальна. Сьогодні поговоримо про фільтрації даних.

  • Expressive 2 підтримує можливість підключення інших ZF компонент за спеціальною схемою. Не всім подобається це рішення. У цій статті ми розповімо як поліпшили процес підключення декількох модулів.

  • Припустимо, що вам необхідно відправити якусь інформацію в Google Analytics з серверного скрипта. Як це зробити. Відповідь в цій замітці.

  • Підбірка з декількох видів PHP пісочниць. На деяких ви в режимі online зможете потестить свій код, але є так само рішення, які можна впровадити на свій сайт.

    Розробка теми для magento макет

    За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

    Розробка теми для magento макет

    Розробка теми для magento макет

    Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

    Розробка теми для magento макет

    Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

    Розробка теми для magento макет

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

    Схожі статті