Back to Bootstrap 4 Page Builder Support

Tenatious
Tenatious

Hello,

Is it possible to use components inside a custom block? I want to use {% staticMenu %} inside a navigation block.

Is this possible somehow? At the moment it just outputs it as text instead of processing the menu.

This is on static pages btw. Working on CMS pages.

Example on your demo site: http://b4demo.pkurg.ru/partial-test

As you can see it just outputs the text instead of the partial.

Thanks

Last updated

Vladimir
Vladimir

Hi!

In Static Pages you cannot use partials directly, you need to use Snippets.

Snippets: https://octobercms.com/plugin/rainlab-pages#documentation

You can use snippet like this:

  <figure data-snippet="part-test">My partial</figure>

See Screencast: https://www.youtube.com/watch?v=mG94Z6hbj0Q

Last updated

Tenatious
Tenatious

Vladimir said:

Hi!

In Static Pages you cannot use partials directly, you need to use Snippets.

Snippets: https://octobercms.com/plugin/rainlab-pages#documentation

You can use snippet like this:

 <figure data-snippet="part-test">My partial</figure>

See Screencast: https://www.youtube.com/watch?v=mG94Z6hbj0Q

Hi that was me just showing an example of twig seemingly not being processed.

It was actually {% component 'staticMenu' %} the static menu component I was trying to use so I could add a block like the following:


  label: 'Simple block',
  category: 'Basic',
  content: '<div class="top-navigation-wrapper">test<a href=""><img src="" width="96px" alt="Hubb Logo"/></a><nav class="top-navigation">{% component "staticMenu" %}<a href="{{ this.theme.book }}" target="_blank" class="book-a-tour">Book A Tour</a></nav></div>',
});```
Vladimir
Vladimir

In Static Pages you cannot use components.
See docs https://octobercms.com/forum/post/adding-components-to-static-pages

You can add a component to snippet(partial).

And add snippet to custom block

CustomBlock.add('my-menu-block', {
  label: 'My Menu Block ',
  category: 'Basic',
  content: '<div class="my-menu"><figure data-snippet="test-part">My Menu</figure></div>',
});

http://b4demo.pkurg.ru/partial-test

Last updated

1-4 of 4