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

Разработка темы Magento: домашняя страница, часть 2

by
Read Time:13 minsLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Home Page, Part 1
Magento Theme Development: Home Page, Part 3

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

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

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

Enabling Template TagsEnabling Template TagsEnabling Template Tags

Включив подсказки шаблона, мы видим, что внешний контейнер корзины заголовка исходит из этого файла: frontend/rwd/default/template/checkout/cart/minicart.phtml. Затем по клику расширенная часть отображается с помощью этого файла: frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Наконец, каждый элемент корзины отображается с помощью этого файла: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

Мы импортируем все эти файлы в нашу вновь созданную тему, а затем начнем их изменять.

Давайте начнем процесс модификации с самого внешнего файла minicart.phtml. Это текущий код этого файла:

Теперь, прежде чем мы начнем какие-либо изменения в нем, давайте проверим код нашего раздела корзины заголовка в нашем оригинальном HTML-файле. Код там выглядит так:

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

Здесь мы заменили крайнюю обертку верхней корзины, но теперь нам нужно отредактировать обертку раскрывающегося раздела. Как мы уже видели, эта оболочка происходит из frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Давайте проверим фрагмент этого файла:

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

Теперь последняя оставшаяся часть - это стилизация самого элемента списка корзины. Как мы уже выяснили, файл, отвечающий за эту часть: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

Код этого файла выглядит довольно длинным и трудным для понимания, но не пугайтесь. Нам не нужно редактировать все это, потому что основная часть кода - это расчет правильной цены и других вариантов продукта. Опять же, мы проверим наш HTML-код, поместим его в этот файл и начнем заменять статический текст динамическими значениями. Это код для каждого элемента корзины в нашем HTML:

Мы заменим тег img следующим:

Далее мы заменим имя на динамический код:

Чтобы отобразить параметры продукта, мы будем использовать этот динамический код:

Затем мы определим и покажем количество, используя этот код:

Для расчета цены мы введем этот код вместо статической цены:

И в качестве последнего шага мы заменим href для удаления URL следующим:

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

Итак, окончательный код нашего файла default.phtml выглядит так:

Теперь, если вы сохраните все эти файлы и перезагрузите домашнюю страницу, вы должны увидеть что-то вроде этого:

Top Cart FixedTop Cart FixedTop Cart Fixed

У нас есть некоторые проблемы со стилями, но рендеринг HTML довольно близок к нашему необходимому дизайну HTML. Теперь, когда мы завершили верхний раздел заголовка, следующий раздел - логотип. К счастью, в этом нет ничего особенного, кроме стилизации (чтобы выровнять логотип по центру), которую мы сделаем в статье о стилизации. Наши пункты меню также кажутся довольно близкими к тому, что мы ожидаем, поэтому нам просто нужно изменить строку поиска и основной слайдер.

Чтобы изменить нашу панель поиска, давайте включим подсказки шаблона и посмотрим, какая часть отвечает за отображение этого кода: frontend/rwd/default/template/catalogsearch/form.mini.phtml.

В настоящее время этот файл выглядит так:

Итак, мы будем использовать внешние элементы HTML и заменять внутреннее содержимое динамическим содержимым. Наш новый файл form.mini.phtml будет выглядеть так:

В последней части этой статьи мы отредактируем основной слайдер. Для этого мы создадим новый статический блок, перейдя в CMS > Static Blocks > Add New Block. Мы назовем этот блок "Слайдер домашней страницы", и мы добавим идентификатор как "домашний слайдер" - так код сможет найти этот блок.

Creating Homepage Slider Static BlockCreating Homepage Slider Static BlockCreating Homepage Slider Static Block

Теперь мы введем код слайдера из нашего HTML.

Обратите внимание, что мы заменили источник изображения относительно каталога скина с помощью тега skin_url следующим образом:

Теперь мы добавим эти строки в файл header.phtml, который мы создали в прошлой статье, чуть выше последней строки <?php echo $this->getChildHtml('topContainer'); ?>.

Последний шаг - удалить текущий слайдер. Для этого перейдите на CMS-Pages> Madison Island и из раздела Content удалите весь код до начала раздела style.

Removing previous Home SliderRemoving previous Home SliderRemoving previous Home Slider

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

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.