Skip to main content

SitePack Theme Functions

This document lists all the custom Twig functions available for theme development in SitePack. These functions are exposed via the ThemeService and can be used within theme templates.

Functions​

theme_asset(path)​

Returns the full URL for a theme-specific asset.

  • Parameters:
    • path (string): The relative path to the asset within the theme's assets/ directory (e.g., 'css/style.css').
  • Example: 
    <link rel="stylesheet" href="{{ theme_asset('css/theme.css') }}">

theme_setting(config, key, default)​

Retrieves a value from the theme's configuration settings.

  • Parameters:
    • config (array): The theme configuration array (usually passed as theme or config to the template).
    • key (string): The setting key to retrieve.
    • default (mixed, optional): The default value to return if the key is not found.
  • Example: 
    <body style="background-color: {{ theme_setting(theme, 'bg_color', '#ffffff') }}">

sitepack_title()​

Renders the site title dynamically based on the current page.

  • Example: 
    <title>{{ sitepack_title() }}</title>

sitepack_head()​

Renders common <head> elements, including SEO meta tags, favicon, and essential theme-related styles.

  • Example: 
    <head>
        {{ sitepack_head()|raw }}
    </head>

sitepack_navigation()​

Renders the main site navigation menu.

  • Example: 
    <nav>
        {{ sitepack_navigation()|raw }}
    </nav>

sitepack_breadcrumbs()​

Renders the breadcrumb navigation for the current page.

  • Example: 
    <div class="breadcrumbs">
        {{ sitepack_breadcrumbs()|raw }}
    </div>

sitepack_content()​

Renders the main content of the current page.

  • Example: 
    <main>
        {{ sitepack_content()|raw }}
    </main>

sitepack_content_legal()​

Renders legal content, such as privacy policy or terms and conditions, if applicable.

  • Example: 
    <section class="legal">
        {{ sitepack_content_legal()|raw }}
    </section>

Renders the site footer content.

  • Example: 
    <footer>
        {{ sitepack_footer()|raw }}
    </footer>

Renders the site copyright information.

  • Example: 
    <div class="copyright">
        {{ sitepack_copyright()|raw }}
    </div>

Renders the live search component (modal or dropdown).

  • Example: 
    {{ sitepack_live_search()|raw }}

sitepack_live_search_icon()​

Renders the icon/trigger for the live search.

  • Example: 
    <div class="search-trigger">
        {{ sitepack_live_search_icon()|raw }}
    </div>

sitepack_shopping_cart_icon(icon, showCount)​

Renders the shopping cart icon with an optional item count badge.

  • Parameters:
    • icon (string, optional): The icon name to use. Default: 'shopping-bag-solid'.
    • showCount (boolean, optional): Whether to show the item count. Default: true.
  • Example: 
    <div class="cart-icon">
        {{ sitepack_shopping_cart_icon('cart-custom', true)|raw }}
    </div>

sitepack_cart()​

Renders a full shopping cart table with all items, quantities, prices, a totals overview (including shipping costs), and a checkout button.

  • Example: 
    <div class="cart-page">
        {{ sitepack_cart()|raw }}
    </div>

sitepack_cookies()​

Renders the cookie consent banner/modal.

  • Example: 
    {{ sitepack_cookies()|raw }}

sitepack_scripts()​

Renders essential site scripts and any custom theme scripts. Should be placed before the closing </body> tag.

  • Example: 
    {{ sitepack_scripts()|raw }}

app_block(name)​

Renders a specific application block by name.

  • Parameters:
    • name (string): The name of the block to render.
  • Example: 
    {{ app_block('header_top')|raw }}

sitepack_price(priceCents, currency)​

Formats a price given in cents into a human-readable string with currency.

  • Parameters:
    • priceCents (int|float): The price in cents.
    • currency (string, optional): The currency symbol or string. Default: '&euro;'.
  • Example: 
    <span class="price">{{ sitepack_price(1995, '€') }}</span> {# Outputs: € 19,95 #}

calculate_text_color(backgroundColor)​

Calculates a readable text color (either black or white) based on the provided background color.

  • Parameters:
    • backgroundColor (string): Hex color code of the background.
  • Example: 
    <div style="background-color: {{ bg }}; color: {{ calculate_text_color(bg) }}">...</div>

calculate_brightness(hex, steps)​

Adjusts the brightness of a hex color. Positive steps make it lighter, negative steps make it darker.

  • Parameters:
    • hex (string): Hex color code to adjust.
    • steps (int): Number of steps to adjust (e.g., -10 for darker).
  • Example: 
    <div style="background-color: {{ calculate_brightness('#ff0000', -20) }}">...</div>