Разработка темы Magento: страница продукта, часть 1

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

Страница продукта в нашем HTML-дизайне выглядит следующим образом:

Наша текущая страница продукта выглядит следующим образом:

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

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

Если вы внимательно посмотрите, общая структура раздела продукта происходит из файла \ template \ catalog \ product \ view.phtml. Я указал это через стрелку на изображении выше. Этот файл предоставляет внешнюю структуру всех компонентов, а затем внутренние части поступают из других шаблонов, но сначала мы отредактируем этот внешний.

Мы скопируем этот файл view.phtml в нашу новую тему и начнем редактировать. Текущий код этого файла выглядит так:

Теперь нам нужно проверить наш HTML-код, и мы поместим весь наш HTML-код в этот файл view.phtml, а затем начнем его редактирование. Текущий код файла details.html в нашем файле HTML-дизайна выглядит следующим образом (я только копирую код для части продукта, исключая заголовок, раздел нижнего колонтитула и т. Д.):

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

Теперь мы начнем редактировать этот HTML-код, вставив динамические теги из нашего реального файла view.phtml.

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

А затем закройте div product-view в конце файла (строка 314):

Далее мы обернем детали продукта div внутри элемента формы, как это делается в самом файле view.phtml. Итак, мы добавим эти строки в div product-details в строке 10:

Аналогично, мы теперь закроем эту form , а также скопируем этот JavaScript из view.phtml в строку 77:

На следующем шаге внутри div вкладок (начиная со строки 129) удалите весь существующий код и скопируйте следующий код вкладки из view.phtml (около 100 строк кода заменено этими несколькими строками). Чтобы убедиться, что вкладка JavaScript продолжает работать нормально, мы добавим текущую вкладку div блоком tab классов, поэтому новый код будет выглядеть так:

После всего этого теперь мы <?php echo $this->getChildHtml('related_products') ?> тег <?php echo $this->getChildHtml('related_products') ?> div горячих продуктов после удаления существующего кода, чтобы он выглядел следующим образом в строке 166:

Видите, как около 150 строк кода заменяются только этими тремя строками? Давайте сохраним все и посмотрим, как продвигается страница. Если вы все сделали правильно, это должно выглядеть примерно так:

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

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

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