Creating a Multidomain Design

This guide shows you, how to distinguish your multiple domains by using custom styles and/or Twig templates. To know the basic technologies we use for frontend implementation, you can read Design Implementation and Customization article.

Model scenarios

This is very easy as there are already prepared less files for the second domain in domain2 folder that is configured for usage by styles_directory parameter in domains.yaml.

Edit assets/styles/frontend/domain2/core/variables.less:

- @color-link: @color-green;
+ @color-link: @color-red;

Hint

If you are not familiar with LESS and how it deals with file imports, see the separate article.

Hint

If you are not familiar with phing, there is a separate article about it as well.

In the footer, among other things, are on the right side contact phone number and email, a list of articles and a link to the contact page. Let us say we want to change the elements so the list of articles goes first, then the link to the contact page, and the phone number and email are last.

Open domains.yaml and set design_id parameter for your 2nd domain.

   domains:
       -   id: 1
           name: shopsys
           locale: en

       -   id: 2
           name: 2.shopsys
           locale: cs
           styles_directory: domain2
+          design_id: my-design

Duplicate footer.html.twig and name the new file footer.my-design.html.twig. The new file must be in the same folder as the original one.

In your new footer.my-design.html.twig, re-order the elements in the div element with class footer__bottom__articles:

    <div class="footer__bottom__articles">
        <a class="menu__item__link" href="{{ url('front_contact') }}">{{ 'Contact'|trans }}</a>
        {{ getShopInfoPhoneNumber() }}
        {{ getShopInfoEmail() }}
        {{ render(controller('App\\Controller\\Front\\ArticleController::footerAction')) }}
    </div>

Final thoughts

Since there are two independent parameters for using custom styles and Twig templates, you are able to combine them arbitrarily to achieve a multidomain design that suits your needs. E.g. you can have 2 color sets and 3 distinct layouts, and then 6 domains with all the possible combinations.

It is important to keep in mind that tests do not cover any other than the first domain, so be aware when using different templates.