tiamak/advancedmegamenu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Refine mega menu admin and responsive navigation
Build / Build & Release draft (push) Failing after 0s
Details
PHP tests / PHP Syntax check 5.6 => 8.1 (push) Failing after 10s
Details
PHP tests / PHP-CS-Fixer (push) Failing after 1m6s
Details
PHP tests / PHPStan (1.7.1.2) (push) Failing after 2m27s
Details
PHP tests / PHPStan (1.7.2.5) (push) Failing after 1m32s
Details
PHP tests / PHPStan (1.7.3.4) (push) Failing after 1m29s
Details
PHP tests / PHPStan (1.7.4.4) (push) Failing after 1m45s
Details
PHP tests / PHPStan (1.7.5.1) (push) Failing after 1m47s
Details
PHP tests / PHPStan (1.7.6) (push) Failing after 1m45s
Details
PHP tests / PHPStan (1.7.7) (push) Failing after 2m0s
Details
PHP tests / PHPStan (1.7.8) (push) Failing after 1m56s
Details
PHP tests / PHPStan (latest) (push) Failing after 2m13s
Details

Browse Source
This commit is contained in:
tiamak
2026-04-13 13:34:38 +00:00
parent 8e6b6d0cdd
commit 8a2163bb34
7 changed files with 1703 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/templates/admin/configure.tpl
+187 -3
View File
@@ -7,6 +7,55 @@
>
<script type="application/json" class="js-adv-tree-data">{$advmegamenu_tree|json_encode nofilter}</script>
<script type="application/json" class="js-adv-languages-data">{$advmegamenu_languages|json_encode nofilter}</script>
<script type="application/json" class="js-adv-i18n">{
"builderTitle": "{l s='Mega menu builder' d='Modules.Advancedmegamenu.Admin' js=1}",
"builderHelp": "{l s='Manage the menu like on the storefront: quick actions on cards, editing in Bootstrap modals, and automatic sprite/front cache regeneration on save.' d='Modules.Advancedmegamenu.Admin' js=1}",
"rootRule": "{l s='First level only stores title and custom link. Description and item image are disabled there by design.' d='Modules.Advancedmegamenu.Admin' js=1}",
"addRoot": "{l s='Add root item' d='Modules.Advancedmegamenu.Admin' js=1}",
"saveMenu": "{l s='Save mega menu' d='Modules.Advancedmegamenu.Admin' js=1}",
"menuItem": "{l s='Menu item' d='Modules.Advancedmegamenu.Admin' js=1}",
"rootItem": "{l s='Root item' d='Modules.Advancedmegamenu.Admin' js=1}",
"childItem": "{l s='Child item' d='Modules.Advancedmegamenu.Admin' js=1}",
"inactive": "{l s='Inactive' d='Modules.Advancedmegamenu.Admin' js=1}",
"newWindow": "{l s='New window' d='Modules.Advancedmegamenu.Admin' js=1}",
"openLink": "{l s='Custom link' d='Modules.Advancedmegamenu.Admin' js=1}",
"edit": "{l s='Edit' d='Modules.Advancedmegamenu.Admin' js=1}",
"delete": "{l s='Delete' d='Modules.Advancedmegamenu.Admin' js=1}",
"addChild": "{l s='Add child' d='Modules.Advancedmegamenu.Admin' js=1}",
"addBlock": "{l s='Add block' d='Modules.Advancedmegamenu.Admin' js=1}",
"block": "{l s='Block' d='Modules.Advancedmegamenu.Admin' js=1}",
"blocks": "{l s='blocks' d='Modules.Advancedmegamenu.Admin' js=1}",
"children": "{l s='children' d='Modules.Advancedmegamenu.Admin' js=1}",
"emptyTree": "{l s='No menu items yet. Add the first root item to start building the mega menu.' d='Modules.Advancedmegamenu.Admin' js=1}",
"nodeModalTitle": "{l s='Edit menu item' d='Modules.Advancedmegamenu.Admin' js=1}",
"layoutModalTitle": "{l s='Edit rich content block' d='Modules.Advancedmegamenu.Admin' js=1}",
"deleteNodeTitle": "{l s='Delete menu item' d='Modules.Advancedmegamenu.Admin' js=1}",
"deleteLayoutTitle": "{l s='Delete rich block' d='Modules.Advancedmegamenu.Admin' js=1}",
"deleteNodeText": "{l s='This will remove the selected menu item together with its children and attached blocks.' d='Modules.Advancedmegamenu.Admin' js=1}",
"deleteLayoutText": "{l s='This will remove the selected rich content block.' d='Modules.Advancedmegamenu.Admin' js=1}",
"cancel": "{l s='Cancel' d='Modules.Advancedmegamenu.Admin' js=1}",
"save": "{l s='Save' d='Modules.Advancedmegamenu.Admin' js=1}",
"confirmDelete": "{l s='Delete' d='Modules.Advancedmegamenu.Admin' js=1}",
"type": "{l s='Type' d='Modules.Advancedmegamenu.Admin' js=1}",
"entityId": "{l s='Entity ID' d='Modules.Advancedmegamenu.Admin' js=1}",
"active": "{l s='Active' d='Modules.Advancedmegamenu.Admin' js=1}",
"title": "{l s='Title' d='Modules.Advancedmegamenu.Admin' js=1}",
"description": "{l s='Description' d='Modules.Advancedmegamenu.Admin' js=1}",
"customLinkLabel": "{l s='Custom link' d='Modules.Advancedmegamenu.Admin' js=1}",
"iconUpload": "{l s='Item image/icon' d='Modules.Advancedmegamenu.Admin' js=1}",
"rootOnlyHint": "{l s='For first-level items only title and custom link are edited here.' d='Modules.Advancedmegamenu.Admin' js=1}",
"width": "{l s='Width' d='Modules.Advancedmegamenu.Admin' js=1}",
"blockType": "{l s='Block type' d='Modules.Advancedmegamenu.Admin' js=1}",
"showTitle": "{l s='Show title' d='Modules.Advancedmegamenu.Admin' js=1}",
"backgroundColor": "{l s='Background color' d='Modules.Advancedmegamenu.Admin' js=1}",
"imageUpload": "{l s='Block image' d='Modules.Advancedmegamenu.Admin' js=1}",
"productSearch": "{l s='Product search' d='Modules.Advancedmegamenu.Admin' js=1}",
"productSearchPlaceholder": "{l s='Search product by name, reference or ID' d='Modules.Advancedmegamenu.Admin' js=1}",
"promo": "{l s='Promo' d='Modules.Advancedmegamenu.Admin' js=1}",
"products": "{l s='Products' d='Modules.Advancedmegamenu.Admin' js=1}",
"noProducts": "{l s='No products attached.' d='Modules.Advancedmegamenu.Admin' js=1}",
"langLabel": "{l s='Language' d='Modules.Advancedmegamenu.Admin' js=1}"
}</script>
<form method="post" action="" class="defaultForm form-horizontal">
<input type="hidden" name="advmegamenu_tree_json" id="advmegamenu_tree_json" value="" />
@@ -16,9 +65,14 @@
{l s='Mega menu builder' d='Modules.Advancedmegamenu.Admin'}
</div>
<p class="help-block">
{l s='Build the navigation tree, attach promo blocks and products, then save to regenerate the sprite and front cache.' d='Modules.Advancedmegamenu.Admin'}
</p>
<div class="adv-megamenu-admin__intro">
<p class="help-block">
{l s='Manage the menu like on the storefront: quick actions on cards, editing in Bootstrap modals, and automatic sprite/front cache regeneration on save.' d='Modules.Advancedmegamenu.Admin'}
</p>
<p class="help-block adv-megamenu-admin__intro-rule">
{l s='First level only stores title and custom link. Description and item image are disabled there by design.' d='Modules.Advancedmegamenu.Admin'}
</p>
</div>
<div class="adv-megamenu-admin__toolbar">
<button type="button" class="btn btn-default js-add-root-node">
@@ -39,4 +93,134 @@
</div>
</div>
</form>
<div class="modal fade" id="advNodeModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Admin.Actions'}">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title js-node-modal-title">{l s='Edit menu item' d='Modules.Advancedmegamenu.Admin'}</h4>
</div>
<div class="modal-body">
<div class="alert alert-info js-node-root-hint" style="display:none;"></div>
<div class="adv-megamenu-admin__modal-grid">
<label class="form-group">
<span>{l s='Type' d='Modules.Advancedmegamenu.Admin'}</span>
<select class="form-control js-node-type">
<option value="category">category</option>
<option value="cms">cms</option>
<option value="link">link</option>
<option value="rich_content">rich_content</option>
</select>
</label>
<label class="form-group">
<span>{l s='Entity ID' d='Modules.Advancedmegamenu.Admin'}</span>
<input type="number" class="form-control js-node-entity-id" min="0">
</label>
<label class="form-group adv-megamenu-admin__checkbox">
<input type="checkbox" class="js-node-active">
<span>{l s='Active' d='Modules.Advancedmegamenu.Admin'}</span>
</label>
<label class="form-group adv-megamenu-admin__checkbox">
<input type="checkbox" class="js-node-new-window">
<span>{l s='New window' d='Modules.Advancedmegamenu.Admin'}</span>
</label>
</div>
<div class="adv-megamenu-admin__modal-image js-node-image-group">
<label class="form-group">
<span>{l s='Item image/icon' d='Modules.Advancedmegamenu.Admin'}</span>
<input type="file" class="form-control js-node-icon-upload" accept="image/*">
</label>
<div class="js-node-icon-preview"></div>
</div>
<div class="adv-megamenu-admin__lang-panels js-node-languages"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{l s='Cancel' d='Modules.Advancedmegamenu.Admin'}</button>
<button type="button" class="btn btn-primary js-save-node">{l s='Save' d='Modules.Advancedmegamenu.Admin'}</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="advLayoutModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Admin.Actions'}">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">{l s='Edit rich content block' d='Modules.Advancedmegamenu.Admin'}</h4>
</div>
<div class="modal-body">
<div class="adv-megamenu-admin__modal-grid">
<label class="form-group">
<span>{l s='Width' d='Modules.Advancedmegamenu.Admin'}</span>
<input type="number" class="form-control js-layout-width" min="1" max="12">
</label>
<label class="form-group">
<span>{l s='Block type' d='Modules.Advancedmegamenu.Admin'}</span>
<select class="form-control js-layout-type">
<option value="promo">{l s='Promo' d='Modules.Advancedmegamenu.Admin'}</option>
<option value="products">{l s='Products' d='Modules.Advancedmegamenu.Admin'}</option>
</select>
</label>
<label class="form-group adv-megamenu-admin__checkbox">
<input type="checkbox" class="js-layout-title">
<span>{l s='Show title' d='Modules.Advancedmegamenu.Admin'}</span>
</label>
<label class="form-group">
<span>{l s='Background color' d='Modules.Advancedmegamenu.Admin'}</span>
<input type="text" class="form-control js-layout-bg" placeholder="#f3efe8">
</label>
</div>
<div class="adv-megamenu-admin__modal-image">
<label class="form-group">
<span>{l s='Block image' d='Modules.Advancedmegamenu.Admin'}</span>
<input type="file" class="form-control js-layout-upload" accept="image/*">
</label>
<div class="js-layout-preview"></div>
</div>
<div class="form-group">
<label>
<span>{l s='Product search' d='Modules.Advancedmegamenu.Admin'}</span>
<input type="text" class="form-control js-layout-product-search" placeholder="{l s='Search product by name, reference or ID' d='Modules.Advancedmegamenu.Admin'}">
</label>
</div>
<div class="adv-menu-product-results js-layout-product-results"></div>
<div class="adv-menu-products js-layout-products"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{l s='Cancel' d='Modules.Advancedmegamenu.Admin'}</button>
<button type="button" class="btn btn-primary js-save-layout">{l s='Save' d='Modules.Advancedmegamenu.Admin'}</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="advConfirmModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Admin.Actions'}">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title js-confirm-title">{l s='Delete menu item' d='Modules.Advancedmegamenu.Admin'}</h4>
</div>
<div class="modal-body">
<p class="js-confirm-text"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{l s='Cancel' d='Modules.Advancedmegamenu.Admin'}</button>
<button type="button" class="btn btn-danger js-confirm-action">{l s='Delete' d='Modules.Advancedmegamenu.Admin'}</button>
</div>
</div>
</div>
</div>
</div>
views/templates/hook/megamenu.tpl
+70 -9
View File
@@ -32,7 +32,7 @@
{if $nodes|count}
<div class="row adv-megamenu__node-card-row">
{foreach from=$nodes item=treeNode}
<div class="col-xl-3 col-lg-4 col-sm-6">
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
<article class="card adv-megamenu__node-card">
{if $treeNode.icon_url}
<img src="{$treeNode.icon_url|escape:'htmlall':'UTF-8'}" class="card-img-top" alt="{$treeNode.title|escape:'htmlall':'UTF-8'}" loading="lazy">
@@ -64,6 +64,35 @@
{/if}
{/function}
{function name=advRichContentCards nodes=[]}
{if $nodes|count}
<div class="adv-megamenu__rich-node-row">
{foreach from=$nodes item=treeNode}
<article class="card adv-megamenu__rich-node-card">
{if $treeNode.icon_url}
<div class="adv-megamenu__rich-node-media">
<img src="{$treeNode.icon_url|escape:'htmlall':'UTF-8'}" alt="{$treeNode.title|escape:'htmlall':'UTF-8'}" loading="lazy">
</div>
{/if}
<div class="adv-megamenu__rich-node-body">
<h3 class="adv-megamenu__rich-node-title">
<a href="{$treeNode.url|escape:'htmlall':'UTF-8'}" {if $treeNode.new_window}target="_blank" rel="noopener"{/if}>{$treeNode.title|escape:'htmlall':'UTF-8'}</a>
</h3>
{if $treeNode.description}
<div class="adv-megamenu__rich-node-description">{$treeNode.description|escape:'htmlall':'UTF-8'}</div>
{/if}
{if $treeNode.custom_link}
<a href="{$treeNode.custom_link|escape:'htmlall':'UTF-8'}" class="adv-megamenu__rich-node-link btn btn-primary" {if $treeNode.new_window}target="_blank" rel="noopener"{/if}>
{l s='Zobacz wszystko' d='Modules.Advancedmegamenu.Shop'}
</a>
{/if}
</div>
</article>
{/foreach}
</div>
{/if}
{/function}
{function name=advRichContentIntro node=[]}
{if $node.type == 'rich_content'}
<article class="adv-megamenu__rich-intro">
@@ -132,7 +161,7 @@
{/if}
{/function}
{function name=advMobilePanels nodes=[]}
{function name=advMobilePanels nodes=[] depth=0}
{foreach from=$nodes item=node}
{assign var=panelId value="adv-panel-"|cat:$node.id}
{if $node.children|count || $node.category_branch|count || $node.layouts|count || $node.type == 'rich_content'}
@@ -151,7 +180,12 @@
{/foreach}
{foreach from=$node.children item=child}
<li>
<div class="adv-megamenu__mobile-link-row">
<div class="adv-megamenu__mobile-link-row{if $depth == 1 && $child.icon_url} adv-megamenu__mobile-link-row--with-image{/if}">
{if $depth == 1 && $child.icon_url}
<div class="adv-megamenu__mobile-thumb">
<img src="{$child.icon_url|escape:'htmlall':'UTF-8'}" alt="{$child.title|escape:'htmlall':'UTF-8'}" loading="lazy">
</div>
{/if}
<a href="{$child.url|escape:'htmlall':'UTF-8'}" {if $child.new_window}target="_blank" rel="noopener"{/if}>{$child.title|escape:'htmlall':'UTF-8'}</a>
{if $child.children|count || $child.category_branch|count || $child.layouts|count || $child.type == 'rich_content'}
<button type="button" class="js-adv-open-panel" data-target="adv-panel-{$child.id}">›</button>
@@ -161,13 +195,24 @@
{/foreach}
</ul>
</section>
{advMobilePanels nodes=$node.children}
{advMobilePanels nodes=$node.children depth=$depth+1}
{/if}
{/foreach}
{/function}
<nav class="adv-megamenu" aria-label="{l s='Main navigation' d='Modules.Advancedmegamenu.Shop'}">
<div class="adv-megamenu__desktop hidden-sm-down">
{if isset($shop.logo_details.src) && $shop.logo_details.src}
<a class="adv-megamenu__brand" href="{$urls.pages.index|escape:'htmlall':'UTF-8'}" aria-label="{$shop.name|escape:'htmlall':'UTF-8'}">
<img
src="{$shop.logo_details.src|escape:'htmlall':'UTF-8'}"
alt="{$shop.name|escape:'htmlall':'UTF-8'}"
width="{$shop.logo_details.width|intval}"
height="{$shop.logo_details.height|intval}"
loading="eager"
>
</a>
{/if}
<ul class="adv-megamenu__root-list">
{foreach from=$menu.children item=node}
{if $node.active}
@@ -220,7 +265,13 @@
{advPanelTree nodes=$child.category_branch}
{/if}
{if $child.children|count}
{advNodeCardsByType nodes=$child.children type='rich_content'}
{assign var=richContentNodes value=[]}
{foreach from=$child.children item=grandChild}
{if $grandChild.type == 'rich_content'}
{append var='richContentNodes' value=$grandChild}
{/if}
{/foreach}
{advRichContentCards nodes=$richContentNodes}
{advNodeCardsByType nodes=$child.children type='category'}
{advNodeCardsByType nodes=$child.children type='cms'}
{advNodeCardsByType nodes=$child.children type='link'}
@@ -249,9 +300,19 @@
</div>
<div class="adv-megamenu__mobile hidden-md-up">
<button type="button" class="adv-megamenu__toggle js-adv-menu-toggle" aria-expanded="false">
<span class="material-icons" aria-hidden="true">menu</span>
<span>{l s='Menu' d='Modules.Advancedmegamenu.Shop'}</span>
{if isset($shop.logo_details.src) && $shop.logo_details.src}
<a class="adv-megamenu__brand adv-megamenu__brand--mobile" href="{$urls.pages.index|escape:'htmlall':'UTF-8'}" aria-label="{$shop.name|escape:'htmlall':'UTF-8'}">
<img
src="{$shop.logo_details.src|escape:'htmlall':'UTF-8'}"
alt="{$shop.name|escape:'htmlall':'UTF-8'}"
width="{$shop.logo_details.width|intval}"
height="{$shop.logo_details.height|intval}"
loading="eager"
>
</a>
{/if}
<button type="button" class="adv-megamenu__toggle js-adv-menu-toggle header-block__action-btn" aria-expanded="false" aria-label="{l s='Open menu' d='Modules.Advancedmegamenu.Shop'}">
<span class="material-icons header-block__icon" aria-hidden="true">menu</span>
</button>
<div class="adv-megamenu__overlay js-adv-overlay">
@@ -278,7 +339,7 @@
{/foreach}
</ul>
</section>
{advMobilePanels nodes=$menu.children}
{advMobilePanels nodes=$menu.children depth=0}
</div>
</div>
</div>