LogoLogo
sylius.com
  • 📓Sylius 1.x Documentation
  • 📖Sylius 2.0 Documentation
    • Organization
      • Release Cycle
      • Backwards Compatibility Promise
      • Sylius Team
      • Sylius Roadmap
  • Getting Started with Sylius
    • Installation
    • Basic Configuration
    • Shipping & Payment
    • First Product
    • Customizing the Shop
    • Customizing Business Logic
    • Using API
    • Installing Plugins
    • Deployment
    • Summary
  • The Book
    • Introduction to Sylius
    • Installation
      • System Requirements
      • Sylius CE Installation
        • Sylius CE Installation with Docker
      • ➕Sylius Plus Installation
      • Upgrading Sylius CE
      • Upgrading Sylius Plus
    • Architecture
      • Architecture Overview
      • Architectural Drivers
      • Resource Layer
      • State Machine
      • Translations
      • E-Mails
      • Contact
      • Fixtures
      • Events
    • Configuration
      • Channels
      • Locales
      • Currencies
    • Customers
      • Customer & ShopUser
      • ➕Customer Pools
      • AdminUser
      • Addresses
        • Countries
        • Zones
        • Addresses
        • Address Book
    • Products
      • Products
      • Product Reviews
      • Product Associations
      • Attributes
      • Pricing
      • Catalog Promotions
      • Taxons
      • Inventory
      • ➕Multi-Source Inventory
      • Search
    • Carts & Orders
      • Orders
      • Cart flow
      • Taxation
      • Adjustments
      • Cart Promotions
      • Coupons
      • Payments
      • 🧩Invoices
      • Shipments
    • Support
    • Contributing
      • Contributing Code
        • Submitting a Patch
        • ⚠️Security Issues
        • Coding Standards
        • Conventions
        • Sylius License and Trademark
      • Key Contributors
  • The Customization Guide
    • Customizing Models
      • How to add a custom model?
    • Customizing Forms
      • How to add a live form for a custom model?
    • Customizing Templates
    • Customizing Translations
    • Customizing Flashes
    • Customizing API
    • Customizing Serialization of API
    • Customizing Payments
      • How to integrate a Payment Gateway as a Plugin?
  • Sylius Official Plugins Documentation
    • CMS Plugin
      • Getting Started
        • Installation
      • Features Overview
        • Collections
        • Content Templates
        • Pages
        • Blocks
        • Media
      • Developer Reference
        • Collections
        • Pages
        • Blocks
        • Media
        • Content Element
        • Templates
  • THE COOKBOOK v1.x
    • The Cookbook v1.x
Powered by GitBook
LogoLogo

Developer

  • Community
  • Online Course

About

  • Team

© 2024 Sylius. All Rights Reserved

On this page
  • Creating a new content element
  • Form Type
  • (Optional) Register the Form Type
  • Implement a renderer
  • Register a renderer
  • Create a Twig Template

Was this helpful?

Edit on GitHub
  1. Sylius Official Plugins Documentation
  2. CMS Plugin
  3. Developer Reference

Content Element

Creating a new content element

To add a custom content element, you’ll:

  1. Define a Form Type

  2. (Optional) Register the Form Type

  3. Implement a Renderer

  4. Register the Renderer

  5. Create a Twig Template

Form Type

Create a new form type under src/Form/Type/ContentElements location. Define your fields and remember to define public const TYPE with a unique name. For example, you can create a new form type called Text:

final class TextContentElementType extends AbstractType
{
    public const TYPE = 'text';

    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add(self::TYPE, TextType::class, [
                'label' => 'sylius_cms.ui.content_elements.type.' . self::TYPE,
            ])
        ;
    }
}

(Optional) Register the Form Type

If your form type have constructor with some arguments, define constant parameter in config/parameters.yaml or yours any other yaml file:

parameters:
    sylius_cms.content_elements.type.text: !php/const 'YourNamespace\Form\Type\ContentElements\TextContentElementType::TYPE'

If your form type doesn't have any constructor arguments, you can skip this step, because compiler pass will automatically define it for you.

If your form type have constructor with some arguments, you must define form type in service container under config/services.yml with correct tags:

services:
    sylius_cms.form.type.content_element.text:
        class: YourNamespace\Form\Type\ContentElements\TextContentElementType
        arguments: [...]
        tags:
            - { name: 'sylius_cms.content_elements.type', key: '%sylius_cms.content_elements.type.text%' }
            - { name: 'form.type' }

If your form type doesn't have any constructor arguments, you can skip this step, because compiler pass will automatically register it for you.

Implement a renderer

Create a new renderer class under src/Renderer/ContentElement location. Extend Sylius\CmsPlugin\Renderer\ContentElement\AbstractContentElement class. For example, you can create a new renderer called TextContentElementRenderer:

final class TextContentElementRenderer extends AbstractContentElement
{
    public function supports(ContentConfigurationInterface $contentConfiguration): bool
    {
        return TextContentElementType::TYPE === $contentConfiguration->getType();
    }

    public function render(ContentConfigurationInterface $contentConfiguration): string
    {
        $text = $contentConfiguration->getConfiguration()['text'];

        return $this->twig->render('@SyliusCmsPlugin/shop/content_element/index.html.twig', [
            'content_element' => $this->template,
            'text' => $text,
        ]);
    }
}

Register a renderer

Register your renderer with tag in service container under config/services.yml:

services:
    sylius_cms.renderer.content_element.text:
        class: YourNamespace\Renderer\ContentElement\TextContentElementRenderer
        arguments:
            - '@twig'
        tags:
            - { 
                name: 'sylius_cms.renderer.content_element',
                template: '@YourNamespace/Shop/ContentElement/_text.html.twig',
                form_type: 'YourNamespace\Form\Type\ContentElements\TextContentElementType'
            }

Define form_type only if your form type doesn't have constructor with additional arguments.

Create a Twig Template

Finally, create a new template under templates/bundles/SyliusCmsPlugin/Shop/ContentElement location. For example, you can create a new template called _text.html.twig:

<p>{{ text }}</p>

PreviousMediaNextTemplates

Last updated 2 days ago

Was this helpful?