Skip to main content

Twig Basics

What is the Twig Template Engine?​

Twig is a modern, secure, and flexible template engine for PHP. All themes in the serB2B system are developed using Twig.

Core Features of Twig​

  • Secure: Protection against XSS attacks with automatic HTML escaping
  • Fast: Templates are compiled to PHP code and cached
  • Flexible: Extensible with custom functions, filters, and tags
  • Readable: Clean and understandable syntax

Basic Twig Syntax​

{# Comment line #}

{{ variable }}                  {# Variable output #}
{{ 'text' | filter }}           {# Filter usage #}
{{ function() }}                {# Function call #}

{% if condition %}              {# Control structure #}
  Content
{% endif %}

{% for item in items %}         {# Loop #}
  {{ item }}
{% endfor %}

{% include 'file.twig' %}       {# File inclusion #}
{{ include('file.twig') }}      {# Inclusion via function #}

{% set variable = 'value' %}    {# Variable declaration #}

serB2B Theme System​

Themes in serB2B are modular and customizable. Each theme includes the following components:

Theme Directory Structure​

public/templates/
├── basic/                    # Default theme
│   ├── config.json          # Theme configuration
│   ├── assets/              # CSS, JS, images
│   │   ├── src/            # Source files
│   │   └── build/          # Compiled files
│   └── views/              # Twig template files
│       ├── layouts/        # Main page structures
│       ├── widgets/        # Reusable components
│       └── ...            # Other templates
├── modern/                  # Custom theme example
└── custom/                  # Another custom theme

Theme Features​

  • Multiple Theme Support: More than one theme can exist in the same system
  • Configuration File: Customization via each theme's config.json file
  • Widget System: Modular and reusable components
  • Responsive Design: Optimized for mobile and desktop
  • Webpack Integration: Modern asset management

Basic Theme​

The basic theme serves as the foundation for all new themes. It includes:

  • 5 different header styles (standard, ella, fox, helen, mobile)
  • Modular widget system (sliders, product cards, category grids)
  • E-commerce templates (product list, detail, cart, checkout)
  • User management (login, register, profile editing)
  • SEO optimization (Open Graph, meta tags)

Fundamental Twig Constructs​

Variables​

{{ variable }}                   {# Simple variable #}
{{ object.property }}            {# Object property #}
{{ array['key'] }}               {# Array element #}
{{ array[0] }}                   {# Access by index #}
{{ object.method() }}            {# Method call #}

Filters​

{{ 'text' | upper }}             {# UPPERCASE #}
{{ 'text' | lower }}             {# lowercase #}
{{ 'text' | capitalize }}        {# First Letter Uppercase #}
{{ '<p>HTML</p>' | raw }}        {# Render as HTML #}
{{ null | default('default') }}  {# Default value #}
{{ date | date('d.m.Y') }}       {# Date formatting #}
{{ 1234.56 | number_format(2) }} {# Number formatting #}
{{ text | slice(0, 100) }}       {# First 100 characters #}
{{ array | length }}             {# Number of elements #}
{{ array | first }}              {# First element #}
{{ array | last }}               {# Last element #}
{{ array | join(', ') }}         {# Join #}

Operators​

{# Mathematical #}
{{ a + b }}  {{ a - b }}  {{ a * b }}  {{ a / b }}  {{ a % b }}  {{ a ** b }}

{# Comparison #}
{% if a == b %}  {% if a != b %}  {% if a < b %}  {% if a > b %}
{% if a <= b %}  {% if a >= b %}

{# Logical #}
{% if a and b %}  {% if a or b %}  {% if not a %}

{# Other #}
{% if a in b %}                  {# Is it contained? #}
{% if a is defined %}            {# Is it defined? #}
{% if a is null %}               {# Is it null? #}
{% if a is empty %}              {# Is it empty? #}
{% if a starts with 'test' %}    {# Does it start with? #}
{% if a ends with 'test' %}      {# Does it end with? #}
{% if a matches '/regex/' %}     {# Regex match #}

Control Structures​

{# If/Else #}
{% if user_logged_in %}
    Welcome!
{% elseif guest %}
    Please log in
{% else %}
    Register
{% endif %}

{# For Loop #}
{% for product in products %}
    {{ loop.index }}. {{ product.name }}
    {% if loop.first %}First product{% endif %}
    {% if loop.last %}Last product{% endif %}
{% else %}
    No products found
{% endfor %}

{# Set - Variable Declaration #}
{% set name = 'serB2B' %}
{% set numbers = [1, 2, 3] %}
{% set info = {'first': 'Test', 'last': 'User'} %}

Include and Extend​

{# Template inclusion #}
{% include 'header.twig' %}
{% include 'widget.twig' with {'parameter': value} %}
{% include 'footer.twig' ignore missing %}

{# Template inheritance #}
{% extends 'layouts/base.twig' %}

{% block content %}
    Page content
{% endblock %}

Examples Used in Existing Templates​

Twig constructs commonly used in the basic theme:

{# Conditional widget loading #}
{% if theme_config('brands_slider_active') %}
    {% include 'widgets/brands_slider.twig.php' %}
{% endif %}

{# Product loop #}
{% for product in products %}
    <div class="col-md-3">
        {{ include('_product_card.twig.php', {'product': product}) }}
    </div>
{% else %}
    {% include 'no_records.twig.php' %}
{% endfor %}

{# Safe variable usage #}
{{ product.title | default('Unnamed Product') }}
{{ product.description | default('&nbsp;') | raw }}

{# Loop properties #}
{% for item in items %}
    {% if loop.index % 4 == 1 %}
        <div class="row">
    {% endif %}
    
    {# Content #}
    
    {% if loop.index % 4 == 0 or loop.last %}
        </div>
    {% endif %}
{% endfor %}

Next Steps​

📚 Detailed Documentation​

For Twig functions, filters, and variables specific to serB2B:

➡️ Template System Documentation - serB2B custom Twig functions, global variables, filters, and detailed usage examples

🗂️ Template Files​

For descriptions of what existing template files do and how to use them:

➡️ Template View Files Reference - Detailed descriptions and code examples for all view files

🛠️ Development Tips​

  1. Start by examining the Basic theme - All fundamental structures are here
  2. Learn the widgets - The widgets/ folder for modular components
  3. Understand the layout structure - layouts/theme.twig.php master template
  4. Test your variables - Debug with {{ dump(variable) }}
  5. Clear the cache - For template changes to appear

This guide provides fundamental knowledge about the Twig template engine and the serB2B theme system. Follow the documentation links above for detailed information.