Bundle for Symfony 5+.
Menu, breadcrumbs, list of pages, shopping cart ... - all this can be done dynamically in the visual mode, without having to dive into code and study the documentation. The application can be adapted for other template engines and CMS, the main settings are in one YAML file.
composer require andchir/twig-visual
Video: https://www.youtube.com/watch?v=kcR5Ip6dQHA
Configuration example:
twig_visual:
default_copy: []
templates:
- homepage
cache_location: []
templates_extension: html.twig
file_upload_dir_path: '%kernel.project_dir%/public/uploads'
editor_user_role: 'ROLE_ADMIN_WRITE'
ui:
field:
title: Content field
configuration:
saveBackupCopy: true
components:
root:
title: Root element
type: elementSelect
required: true
template: '<root>{%% if {{ fieldName }} is defined %%}{{ {{ fieldName }} }}{%% endif %%}</root>'
fieldName:
title: Content field
type: pageField
join: key
separator: '.'
key:
title: Value key
type: text
includeCreate:
title: Make included
configuration:
saveBackupCopy: true
components:
root:
title: Root element
type: elementSelect
required: true
includeName:
title: Item name
type: text
required: true
include:
title: Replace with included
configuration:
updateIncludeSource: false
saveBackupCopy: true
components:
root:
title: Root element
type: elementSelect
required: true
includeName:
title: Include name
type: include
required: true
menu:
title: Main menu
configuration:
saveBackupCopy: true
components:
root:
title: Root element
type: elementSelect
required: true
output: "{{ categoriesTree(0, 'menu_dropdown{{ nameSuffix }}', null, activeCategoriesIds, false) }}"
template: '<root/>'
templatePath: nav/menu_dropdown
saveBackupCopy: true
itemFirst:
title: First level menu item
type: elementSelect
isChildItem: true
required: true
output: '<itemFirst/>'
template: |
{%% for category in children %%}
<itemFirst class="{%% if category.id in activeCategoriesIds %%}{{ activeClassName }}{%% endif %%}">
<a href="{{ catalogPath(category.uri, '', category) }}">{{ category.title }}</a>
</itemFirst>
{%% endfor %%}
containerSecond:
title: Second level container
type: elementSelect
output: "{{ categoriesTree(category.id, 'menu_dropdown_child{{ nameSuffix }}', category, activeCategoriesIds, false) }}"
template: '<containerSecond/>'
templatePath: nav/menu_dropdown_child
itemSecond:
title: Second level menu item
type: elementSelect
isChildItem: true
output: '<itemSecond/>'
template: |
{%% for category in children %%}
<itemSecond class="{%% if category.id in activeCategoriesIds %%}{{ activeClassName }}{%% endif %%}">
<a href="{{ catalogPath(category.uri, '', category) }}">{{ category.title }}</a>
</itemSecond>
{%% endfor %%}
containerThird:
title: Third level container
type: elementSelect
output: "{{ categoriesTree(category.id, 'menu_dropdown_child', category, activeCategoriesIds, false) }}"
template: '<containerThird/>'
templatePath: nav/menu_dropdown_child_child
itemThird:
title: Third level menu item
type: elementSelect
isChildItem: true
output: '<itemThird/>'
template: |
{%% for category in children %%}
<itemThird class="{%% if category.id in activeCategoriesIds %%}{{ activeClassName }}{%% endif %%}">
<a href="{{ catalogPath(category.uri, '', category) }}">{{ category.title }}</a>
</itemThird>
{%% endfor %%}
activeClassName: {title: CSS activity class, type: text, value: active}
nameSuffix: {title: Name suffix, type: text}
deleteLeftSiblings: {title: Delete previous child, type: checkbox}
deleteRightSiblings: {title: Delete next child, type: checkbox}
editMargin:
title: Edit margin
configuration:
saveBackupCopy: true
components:
root:
title: Root element
type: elementSelect
required: true
marginTop:
title: Indent on the top
type: text
styleName: 'margin-top'
marginRight:
title: Indent on the right
type: text
styleName: 'margin-right'
marginBottom:
title: Indent from the bottom
type: text
styleName: 'margin-bottom'
marginLeft:
title: Indent on the left
type: text
styleName: 'margin-left'
editPadding:
title: Edit padding
configuration:
saveBackupCopy: true
components:
root:
title: Root element
type: elementSelect
required: true
paddingTop:
title: Indent on the top
type: text
styleName: 'padding-top'
paddingRight:
title: Indent on the right
type: text
styleName: 'padding-right'
paddingBottom:
title: Indent from the bottom
type: text
styleName: 'padding-bottom'
paddingLeft:
title: Indent on the left
type: text
styleName: 'padding-left'
wrapTag:
title: Create block
configuration:
saveBackupCopy: true
components:
root:
title: Root element
type: elementSelect
required: true
output: '<root/>'
template: '<div><root/></div>'Add to base template before </head> tag:
<!-- twv-script -->
{% if is_granted('ROLE_ADMIN') %}
<link href="{{ asset('bundles/twigvisual/css/twv-icomoon/style.css') }}" rel="stylesheet">
<link href="{{ asset('bundles/twigvisual/dist/twigvisual_styles.min.css') }}" rel="stylesheet">
<script src="{{ asset('bundles/twigvisual/dist/twigvisual.min.js') }}"></script>
<script>
const twigVisual = new TwigVisual( {{ twigVisualOptions(_self, _context) }} );
</script>
{% endif %}
<!-- /twv-script -->Development:
npm run build:dev
Production:
npm run build