From 4b7fcbff9a1b4f0e72cb4d0fd5f662577cfec751 Mon Sep 17 00:00:00 2001
From: "michael.daniel" <michael@pcsg.de>
Date: Thu, 6 Jun 2019 16:40:40 +0200
Subject: [PATCH] feat: Shop category menu improved. Button in template added.
---
bin/css/cologne.blue.css | 3 +-
bin/css/style.css | 20 ++++++++++-
bin/javascript/controls/Menu/Categories.js | 31 +++++++++++++---
index.html | 5 +++
index.php | 16 +++++----
.../Controls/Menu/Categories.Menu.html | 36 ++++++++++---------
.../Controls/Menu/Categories.html | 7 ++--
template/mainMenu.html | 6 ++++
template/menu/menuPrefix.html | 1 -
9 files changed, 91 insertions(+), 34 deletions(-)
diff --git a/bin/css/cologne.blue.css b/bin/css/cologne.blue.css
index b024d35..0159517 100644
--- a/bin/css/cologne.blue.css
+++ b/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;
}
diff --git a/bin/css/style.css b/bin/css/style.css
index 7725c62..c6b750b 100644
--- a/bin/css/style.css
+++ b/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 {
diff --git a/bin/javascript/controls/Menu/Categories.js b/bin/javascript/controls/Menu/Categories.js
index daf1ead..eff046b 100644
--- a/bin/javascript/controls/Menu/Categories.js
+++ b/bin/javascript/controls/Menu/Categories.js
@@ -1,5 +1,5 @@
/**
- * @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);
+ });
+ }
+
}
- });
+ })
});
diff --git a/index.html b/index.html
index 32fda01..504aec6 100644
--- a/index.html
+++ b/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}
diff --git a/index.php b/index.php
index ec38867..b6ac65e 100644
--- a/index.php
+++ b/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);
diff --git a/src/QUI/TemplateCologne/Controls/Menu/Categories.Menu.html b/src/QUI/TemplateCologne/Controls/Menu/Categories.Menu.html
index e8df3ac..fda087e 100644
--- a/src/QUI/TemplateCologne/Controls/Menu/Categories.Menu.html
+++ b/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}
diff --git a/src/QUI/TemplateCologne/Controls/Menu/Categories.html b/src/QUI/TemplateCologne/Controls/Menu/Categories.html
index 886f368..4000693 100644
--- a/src/QUI/TemplateCologne/Controls/Menu/Categories.html
+++ b/src/QUI/TemplateCologne/Controls/Menu/Categories.html
@@ -1,6 +1,7 @@
-<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>
diff --git a/template/mainMenu.html b/template/mainMenu.html
index b2e71fd..9aedc91 100644
--- a/template/mainMenu.html
+++ b/template/mainMenu.html
@@ -1,4 +1,10 @@
<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>
diff --git a/template/menu/menuPrefix.html b/template/menu/menuPrefix.html
index 0c4652d..71391a3 100644
--- a/template/menu/menuPrefix.html
+++ b/template/menu/menuPrefix.html
@@ -1,5 +1,4 @@
<div class="cologne-header-logo">
- {$CategoriesMenu->create()}
<a href="/" class="cologne-header-logo-link">
{image image=$Logo class="logo"}
</a>
--
GitLab