Basic Extension of standard layout

[Edit: I am using orocommerce-application 3.0]
[Edit 2: Wonderful, editing posts apparently removes the code tags!]

Good day, I am struggling with the basic task of simply extending a predefined layout. My goal is just to append a custom element/twig template to the body of the rendered page.
I have read a lot of documents, for example https://oroinc.com/b2b-ecommerce/doc/current/dev-guide/front-ui/layouts, but none of the available docs really explain how to achieve my goal (at least the scss gets compiled to css and gets sent to the frontend).

theme.yml:

class="lang:yaml decode:true " >label: stenno groups: [main,commerce] parent: default

1 2 3

class="lang:yaml decode:true   " >label: stenno groups: [main,commerce] parent: default

update.yml:

YAML

layout: actions: - '@setBlockTheme': themes: 'config/views/test.html.twig' - '@addTree': items: content: blockType: body my_random_thing: blockType: container tree: root: content: my_random_thing: ~

1 2 3 4 5 6 7 8 9 10 11 12 13 14

layout:     actions:         - '@setBlockTheme':             themes: 'config/views/test.html.twig'         - '@addTree':             items:                 content:                     blockType: body                 my_random_thing:                     blockType: container             tree:                 root:                     content:                         my_random_thing: ~

assets.yml:

YAML

styles: inputs: - 'bundles/stennotest/scss/styles.scss' filters: ['cssrewrite', 'cssmin', 'scssphp'] output: 'css/layout/stenno/styles.css'

1 2 3 4 5

styles:     inputs:         - 'bundles/stennotest/scss/styles.scss'     filters: ['cssrewrite', 'cssmin', 'scssphp']     output: 'css/layout/stenno/styles.css'

test.html.twig

YAML

{% block my_random_thing %} <div id="my_custom_thing" class="foobar">HELLO, this is my custom element!</div> {% endblock %}

1 2 3

{% block my_random_thing %} <div id="my_custom_thing" class="foobar">HELLO, this is my custom element!</div> {% endblock %}

What is the correct way to include my_custom_thing template at the end of the body in the rendered storefront? Do i have to register the .twig.html somewhere still? If yes, is there a complete documentation or walkthrough on how to configure it?

Thanks and with regards,
Christian

• This topic was modified 5 years, 3 months ago by  christian.stegen.
• This topic was modified 5 years, 3 months ago by  christian.stegen.

Topic

[Yevhen ShyshkinParticipant]

Hello Christian.

I see two issues here.

First – you should just add one block using @add function instead of @addTree, here is example: https://github.com/oroinc/orocommerce/blob/3.1.0-rc/src/Oro/Bundle/OrderBundle/Resources/views/layouts/default/oro_order_frontend_index/layout.yml#L23-L26

Second – block name in the template should have name _my_random_thing_widget – feel free to check an example here: https://github.com/oroinc/orocommerce/blob/3.1.0-rc/src/Oro/Bundle/OrderBundle/Resources/views/layouts/default/oro_order_frontend_index/layout.html.twig

And make sure that application is able to see your layout update – i.e. it has to be in Resources/views/layouts/<theme_name>/page or Resources/views/layouts/<theme_name>/<route_name> directory.

Please let me know if this solution works for you.

[christian.stegenParticipant]

Hello, thanks for the swift reply.
I was able to properly extend the layout when i renamed the template block to “_my_random_thing_widget” as you suggested!
Thank you very much for the help. I will further read into symfony Form rendering as it was linked in the documentations.

• This reply was modified 5 years, 3 months ago by  christian.stegen.

[christian.stegenParticipant]

For completeness sake, here is my working setup:

update.yml

YAML

layout: actions: - '@setBlockTheme': themes: 'config/views/test.html.twig' - '@add': id: my_random_thing blockType: container parentId: body

1 2 3 4 5 6 7 8

layout:     actions:         - '@setBlockTheme':             themes: 'config/views/test.html.twig'         - '@add':             id: my_random_thing             blockType: container             parentId: body

test.html.twig

XHTML

{% block _my_random_thing_widget %} <div id="my_custom_thing" class="foobar">HELLO, this is my custom element!</div> {% endblock %}

1 2 3

{% block _my_random_thing_widget %} <div id="my_custom_thing" class="foobar">HELLO, this is my custom element!</div> {% endblock %}

[Author]

Replies