How to override Zed Twig Templates

#1

Hello,
I haven’t found a way to add additional css in Zed backend. Maybe I’m missing something.

I tried to add Presentation/Layout/layout.twig in Sales/

 {% extends '@Sales/Layout/layout.twig' %}
 {% block head_css %}
    {{ parent() }}
    < link rel="stylesheet" href="/assets/css/test.css" >
 {% endblock %}

(please ignore the space before link)

It won’t show up in Zed. Did npm run zed and cleared twig cache -> nothing.
I tried it with our own shop and Demoshop. Do I have to declare something else?

Thanks in advance,

Noelia

#2

Hi @Noelia,
thanks for contacting us.

I’m Alessandro, frontend developer at Spryker.
I just tried, and I suggest you this implementation:

{% extends '@Gui/Layout/layout.twig' %}

{% block head_css %}
    {{ parent() }}
    <link rel="stylesheet" href="/assets/css/test.css" >
 {% endblock %}

{% block footer_js %}
    {{ parent() }}
    <script src="/assets/js/spryker-zed-sales-main.js"></script>
{% endblock %}

So, what you did is correct, but 2 things:

  • you need to extend ‘@Gui/Layout/layout.twig’: if you extend ‘@Sales/Layout/layout.twig’, you are basically extending your own very file;
  • in our core, every time a twig file in project is created, it replaces the specular one (if it exists) in the core. So, by creating a new layout.twig, you’re replacing the core layout.twig. That’s why you need to copy the code of the core file into your one and then customise it.

Let me know if this explanation is of any help.
Best regards.

Alessandro

#3

Thank you for the fast reply.
Sorry I meant @Gui :wink:

The problem is when I’m at http://zed.de.demoshop.local/sales or any other page in backend, there is no test.css. Do I need to clear some sort of other cache?
Is it ignoring that file, because it doesn’t exist? The thing is when adding that line to the core file in spryker it shows up (I did this only to test for cache).

Kind regards.

Noelia

#4

Ok, I see. :slight_smile:
Let’s try this. In your VM console run either:

  • console twig:cache:warmer (regenerate cache files for twig templates)
  • console cache:empty-all (remove all contents from cache directories)

Let me know if this helps.
Best regards,
Alessandro

#5

Hi, so I did what you suggested and apparently I was too impatient and you’re right it works :slight_smile:

Kind regards and thanks for the help!
Noelia

#6

You’re welcome!
Happy to read that!

Best regards.
Alessandro