feat: Shop category menu improved. Button in template added.

bin/css/cologne.blue.css

@@ -9,7 +9,8 @@ a:hover,
 .lcs-button:hover,
 .lcs-button:hover .lcs-button-currency-code,
 .lcs-button:active .lcs-button-currency-code,
-.lcs-button:active {
+.lcs-button:active,
+.shop-category-menu-button:hover {
     color: #3986dd;
 }
 

bin/css/style.css

@@ -665,6 +665,24 @@ a.toTop:before {
     margin-top: 2rem;
 }
 
+/**********************/
+/* Shop category menu */
+/**********************/
+/* button */
+.shop-category-menu-button-wrapper {
+    border-right: 1px solid #ddd;
+}
+
+.shop-category-menu-button {
+    padding: 0 30px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 1.2rem;
+}
+
 /** Mega Menu
  ===================================== */
 .quiqqer-menu-megaMenu nav {
@@ -676,10 +694,10 @@ a.toTop:before {
 .cologne-header-nav {
     height: 100%;
     left: 0;
-    position: absolute;
     right: 0;
     text-align: center;
     z-index: 1;
+    width: 100%;
 }
 
 .cologne-header-nav .quiqqer-menu-megaMenu {

bin/javascript/controls/Menu/Categories.js

 /**
- * @module package/quiqqer/product-bricks/bin/controls/Menu/Categories
+ * @module package/quiqqer/template-cologne/bin/javascript/controls/Menu/Categories
  *
  * This modul provides the functionality for slide out menu of product categories.
  *
@@ -18,12 +18,12 @@ define('package/quiqqer/template-cologne/bin/javascript/controls/Menu/Categories
     return new Class({
 
         Extends: SlideOut,
-        Type   : 'package/quiqqer/template-cologne/bin/javascript/controls/LangCurrencySwitch',
+        Type   : 'package/quiqqer/template-cologne/bin/javascript/controls/Menu/Categories',
 
         Binds: [],
 
         options: {
-            top: 50
+            'menu-button' : false
         },
 
         initialize: function (options) {
@@ -33,7 +33,30 @@ define('package/quiqqer/template-cologne/bin/javascript/controls/Menu/Categories
             this.addEvents({
                 onImport: this.$onImport
             });
+        },
+
+        /**
+         * event : on import
+         */
+        $onImport: function () {
+            this.parent();
+
+            var self = this;
+
+            this.Slideout.on('beforeopen', function () {
+                self.getElm().getElement('nav').setStyle('display', null);
+
+            });
+
+            var openButtons = document.getElements('.shop-category-menu-button');
+
+            if (openButtons) {
+                openButtons.each(function (Button) {
+                    Button.addEvent('click', self.toggle);
+                });
+            }
+
         }
-    });
+    })
 });
 

index.html

@@ -43,10 +43,15 @@
 <div>
     {fetch template="template/mainMenu.html" Project=$Project Menu=$Menu}
 </div>
+
 {if $header == 'afterNav' && $Site->getAttribute('image_emotion')}
     {fetch template="template/pageHeader.html" Site=$Site}
 {/if}
 
+<div class="shop-category-menu-wrapper">
+    {* shop category menu *}
+    {$CategoriesMenu->create()}
+</div>
 <!-- breadcrumb -->
 {if $showBreadcrumb}
     {fetch template="template/breadcrumb.html" Site=$Site}

index.php

@@ -3,9 +3,16 @@
 /**
  * Emotion
  */
+
+
 QUI\Utils\Site::setRecursiveAttribute($Site, 'image_emotion');
 QUI\Utils\Site::setRecursiveAttribute($Site, 'layout');
 
+/**
+ * Categories Menu
+ */
+$CategoriesMenu = new QUI\TemplateCologne\Controls\Menu\Categories();
+
 /**
  * Header
  */
@@ -19,7 +26,7 @@
 $EngineForMenu = QUI::getTemplateManager()->getEngine();
 
 $EngineForMenu->assign([
-    'Logo' => $Project->getMedia()->getLogoImage()
+    'Logo'           => $Project->getMedia()->getLogoImage()
 ]);
 
 $Menu->prependHTML($EngineForMenu->fetch(dirname(__FILE__) . '/template/menu/menuPrefix.html'));
@@ -40,11 +47,6 @@
         break;
 };
 
-/**
- * Categories Menu
- */
-$CategoriesMenu = new QUI\TemplateCologne\Controls\Menu\Categories();
-
 /**
  * Flags
  */
@@ -74,6 +76,6 @@
 $templateSettings['productPage']        = $productPage;
 $templateSettings['Flags']              = $Flags;
 $templateSettings['LangCurrencySwitch'] = $LangCurrencySwitch;
-$templateSettings['CategoriesMenu']     = $CategoriesMenu;
+$templateSettings['CategoriesMenu'] = $CategoriesMenu;
 
 $Engine->assign($templateSettings);

src/QUI/TemplateCologne/Controls/Menu/Categories.Menu.html

@@ -10,25 +10,27 @@
 {if count($children)}
 <ul class="page-navigation-level-{$level}">
     {foreach from=$children item=Child}
-    <li>
-        <a href="{url site=$Child}" class="left-menu-a">
-            {if $ActiveSite->getId() == $Child->getId()}
-            <span class="fa fa-chevron-right"></span>
-            {else}
-            <span class="fa fa-angle-right"></span>
-            {/if}
+        {if $Child->getAttribute('type') == 'quiqqer/products:types/category'}
+        <li>
+            <a href="{url site=$Child}" class="">
+                {if $ActiveSite->getId() == $Child->getId()}
+                <span class="fa fa-chevron-right"></span>
+                {else}
+                <span class="fa fa-angle-right"></span>
+                {/if}
 
-            <span class="left-menu-text">
-                {$Child->getAttribute('title')}
-            </span>
-        </a>
+                <span class="left-menu-text">
+                    {$Child->getAttribute('title')}
+                </span>
+            </a>
 
-        {include file="`$menuFile`"
-            Site=$Child
-            ActiveSite=$ActiveSite
-            level=$level
-        }
-    </li>
+            {include file="`$menuFile`"
+                Site=$Child
+                ActiveSite=$ActiveSite
+                level=$level
+            }
+        </li>
+        {/if}
     {/foreach}
 </ul>
 {/if}

src/QUI/TemplateCologne/Controls/Menu/Categories.html

-<nav class="page-menu TEST"  style="display: none">
-
-    <div class="page-navigation">
+<nav class="page-menu" style="display: none">
+    <h2>Bitte...</h2>
+    <p>Design kommt noch</p>
+    <div class="page-navigationnn">
 
         <a href="{url site=$Project->firstChild()}" class="page-navigation-home">
             <span class="fa fa-home"></span>

template/mainMenu.html

 <header class="cologne-header cologne-header-menu template-columns">
+
+    {* shop category menu *}
+    <div class="shop-category-menu-button-wrapper">
+        <span class="shop-category-menu-button"><span class="fa fa-bars"></span></span>
+    </div>
+
     <div class="template-column cologne-header-nav">
         {$Menu->create()}
     </div>

template/menu/menuPrefix.html

 <div class="cologne-header-logo">
-    {$CategoriesMenu->create()}
     <a href="/" class="cologne-header-logo-link">
         {image image=$Logo class="logo"}
     </a>