fyrst/views-theme

ViewsTheme - Shopware 6 storefront theme

0.2.0 2026-05-21 09:23 UTC

Requires

• shopware/core: ^6.7.0
• shopware/storefront: ^6.7.0

MIT

• Fyrst

README

A Shopware 6.7 storefront theme focused on high-fidelity ecommerce UI design.

Installation

Place the plugin in your Shopware installation under custom/static-plugins/ViewsTheme, then install and activate it:

bin/console plugin:install --activate ViewsTheme

Extended Theme configuration

• In theme.json you can set an icons property

Twig Extensions

vi_define_classes

Allows components to define default CSS classes while letting parent templates inject additional classes or completely override them.

Purpose

This function provides a consistent way to handle CSS class composition in reusable Twig components. It ensures that:

• Components always have their required base styles
• Parent templates can extend or override classes without messy string concatenation
• Class conflicts are resolved predictably through merge or replace strategies

Parameters

Parameter	Type	Default	Description
defaultClasses	array	required	Base class map with semantic keys (e.g., main, inner, title)
customClasses	array	[]	Incoming classes from a parent template
replace	bool	false	If true, replaces default classes; otherwise merges them

Usage Example

{# In your component template #}
{%
  set classes = vi_define_classes({
      main: [
          'd-grid',
          'flex-wrap',
      ],
  }, classes|default({}), replaceClasses|default(false))
%}

{% block component_header_main %}
  <div
    {{ classes.main | vi_attr_classes }}
    data-component='header-main'></div>
{% endblock %}

When including this component from a parent template, you can pass custom classes:

{# Merge additional classes (default behavior) #}
{%
  sw_include '@Storefront/components/header/main.html.twig' with {
      classes: {
          main: ['custom-class', 'another-class']
      }
  }
%}

{# Result: class="d-grid flex-wrap custom-class another-class" #}

{# Completely replace default classes #}
{%
  sw_include '@Storefront/components/header/main.html.twig' with {
      classes: {
          main: ['custom-class']
      },
      replaceClasses: true
  }
%}

{# Result: class="custom-class" #}

Behavior

• Merge mode (replace = false, default): Uses array_merge_recursive to combine classes. Both default and custom classes are preserved.
• Replace mode (replace = true): Uses array_replace_recursive to override default classes with custom ones. If a key exists in both arrays, the custom value wins.

vi_attr_classes

Converts a class array into a clean, HTML-ready class string.

Purpose

Instead of writing class="{{ classes.main|join(' ') }}" in every template, this filter outputs the entire class attribute for you. It removes empty values, deduplicates classes, and handles the HTML attribute syntax.

Usage Example

{# Before #}
<div class='{{ classes.main|join(' ') }}'></div>

{# After #}
<div {{ classes.main | vi_attr_classes }}></div>

Combined with vi_define_classes:

{%
  set classes = vi_define_classes({
      main: [
          'd-grid',
          'flex-wrap',
      ],
  }, classes|default({}), replaceClasses|default(false))
%}

<div {{ classes.main | vi_attr_classes }} data-component='header-main'></div>

Behavior

• Outputs the full class="..." attribute string
• Filters out empty, null, or false values
• Removes duplicate class names
• Returns an empty string (no attribute) if the input array is empty or null

vi_icon

• todo: add description

Requirements

• Shopware 6.7 (Core & Storefront)

License

MIT