Перейти к основному содержимому

Создание первого проекта

В этом разделе вы узнаете основы Pimcore, необходимые для начала разработки.

Создание CMS-страниц с использованием Documents

В первой части вы познакомитесь с основами создания CMS‑страниц с помощью Pimcore Documents.

Создание шаблона, макета и контроллера​

Новый контроллер​

Прежде всего, нам нужен контроллер. Назовём его ContentController.php. Файл нужно поместить в каталог /src/Controller.

<?php  
  
namespace App\Controller;  
  
use Pimcore\Controller\FrontendController;  
use Symfony\Bridge\Twig\Attribute\Template;  
use Symfony\Component\HttpFoundation\Request;  
  
class ContentController extends FrontendController  
{  
    #[Template('content/default.html.twig')]  
    public function defaultAction(Request $request): array  
    {  
        return [];  
    }  
}

На данный момент у нас есть только один экшен под названием defaultAction(). мы можем поместить какой‑то собственный код или присвоить значения шаблону. В этом примере нам не нужен какой‑либо пользовательский код в контроллере, поэтому действие пока остаётся пустым.

Создание шаблона​

Теперь создадим шаблон для нашей страницы:

  • Создайте новую папку в /templates и назовите её как контроллер (используя формат snake_case) (в случае с content).
  • Поместите в эту папку новый Twig‑шаблон и назовите его как наше действие (используя формат snake_case) (default.html.twig).

Затем можно поместить в шаблон какой‑нибудь код шаблона, например:

{% extends 'layout.html.twig' %}  
  
{% block content %}  
    <h1>{{ pimcore_input("headline", {"width": 540}) }}</h1>  
  
    {% for i in pimcore_iterate_block(pimcore_block('contentblock')) %}  
        <h2>{{ pimcore_input('subline') }}</h2>  
        {{ pimcore_wysiwyg('content') }}  
    {% endfor %}  
{% endblock %}

По умолчанию Pimcore использует движок Twig Symfony, поэтому у вас полный набор возможностей Symfony шаблонов. Кроме того, есть Pimcore‑специфичные расширения, так называемые editables, которые добавляют редактируемые части (placeholder) в layout и некоторые вспомогательные шаблонные функции.

Для подробностей по editables (например pimcore_input, pimcore_block, ...) смотрите раздел editables.

Добавление макета (layout)​

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

{% extends 'layout.html.twig' %}

Мы указываем движку, что хотим использовать макет layout.html.twig.

Создайте новый Twig‑шаблон в папке /templates и назовите его layout.html.twig. Затем мы также можем добавить в него немного HTML-кода и шаблонного кода:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    &lt;meta charset="UTF-8"&gt;  
    <title>Example</title>  
    <style>  
        body {  
            padding: 0;  
            margin: 0;  
            font-family: "Lucida Sans Unicode", Arial;  
            font-size: 14px;  
        }  
      
        #site {  
            margin: 0 auto;  
            width: 600px;  
            padding: 30px 0 0 0;  
            color: #65615E;  
        }  
      
        h1, h2, h3 {  
            font-size: 18px;  
            padding: 0 0 5px 0;  
            border-bottom: 1px solid #001428;  
            margin-bottom: 5px;  
        }  
      
        h3 {  
            font-size: 14px;  
            padding: 15px 0 5px 0;  
            margin-bottom: 5px;  
            border-color: #cccccc;  
        }  
      
        img {  
            border: 0;  
        }  
      
        p {  
            padding: 0 0 5px 0;  
        }  
      
        a {  
            color: #000;  
        }  
      
        #logo {  
            text-align: center;  
            padding: 50px 0;  
        }  
      
        #logo hr {  
            display: block;  
            height: 1px;  
            overflow: hidden;  
            background: #BBB;  
            border: 0;  
            padding: 0;  
            margin: 30px 0 20px 0;  
        }  
      
        .claim {  
            text-transform: uppercase;  
            color: #BBB;  
        }  
      
        #site ul {  
            padding: 10px 0 10px 20px;  
            list-style: circle;  
        }  
      
        .buttons {  
            margin-bottom: 100px;  
            text-align: center;  
        }  
      
        .buttons a {  
            display: inline-block;  
            background: #6428b4;  
            color: #fff;  
            padding: 5px 10px;  
            margin-right: 10px;  
            width: 40%;  
            border-radius: 2px;  
            text-decoration: none;  
        }  
      
        .buttons a:hover {  
            background: #1C8BC1;  
        }  
      
        .buttons a:last-child {  
            margin: 0;  
        }  
      
    </style>  
</head>  
<body>  
    <div id="site">  
        <div id="logo">  
            <a href="http://www.pimcore.com/"><img src="/bundles/pimcoreadmin/img/logo-claim-gray.svg"  
                                                   style="width: 400px;"/></a>  
            <hr/>  
        </div>  
        {{ block('content') }}  
    </div>  
</body>  
</html>

Код {{ block('content') }} — это placeholder, куда будет вставлено содержимое страницы.

Сведение всего этого воедино с помощью Pimcore Documents​

Теперь нужно подключить действие к странице в бекенде Pimcore, чтобы страница знала, какое действие (и шаблон) нужно выполнить. Сначала щелкните правой кнопкой мыши на Home в панели Documents и выберите Add Page > Blank, чтобы добавить новую страницу.

Создать страницу

Выберите вкладку Settings во вновь открывшейся вкладке. Выберите Controller::Action и шаблон, если он отличается от схемы именования контроллера/экшена.

Настройки страницы

Вы можете протестировать новый контроллер и действие после сохранения документа (нажмите Save & Publish). Перейдите на вкладку Edit, чтобы увидеть страницу с доступными редактируемыми placeholder'ами.

Предварительный просмотр страницы

Введение в ассеты

В разделе Assets хранятся все бинарные файлы: изображения, видео, офисные файлы, PDF и т. п. Их можно загружать, хранить и управлять ими. Вы можете организовать их в структуру папок и назначать дополнительные метаданные. Один и тот же ассет можно использовать и ссылаться на него в нескольких местах — например, в документах или объектах.

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

Для этого туториала добавьте хотя бы один файл, который вы будете использовать в объекте позже.

Способы загрузки файлов:

  1. Перетащите файлы из файлового проводника в браузер в нужную папку ассетов
  2. Кликните правой кнопкой на Home и выберите подходящий метод загрузки

Загрузка ассета

Введение в объекты

Мы уже создали контроллер, действие и представление, так что можем добавлять текст из админ-панели на страницы. В этой главе мы создадим простую базу данных продуктов и будем использовать её на CMS‑страницах. Объекты используются для хранения любой структурированной информации независимо от канала вывода и могут быть использованы везде в проекте.

Создание модели/определения класса​

Перейдите: Settings -> Object -> Classes и нажмите на кнопку Add Class.

Добавление класса product

Так вы создадите новый класс/модель product — представление сущности, включая схему в базе данных и сгенерированный PHP класс, который можно использовать для создания, обновления, списка и удаления сущностей.

Более подробную информацию можно найти в разделе объектов

Класс product должен иметь следующие атрибуты: SKU, picture, name и description. Шаги для добавления полей:

  • Перейдите на страницу редактирования класса product
  • Кликните правой кнопкой на Base и выберите Add Layout Component -> Panel - это основная панель/контейнер для атрибутов продукта
  • Чтобы добавить атрибуты:
    • Кликните правой кнопкой на Panel, затем Add data component -> Text -> Input, затем поменяйте имя компонента на sku (на панели редактирования с правой стороны)
    • Аналогично добавьте поле name
    • добавьте текстовый компонент WYSIWYG для description. Правый клик, выберите Add data component -> Text -> WYSIWYG. Поменяйте имя на description.
    • Для картинки используйте компонент Other -> Image. Назовите атрибут picture.

Если всё сделано правильно, новый класс будет выглядеть как на изображении:

Класс product

Важно: каждый сгенерированный класс в админ‑панели Pimcore имеет связанный PHP‑класс с геттерами и сеттерами. Файловое представление PHP‑класса для нашего класса можно найти в var/classes/DataObject/Product.php

Добавление нового объекта​

Мы подготовили класс для продуктов. Теперь можно создавать объекты:

  • Откройте секцию Objects в левой панели и нажмите правую кнопку рядом с Home (можно также создавать структуру директорий).
  • Выберите Add object -> product и укажите имя, например: tshirt
  • Заполните поля sku, name и description.
  • Нажмите Save & Publish

Вероятно, это выглядит так, как показано ниже:

Новый product

Последним шагом добавьте фото.

Можно использовать кнопку загрузки (кнопка загрузки) или перетащить файл из раздела Assets.

Нажмите кнопку Save & Publish.

Готово.

Готовый product

Собираем всё вместе

Давайте сложим все воедино и подключим продукты к CMS.

Обновление контроллера и шаблона​

Добавим ещё одно действие productAction в контроллер ContentController:

<?php  
  
namespace App\Controller;  
  
use Pimcore\Controller\FrontendController;  
use Symfony\Bridge\Twig\Attribute\Template;  
use Symfony\Component\HttpFoundation\Request;  
use Symfony\Component\HttpFoundation\Response;  
  
class ContentController extends FrontendController  
{  
    #[Template('content/default.html.twig')]  
    public function defaultAction (Request $request): array  
    {  
        return [];  
    }  
      
    public function productAction(Request $request): Response  
    {  
        return $this->render('content/product.html.twig');  
    }  
}

Затем нам также понадобится новый шаблон для нашего действия с продуктом: templates/content/product.html.twig

{% extends 'layout.html.twig' %}  
  
{% block content %}  
    <h1>{{ pimcore_input("headline", {"width": 540}) }}</h1>  
  
    <div class="product-info">  
        {% if editmode %}  
            {{ pimcore_relation("product") }}  
        {% else %}  
            <!-- Product information-->  
        {% endif %}  
    </div>  
{% endblock %}

{{ editmode }} — стандартная переменная (всегда установлена), которая проверяет, вызвано ли представление из админки Pimcore. Это даёт возможность выполнять одно поведение в режиме редактирования и другое на фронтенде.

{{ pimcore_relation("product") }} — один из доступных заполнителей редактируемых элементов. Он используется для создания 1 к 1связей. Интересная альтернатива — editable типа Renderlet. Нажмите здесь, чтобы ознакомиться с полным списком доступных редактируемых элементов в Pimcore.

Добавить объект Product в документ​

Последний шаг — показать продукт в теле созданного документа.

Давайте вернемся к разделу документов. Кликните правой кнопкой на Home и выберите Add Page > Empty Page. В настройках (Settings) выберите action product и контроллер Content, сохраните и перейдите на вкладку Edit.

Вы увидите новый editable элемент (relation), который мы добавили в шаблоне product выше. Перетащите объект product в этот editable и нажмите Save & Publish.

Перетаскивание в документ

Посмотрим результат на фронтенде...

Откройте страницу продукта, например: http://pimcore.local/tshirt где tshirt - это идентификатор товара (название отображается в дереве документов).

Пока мы не реализовали вывод данных продукта во фронтенде, страница не содержит информации о продукте.

Добавьте несколько строк в шаблон (templates/content/product.html.twig):

{% extends 'layout.html.twig' %}  
{% block content %}  
    <h1>{{ pimcore_input("headline", {"width": 540}) }}</h1>  
  
    <div class="product-info">  
        {% if editmode %}  
            {{ pimcore_relation("product") }}  
        {% else %}  
            {% set product = pimcore_relation("product").element %}   
            {% if product %}   
                <h2>{{ product.name }}</h2>  
                <div class="content">  
                    {{ product.description|raw }}  
                </div>  
            {% endif %}  
        {% endif %}  
    </div>  
{% endblock %}

Теперь вы можете получить связанный объект, используя метод getElement(). Таким образом вы получаете доступ ко всем данным связанного объекта (name, description, ...).

Добавление конфигурации миниатюр​

Чтобы показать изображение продукта в представлении, сначала добавьте конфигурацию thumbnail. С помощью thumbnail конфигураций Pimcore автоматически рендерит оптимизированные изображения для определённых каналов вывода (включая высокое разрешение @2x).

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

Показ изображения в представлении​

И, наконец, выведите изображение продукта:

<div class="content">  
    {% if product.picture %}  
        {{ product.picture.thumbnail("content").html|raw }}  
    {% endif %}  
  
    {{ product.description|raw }}  
</div>

Класс Image предоставляет полезные атрибуты и методы. Метод thumbnail.html возвращает тег <img> или <picture> (если в конфигурации используются медиа‑запросы) с корректным путём к изображению и автоматически устанавливает атрибут alt на основе метаданных ассета.

Теперь страница продукта должна выглядеть так:

Окончательная страница продукта

Вы можете предложить улучшение документации или задать вопрос в комментариях.
Если вам нужна полноценная консультация — вы можете заказать её на нашем сайте.