Frontend Overview

Frontend Overview

Description

In this episode, learners are introduced to Sylius’s frontend architecture — a modern and flexible foundation for building fully customizable e-commerce stores. The platform combines proven technologies and developer-friendly tools to deliver elegant and functional interfaces.

We walk through:

how the Twig templating engine enables reusable, extendable views with logic and inheritance,
how Semantic UI provides a consistent styling system, and how it can be replaced with frameworks like Tailwind CSS or Bootstrap,
how jQuery powers interactive elements such as modals, dropdowns, and AJAX cart updates, and how it can be extended using Vue or React,
how Webpack Encore manages frontend assets (JS, CSS, images, fonts) with ease and flexibility.

By the end, developers will have a clear understanding of how to work with and extend Sylius’s frontend layer — from quick styling to advanced interactive features.

About This Course

Introduction to Sylius Academy. Learn Sylius architecture, testing, extensions, and plugins. Hands-on lessons with a GitHub repo prepare you for certification.

Discover Sylius – a flexible, headless eCommerce framework built on Symfony. Learn how it differs from traditional platforms, its editions, and the business challenges it solves.

Installation Overview

Set up your Sylius development environment. Learn system requirements and two installation methods: traditional and Docker-based, to quickly launch a ready-to-code application.

Traditional Installation

Traditional Sylius installation – full control over your environment. Learn to check compatibility, configure the database, and run the application locally.

Docker Installation

Sylius installation with Docker – quick, hassle-free setup without manual dependency configuration. Learn to use Makefile, install components, and launch the application.

Resource Bundle Overview

Discover Sylius Resource Bundle – a tool that automates CRUD operations and removes repetitive code. Full resource support with just a few lines of configuration.

How To Create Custom Resource

Create a custom resource in Sylius with the Brand example. Register the entity in the Resource Bundle to get CRUD (controller/form/repository/factory), run DB migrations, and verify logic with a simple CLI.

How To Customize Existing Resource

Learn how to extend an existing Sylius resource by adding a Brand relation to a product. Discover model overriding, resource debugging, and testing logic without a frontend.

Resource Controller

Discover the Sylius Resource Controller – the default CRUD handling in the admin panel. Learn to configure routes, templates, and use automatic form rendering.

How To Create Custom Form

Learn how to create a custom form in Sylius, e.g., with a dropdown based on constants. Using Brand as an example, you’ll add fields, build a FormType, and integrate it with the admin panel.

How To Customize Existing Form

Learn how to extend an existing Sylius form by adding a Brand field to the product form. Discover resource debugging, creating TypeExtension, and modifying admin templates.

How To Create Custom Repository

Learn to create a custom repository in Sylius, e.g., to filter enabled brands in the product form. Add an enabled field, build createEnabledQueryBuilder, and integrate it with the form.

How To Customize Existing Repository

Learn how to customize an existing Sylius repository to return only products with a brand. Create a route, Twig template, and add a link to the shop navigation menu.

How To Customize Factory

Learn how to customize a Sylius factory to automatically set the creation date for Brand entities. Implement FactoryInterface, decorate the default factory, and override createNew().

How To Customize Controller

Learn to customize a Sylius controller to add dynamic data, e.g., product ratings from an API. Override the show() method, pass data to a Twig view, and configure the controller in sylius.yaml.

Resource controller events

Discover Sylius Resource Controller events to react to CRUD actions without modifying the controller. Learn to listen to events like sylius.brand.pre_update and implement business logic.

Resource controller in Twig

Learn to use Sylius resource controllers directly in Twig to build dynamic frontend components. Using a brand menu example, you’ll create a view, route, and repository logic.

Grid Bundle Overview

Discover Sylius Grid Bundle – a tool for managing resource lists in the admin panel. Learn to add pagination, filtering, sorting, and actions without writing controllers.

How To Create Custom Grid

Create a custom admin grid in Sylius for the Brand entity. Configure fields, filtering, sorting, and actions (including bulk delete) – all without writing controllers.

How To Add Admin Menu Item

Add a new “Brands” item to the Sylius admin menu under the Catalog section. Use the sylius.menu.admin.main event to hook into menu rendering and link to the brand grid.

How To Customize Existing Grid

Learn to customize an existing Sylius grid by adding a brand filter to products, reordering columns, and removing unused fields – all without modifying vendor code.

How To Create Custom Action

Create a custom Sylius admin grid action – a “Show products” button in the brand grid linking to a brand’s product list. Add a Twig template, configuration, and dynamic parameters.

How To Create Custom Field

Add a custom field to the Sylius admin grid – a dynamic counter of products assigned to a brand. Implement FieldTypeInterface, register the service, and configure the field in YAML.

Translations Overview

Learn Sylius localization and translation – from multi-language URLs to managing UI and content translations. Discover how the fallback mechanism ensures smooth multilingual support.

How to handle static translations

Learn to manage static translations in Sylius – from YAML files to sylius.ui.* keys used in grids, forms, menus, and Twig views.

How to create translatable resource

Learn to make specific entity fields translatable in Sylius – using the brand description as an example. Create a BrandTranslation class and integrate it with forms and views.

State Machine Overview

Learn the basics of the Sylius State Machine – managing object lifecycles. Discover states, transitions, guards, and callbacks through examples from orders and payments.

How to create custom state machine

Create a custom state machine for the Brand resource in Sylius, modeling an approval workflow. Define states and transitions, add grid action buttons, and use Symfony Workflow.

How to customize existing state machine

Enhance the default Sylius shipment state machine by adding preparation and waiting-for-pickup states. Configure Symfony Workflow and integrate logic with an event listener.

Channels Overview

Discover sales channels in Sylius – from configuring currencies, languages, and shipping methods to managing multiple stores in one instance. Perfect for omnichannel strategies.

How to make channel aware resource

Make the Brand resource channel-aware in Sylius. Add a relation to channels, update the admin form, and filter brand visibility based on the active channel.

Images overview

Short description

How To Make Images Aware Resource

In this episode, you’ll learn how to add image support to a custom Sylius resource by making it image-aware using the Brand entity as an example. You'll implement image entities, configure forms and Doctrine relations, and integrate Sylius's upload and filtering mechanisms.

Emails Overview

Discover Sylius’s email system based on Symfony Mailer. Learn about Twig templates, testing with MailHog/Mailtrap, and MAILER_DSN configuration.

How to send custom email

Learn to send a custom email in Sylius when a brand is rejected. Create a Twig template, register the type in sylius_mailer, add translations, and notify admins.

How to customize existing email

Learn how to customize existing Sylius emails – from disabling shipment confirmation to personalizing order confirmation with product recommendations.

Taxons Overview

Discover taxons in Sylius – a flexible product category system. Learn to create, nest, and reorder taxons, and understand main taxon, breadcrumbs, and independent trees per channel.

Learn to import taxons in Sylius from a CSV file, creating multilingual category trees per channel. Use DTOs, providers, slug generation, and a console command.

Attributes And Options Overview

Learn the difference between product attributes and options in Sylius. Understand when to use options for variants and attributes for product details, with multilingual and channel support.

Option importer

Learn to import product options in Sylius from a CSV file using DTOs, providers, and multilingual translations. Run imports via CLI and build scalable import solutions.

Attribute importer

Learn to import product attributes into Sylius from a JSON file, handling complex types like select with multilingual values. Use DTOs, Serializer, and AttributeTypesRegistry.

Money And Currencies Overview

Learn money and multi-currency handling in Sylius – from storing prices as integers to configuring exchange rates, and assigning prices per variant and sales channel.

Zones And Taxes Overview

Discover zones and taxes in Sylius – from defining geographic zones and tax categories to dynamically applying rates based on customer location.

Products Overview

Learn product types and variants in Sylius – from differences between simple and configurable products to pricing, taxes, stock management, and product associations.

How to add Product menu tab

Add a new “Brand” tab to the Sylius product edit view in the admin panel. Use Twig, an event subscriber, and translations to move the brand field to a separate form section.

Product importer

Build a Sylius product importer handling taxons, channels, translations, images, and variants with pricing and stock. Use DTOs, Serializer, and dedicated assigners.

Product importer part 2

Complete your Sylius product importer by adding channel-specific pricing, option values, and translations. Use assigners, providers, and SRP-based logic for full import automation.

Cart Promotions Overview

Discover Sylius cart promotions – from rules defining conditions to actions like percentage discounts or free shipping. Examples include seasonal sales, cart thresholds, and coupon-based offers.

How to create cart promotion rule

Create a custom cart promotion rule in Sylius, e.g., for a specific brand or collection. Extend the promotion engine, add admin panel support, and build reusable conditions for future campaigns.

How to create cart promotion action

Create a custom cart promotion action in Sylius to set a fixed product price regardless of its original value. Support multiple channels and currencies while following Sylius architecture.

How to create cart promotion filter

Learn to create custom cart promotion filters in Sylius to limit actions to specific products – e.g., by brand, category, or price range. Explore CompositePromotionFilter for combined rules.

Catalog Promotions Overview

Discover catalog promotions in Sylius – discounts visible on product lists and detail pages. Learn to define scopes, set actions, manage priorities, and run asynchronously for large catalogs.

How to create catalog promotion scope

Create a custom catalog promotion scope in Sylius to limit discounts to products from a selected brand. Add an admin selector, build an eligibility checker, and integrate with templates.

How to create catalog promotion action

Create a custom catalog promotion action in Sylius to set a fixed price for selected products, regardless of original pricing. Add a multi-channel form, price calculator, and UI integration.

Shipments Overview

Learn the Sylius shipping system – from defining delivery methods and assigning them to zones and channels to using flat-rate/per-unit calculators and shipping categories.

Payments Overview

Discover the Sylius payment process – from configuring methods in the admin panel to integrating with PayPal and Stripe via Payum. Learn about the payment state machine and handling multiple payments per order.

Explore the Sylius user model – customer, shop user, and admin. Learn to create accounts, assign roles, match customers by email, and use customer groups for promotions.

Orders Overview

Learn the full Sylius order lifecycle – from cart to fulfillment and refunds. Explore the checkout state machine, payments, shipments, guest order linking, and customer impersonation.

Explore Sylius API built on API Platform – from Shop API and Admin API to Swagger docs. Learn to adapt endpoints for monolithic, headless, or hybrid architectures.

How to expose custom resource

Learn to expose a custom resource (e.g., Brand) in Sylius API, creating separate shop and admin endpoints. Configure serialization groups, filtering, CRUD, and a custom PATCH for state changes.

How to customize existing endpoint

Learn to customize an existing Sylius API endpoint, e.g., /shop/products, by adding data like the product’s brand name. Explore serialization groups, path overrides, and full JSON structure control.

Validation Overview

Learn the basics of data validation in Sylius built on Symfony – from front-end vs back-end validation to using the Validator component, YAML/XML config, and custom validation classes.

How to add custom validation

Learn to add custom validation in Sylius for the Brand entity using XML files. Configure multilingual messages, validation groups, UniqueEntity, and custom constraints based on brand type.

How to customize existing validation

Learn to customize existing validation in Sylius – e.g., require a brand for each product, change minimum customer group name length, or use custom validation groups in the API.

Fixtures Overview

Learn the Sylius fixtures system – test data for populating the database with products, users, or taxons. Define them in YAML/PHP, use Faker, and run via sylius:fixtures:load.

How to create custom Fixtures

Learn to create custom fixtures in Sylius using the Brand entity as an example. Build a fixture class and data factory with Faker, add configuration, and enable loading specific fixture sets.

How to customize existing Fixtures

Learn to customize the default Sylius product fixture so every generated product has a brand. Extend the fixture class, update the product factory, and add a “brand” option to configuration.

Frontend Overview

Explore Sylius’s frontend architecture – Twig for views, Semantic UI for styles, jQuery for interactivity, and Webpack Encore for asset management. Learn how to extend or replace them.

Learn to customize the Sylius frontend using Twig templates – from locating and overriding views to using UI events, context providers, and Sylius global variables.

How to create a theme

Learn to create a custom theme in Sylius to personalize templates, assets, and translations per sales channel. Explore theme structure, channel assignment, and the layering mechanism.

Testing Overview

Learn the basics of testing in Sylius and the test pyramid model. Explore PHPUnit for unit, integration, and API tests, and Behat for BDD to align business requirements with implementation.

Learn testing in Sylius with PHPUnit – unit, integration, and API tests. Configure the environment, write tests with mocks, load fixtures, and validate API responses against JSON patterns.

Write Behat functional tests in Sylius: from Gherkin .feature scenarios to step implementation. Learn Contexts, Transformers, Page Objects, debugging missing steps, and best practices.

Plugins Overview

Learn the basics of working with Sylius plugins – their types, uses, and benefits. Understand when to use a plugin and when to implement the logic directly in the project.

How to create a plugin

Learn to create an independent, reusable Sylius plugin using the Brand entity as an example. Use the Plugin Skeleton, move logic, configure resources, forms, validation, grids, and translations.

Sylius 1.14 Overview

Discover Sylius 1.14 – the final 1.x release and LTS version. Learn differences from 1.13, deprecations for 2.0, and how to prepare your project, plugins, and dependencies for a safe upgrade.

How to upgrade project to 1.14

Go through upgrading a project from Sylius 1.13 to the stable LTS 1.14. Learn to update dependencies, adjust services and events, validate plugins, and perform post-upgrade testing.

How to upgrade plugin to 1.14

Learn to upgrade your custom plugin to Sylius 1.14. Review UPGRADE-1.14.md changes, check compatibility, update dependencies, test functionality, and keep the test application aligned with the Plugin Skeleton.

Sylius 2.0 Overview

Sylius 2.0 overview: requirements (PHP 8.2+, Symfony 7, Bootstrap 5), new frontend (Stimulus, Twig Components, no jQuery), API Platform 4 and Payment Requests. How to prepare migration from 1.14.

How to upgrade project to 2.0

Migrate a project from Sylius 1.14 to 2.0 using the Brand feature as an example. Prepare the environment, update dependencies, refactor templates, configure API Platform 4, and manage migrations and fixtures.

How to upgrade plugin to 2.0

Upgrade your custom plugin from 1.14 to 2.0 step by step. Update dependencies and config, migrate templates, routing, grids and forms, align with API, Bootstrap/Twig Hooks, and the environment (PHP 8.2, Node 20+).