Extend responsive theme with own config

Question

I want to extend SW's Responsive theme, add some custom config but don't show the main themes config.

What I did so far:

Create a new theme via the backend and select responsive as base-theme

Edit the Theme.php to contain the following:

public function createConfig(Form\Container\TabContainer $container) {

$fieldset = $this->createFieldSet(
    'my_custom_settings',
    'My custom settings'
);

$tab = $this->createTab(
    'my_custom_tab',
    'My custom tab'
);

$tab->addElement($fieldset);

$container->addTab($tab);

That alone leads to the theme can't be compiled from the backend. Did I do something wrong?

ParseError: Unexpected input on line 1, column 3152 1| @setPrecomposed: 1;@offcanvasCart: 1;@offcanvasOverlayPage: 1;@focusSearch: ;@displaySidebar: 1;@checkoutHeader: 1;@checkoutFooter: 1;@infiniteScrolling: 1;@infiniteThreshold: 4;@lightboxZoomFactor: 0;@brand-primary: #000;@brand-primary-light: saturate(lighten(@brand-primary,12%), 5%);@brand-secondary: #5F7285;@brand-secondary-dark: darken(@brand-secondary, 15%);@gray: #fff;@gray-light: lighten(@gray, 1%);@gray-dark: darken(@gray-light, 10%);@border-color: @gray-dark;@highlight-success: #2ECC71;@highlight-error: #E74C3C;@highlight-notice: #F1C40F;@highlight-info: #4AA3DF;@body-bg: darken(@gray-light, 5%);@text-color: @brand-secondary;@text-color-dark: @brand-secondary-dark;@link-color: @brand-primary;@link-hover-color: darken(@link-color, 10%);@rating-star-color: @highlight-notice;@overlay-bg: #000000;@overlay-opacity: 0.7;@font-base-stack: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;@font-headline-stack: @font-base-stack;@font-size-base: 14;@font-base-weight: 500;@font-light-weight: 300;@font-bold-weight: 700;@font-size-h1: 26;@font-size-h2: 21;@font-size-h3: 18;@font-size-h4: 16;@font-size-h5: @font-size-base;@font-size-h6: 12;@btn-font-size: 14;@btn-icon-size: 10;@btn-default-top-bg: #FFFFFF;@btn-default-bottom-bg: @gray-light;@btn-default-hover-bg: #FFFF

Welcome to stackoverflow @faketon! Did you read the error message? It says, there is something wrong with less file. — Roman
Yup. But those are responsives less-files. I didn't create anything else on my own on that point. As soon as you add own configs, the theme does stop inheriting the parents themes configs/defaults and thus, is not compileable anymore @Roman — Faketon
i think you have to investigate the less error, because thats the cause it wont work. It looks like you followed the documentation at developers.shopware.com/designers-guide/…, right? — Roman
Yes, I did. @Roman How can I follow the less-error if it does not belong to my sources? The error points to stuff inside the responsive-theme. — Faketon

Denis Mayak Denis Mayak · Accepted Answer · 2018-05-09T12:25:26

I just had a similar problem, it is caused by Shopware submitting all theme configuration fields to LESS by default. In question there are no actual fields added to fieldset, so probably at that time Shopware didn't handle such case properly, currently empty fieldset compiles fine, but similar error still appears if field value is not compatible with LESS. To exclude field from being added to LESS there is a lessCompatible attribute for field settings. For example:

$fieldSet->addElement(
    $this->createMediaField(
        'desktopLogo',
        '__desktop__',
        'frontend/_public/src/img/logos/logo--tablet.png',
        ['attributes' => ['lessCompatible' => false]]
    )
);

This is from Bare theme's Theme.php file. It seems that this attribute cannot be added to fieldset defaults and should be added to each field separately.

Extend responsive theme with own config

1 Answers