SubNavi mit Bildern (nur 2te Ebene)

2020-01-22 17:41:03 +01:00 · 2020-01-22 17:41:03 +01:00 · 55411c8279
commit 55411c8279
parent e79fcc7a52
5 changed files with 203 additions and 49 deletions
--- a/frontend/_public/src/less/_modules/header.less
+++ b/frontend/_public/src/less/_modules/header.less
@ -25,7 +25,6 @@
  margin-top: 1.5em!important;
  background: @brand-primary!important;
  .main-search--form {
-    padding-top: 1em;
    box-shadow: none!important;
    label{
      display: inline-block;
@ -50,7 +49,7 @@
    button{
      width: 8% !important;
      float: left;
-      right: 4%!important;
+      right: 3%!important;
      i{
        color: #fff; } } } }

@ -80,7 +79,6 @@
  .navigation--list {
    .navigation--entry {
      height: 90px;
-      overflow: hidden;
      padding: 0 5px;
      margin: 0 0 0 10px;
      .account--link {
@ -96,7 +94,7 @@
        .wbn-icon-set {
          display: block;
          height: 35px!important;
-          margin-bottom: 2px;
+          margin-bottom: 3px;
          &:before {
            font-size: 35px;
            color: #fff; } } }
@ -109,7 +107,7 @@
          display: block;
          color: #fff;
          font-weight: 300;
-          padding: 2px 5px!important; }
+          padding: 3px 5px 0 5px!important; }
        .wbn-icon-set {
          display: block;
          height: 35px!important;
@ -119,10 +117,12 @@
      .cds--info-block {
        text-align: center;
        color: #fff;
+        a {
+          color: #fff; }
        .sw-icon-set {
          display: block;
          height: 35px!important;
-          margin-bottom: 2px;
+          margin-bottom: 3px;
          &:before {
            font-size: 30px;
            color: #fff; }
@ -130,16 +130,34 @@
            transform: scaleX(-1);
            min-height: 45px;
            padding-top: 0;
-            margin: -10px 0 12px 0;
+            margin: -4px 0 8px 0;
            &:before {
-              font-size: 60px; } }
+              font-size: 50px; } }
          &.icon--phone {
            transform: scaleX(-1);
            min-height: 45px;
-            padding-top: 5px;
+            padding-top: 8px;
          &:before {
-            font-size: 30px; } } } }
+            font-size: 30px; } } }
+        .info--delivery {
+          font-size: 12px; } }
      &.entry--delivery {
-        margin-right: 1%; } } } }
+        margin-right: 1%; } } }
+  .entry--delivery,
+  .entry--support,
+  .entry--account,
+  .entry--cart {
+    float: right; } }
+
+
+/* Konto-SubNavigation */
+
+.account--dropdown-navigation {
+  .account--menu {
+    &::after {
+      right: 3rem; }
+    .sidebar--navigation {
+      .navigation--entry {
+        height: auto; } } } }

 .cssAnker {}
--- a/frontend/_public/src/less/_modules/page.less
+++ b/frontend/_public/src/less/_modules/page.less
@ -3,7 +3,7 @@
 #pageAnker {
  color: red; }

-.container {
+.header--navigation {
  width: 100%; }

 .cds--block {
@ -17,7 +17,7 @@


@media (min-width: 48em) {
-  .container {
+  .header--navigation {
    max-width: calc(~"100% - 24em");
    margin: 0 12em;
  }
--- a/frontend/index/main-navigation.tpl
+++ b/frontend/index/main-navigation.tpl
@ -6,6 +6,9 @@
        {block name='frontend_index_navigation_categories_navigation_list'}
            <ul class="navigation--list container" role="menubar" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
                {strip}
+
+                    {debug}
+
                    {block name='frontend_index_navigation_categories_top_home'}
                        <li class="navigation--entry{if $sCategoryCurrent == $sCategoryStart && $Controller == 'index'} is--active{/if} is--home" role="menuitem">
                            {block name='frontend_index_navigation_categories_top_link_home'}
--- a/frontend/plugins/advanced_menu/index.tpl
+++ b/frontend/plugins/advanced_menu/index.tpl
@ -0,0 +1,129 @@
+{function name="categories_top" level=0}
+
+    {$columnIndex = 0}
+    {$menuSizePercentage = 100 - (25 * $columnAmount * intval($hasTeaser))}
+    {$columnCount = 4 - ($columnAmount * intval($hasTeaser))}
+
+    <ul class="menu--list menu--level-{$level} columns--{$columnCount}"{if $level === 0} style="width: {$menuSizePercentage}%;"{/if}>
+        {block name="frontend_plugins_advanced_menu_list"}
+            {foreach $categories as $category}
+                {if $category.hideTop}
+                    {continue}
+                {/if}
+
+                {$categoryLink = $category.link}
+                {if $category.external}
+                    {$categoryLink = $category.external}
+                {/if}
+
+
+                <li class="menu--list-item item--level-{$level}"{if $level === 0} style="width: 100%"{/if}>
+                    {block name="frontend_plugins_advanced_menu_list_item"}
+                        {if $category.media.path}
+                            <a class="sub--nav-link" href="{$categoryLink|escapeHtml}" title="{$category.name|escape}">
+                                <img class="sub--nav-image thum"
+                                     alt="{$category.name|escape}"
+                                     src="{link file={$category.media.path} fullPath}" />
+                                <span class="sub--nav-title">{$category.name|escape}</span>
+                            </a>
+                        {else}
+                            <a href="{$categoryLink|escapeHtml}" class="menu--list-item-link" title="{$category.name|escape}">{$category.name}</a>
+                        {/if}
+
+                        {if $category.sub}
+                            {call name=categories_top categories=$category.sub level=$level+1}
+                        {/if}
+                    {/block}
+                </li>
+
+
+                {*
+
+                <li class="menu--list-item item--level-{$level}"{if $level === 0} style="width: 100%"{/if}>
+                    {block name="frontend_plugins_advanced_menu_list_item"}
+                        <a href="{$categoryLink|escapeHtml}" class="menu--list-item-link" aria-label="{$category.name|escape}" title="{$category.name|escape}"{if $category.external && $category.externalTarget} target="{$category.externalTarget}"{/if}>{$category.name}</a>
+
+                        {if $category.sub}
+                            {call name=categories_top categories=$category.sub level=$level+1}
+                        {/if}
+                    {/block}
+                </li>
+
+                *}
+            {/foreach}
+        {/block}
+    </ul>
+{/function}
+
+<div class="advanced-menu" data-advanced-menu="true" data-hoverDelay="{$hoverDelay}">
+    {block name="frontend_plugins_advanced_menu"}
+        {foreach $sAdvancedMenu as $mainCategory}
+            {if !$mainCategory.active || $mainCategory.hideTop}
+                {continue}
+            {/if}
+
+            {$link = $mainCategory.link}
+            {if $mainCategory.external}
+                {$link = $mainCategory.external}
+            {/if}
+
+            {$hasCategories = $mainCategory.activeCategories > 0  && $columnAmount < 4}
+            {$hasTeaser = (!empty($mainCategory.media) || !empty($mainCategory.cmsHeadline) || !empty($mainCategory.cmsText)) && $columnAmount > 0}
+
+            <div class="menu--container">
+                {block name="frontend_plugins_advanced_menu_main_container"}
+                    <div class="button-container">
+                        {block name="frontend_plugins_advanced_menu_button_category"}
+                            <a href="{$link|escapeHtml}" class="button--category" aria-label="{s name="toCategoryBtn" namespace="frontend/plugins/advanced_menu/advanced_menu"}{/s}{$mainCategory.name|escape:'html'}" title="{s name="toCategoryBtn" namespace="frontend/plugins/advanced_menu/advanced_menu"}{/s}{$mainCategory.name|escape:'html'}"{if $mainCategory.external && $category.externalTarget} target="{$mainCategory.externalTarget}"{/if}>
+                                <i class="icon--arrow-right"></i>
+                                {s name="toCategoryBtn" namespace="frontend/plugins/advanced_menu/advanced_menu"}{/s}{$mainCategory.name}
+                            </a>
+                        {/block}
+
+                        {block name="frontend_plugins_advanced_menu_button_close"}
+                            <span class="button--close">
+                                <i class="icon--cross"></i>
+                            </span>
+                        {/block}
+                    </div>
+
+                    {if $hasCategories || $hasTeaser}
+                        <div class="content--wrapper{if $hasCategories} has--content{/if}{if $hasTeaser} has--teaser{/if}">
+                            {if $hasCategories}
+                                {block name="frontend_plugins_advanced_menu_sub_categories"}
+                                    {call name="categories_top" categories=$mainCategory.sub}
+                                {/block}
+                            {/if}
+
+                            {if $hasTeaser}
+                                {block name="frontend_plugins_advanced_menu_teaser"}
+                                    {if $hasCategories}
+                                        <div class="menu--delimiter" style="right: {$columnAmount * 25}%;"></div>
+                                    {/if}
+                                    <div class="menu--teaser"{if $hasCategories} style="width: {$columnAmount * 25}%;"{else} style="width: 100%;"{/if}>
+                                        {if !empty($mainCategory.media)}
+                                            <a href="{$link|escapeHtml}" aria-label="{s name="toCategoryBtn" namespace="frontend/plugins/advanced_menu/advanced_menu"}{/s}{$mainCategory.name|escape:'html'}" title="{s name="toCategoryBtn" namespace="frontend/plugins/advanced_menu/advanced_menu"}{/s}{$mainCategory.name|escape:'html'}" class="teaser--image" style="background-image: url({link file={$mainCategory.media.path}});"{if $mainCategory.external && $category.externalTarget} target="{$mainCategory.externalTarget}"{/if}></a>
+                                        {/if}
+
+                                        {if !empty($mainCategory.cmsHeadline)}
+                                            <div class="teaser--headline">{$mainCategory.cmsHeadline}</div>
+                                        {/if}
+
+                                        {if !empty($mainCategory.cmsText)}
+                                            <div class="teaser--text">
+                                                {$mainCategory.cmsText|strip_tags|truncate:250:"..."}
+                                                <a class="teaser--text-link" href="{$link|escapeHtml}" aria-label="{s name="learnMoreLink" namespace="frontend/plugins/advanced_menu/advanced_menu"}mehr erfahren{/s}" title="{s name="learnMoreLink" namespace="frontend/plugins/advanced_menu/advanced_menu"}mehr erfahren{/s}">
+                                                    {s name="learnMoreLink" namespace="frontend/plugins/advanced_menu/advanced_menu"}mehr erfahren{/s}
+                                                </a>
+                                            </div>
+                                        {/if}
+                                    </div>
+                                {/block}
+                            {/if}
+                        </div>
+                    {/if}
+                {/block}
+            </div>
+        {/foreach}
+    {/block}
+</div>
--- a/widgets/checkout/info.tpl
+++ b/widgets/checkout/info.tpl
@ -1,23 +1,26 @@
-{extends file="parent:widgets/checkout/info.tpl"}
+{* extends file="parent:widgets/checkout/info.tpl" *}

-{* Notepad entry *}
-{block name="frontend_index_checkout_actions_notepad"}
-    <li class="navigation--entry entry--delivery">
-        <span class="cds--info-block">
-            <span class="sw-icon-set icon--truck"></span>
-            <span class="info--delivery">
-                <span class="cds--upper cds--bold cds--block cds--justify">{s name="DeliveryGermanyHead" namespace="widgets/checkout/info"}{/s}</span>
-                <span class="cds--block cds--justify">{s name="DeliveryGermanyHead2" namespace="widgets/checkout/info"}{/s}</span>
+{* Cart entry *}
+{block name="frontend_index_checkout_actions_cart"}
+    <li class="navigation--entry entry--cart" role="menuitem">
+        {s namespace="frontend/index/checkout_actions" name="IndexLinkCart" assign="snippetIndexLinkCart"}{/s}
+        <a class="btn is--icon-left cart--link" href="{url controller='checkout' action='cart'}" title="{$snippetIndexLinkCart|escape}" aria-label="{$snippetIndexLinkCart|escape}">
+            <span class="cart--display">
+                {if $sUserLoggedIn}
+                    {s name='IndexLinkCheckout' namespace='frontend/index/checkout_actions'}{/s}
+                {else}
+                    {s namespace='frontend/index/checkout_actions' name='IndexLinkCart'}{/s}
+                {/if}
            </span>
-        </span>
-    </li>
-    <li class="navigation--entry entry--support">
-        <span class="cds--info-block">
-            <span class="sw-icon-set icon--phone"></span>
-            <span class="info--support">
-                {s name="PhoneNumberSupport" namespace="widgets/checkout/info"}{/s}
+
+            <span class="badge is--primary is--minimal cart--quantity{if $sBasketQuantity < 1} is--hidden{/if}">{$sBasketQuantity}</span>
+
+            <span class="wbn-icon-set wbn-icon-basket"></span>
+            <span class="cart--amount">
+                {$sBasketAmount|currency} {s name="Star" namespace="frontend/listing/box_article"}{/s}
            </span>
-        </span>
+        </a>
+        <div class="ajax-loader">&nbsp;</div>
    </li>
 {/block}

@ -76,28 +79,29 @@
    </li>
 {/block}

-{* Cart entry *}
-{block name="frontend_index_checkout_actions_cart"}
-    <li class="navigation--entry entry--cart" role="menuitem">
-        {s namespace="frontend/index/checkout_actions" name="IndexLinkCart" assign="snippetIndexLinkCart"}{/s}
-        <a class="btn is--icon-left cart--link" href="{url controller='checkout' action='cart'}" title="{$snippetIndexLinkCart|escape}" aria-label="{$snippetIndexLinkCart|escape}">
-            <span class="cart--display">
-                {if $sUserLoggedIn}
-                    {s name='IndexLinkCheckout' namespace='frontend/index/checkout_actions'}{/s}
-                {else}
-                    {s namespace='frontend/index/checkout_actions' name='IndexLinkCart'}{/s}
-                {/if}
+{* Notepad entry *}
+{block name="frontend_index_checkout_actions_notepad"}
+    <li class="navigation--entry entry--support">
+        <span class="cds--info-block">
+            <span class="sw-icon-set icon--phone"></span>
+            <span class="info--support">
+                <a href="tel:{s name="PhoneNumberSupportLink" namespace="widgets/checkout/info"}{/s}"
+                   title="{s name="SupportLinkTitle" namespace="widgets/checkout/info"}{/s}">
+                    {s name="PhoneNumberSupport" namespace="widgets/checkout/info"}{/s}
+                </a>
            </span>
-
-            <span class="badge is--primary is--minimal cart--quantity{if $sBasketQuantity < 1} is--hidden{/if}">{$sBasketQuantity}</span>
-
-            <span class="wbn-icon-set wbn-icon-basket"></span>
-            <span class="cart--amount">
-                {$sBasketAmount|currency} {s name="Star" namespace="frontend/listing/box_article"}{/s}
+        </span>
+    </li>
+    <li class="navigation--entry entry--delivery">
+        <span class="cds--info-block">
+            <span class="sw-icon-set icon--truck"></span>
+            <span class="info--delivery">
+                <span class="cds--upper cds--bold cds--block cds--justify">{s name="DeliveryGermanyHead" namespace="widgets/checkout/info"}{/s}</span>
+                <span class="cds--block cds--justify">{s name="DeliveryGermanyHead2" namespace="widgets/checkout/info"}{/s}</span>
            </span>
-        </a>
-        <div class="ajax-loader">&nbsp;</div>
+        </span>
    </li>
 {/block}

+
 {block name="frontend_index_checkout_actions_inner"}{/block}