From f320ce5cd6ce8dee6c98fb738e558387e878e496 Mon Sep 17 00:00:00 2001
From: "michael.daniel" <michael@pcsg.de>
Date: Wed, 31 Jul 2019 15:57:18 +0200
Subject: [PATCH] feat: Button basket and language switch optimized
(performance, no "jump" effect).
---
bin/css/style.css | 21 ++++++++++++++++++-
bin/javascript/init.js | 13 ++++++------
index.html | 7 ++++---
index.php | 35 +++++++++++++++++++++----------
src/QUI/TemplateCologne/Utils.php | 30 +++++++++++---------------
template/menu/menuSuffix.html | 20 +++++++++++++++++-
6 files changed, 86 insertions(+), 40 deletions(-)
diff --git a/bin/css/style.css b/bin/css/style.css
index b0f2b2e..48f88fc 100644
--- a/bin/css/style.css
+++ b/bin/css/style.css
@@ -855,7 +855,6 @@ a.toTop:before {
}
/* user & basket container */
-
.cologne-header-control {
align-items: center;
display: flex;
@@ -868,6 +867,21 @@ a.toTop:before {
width: 200px;
}
+.quiqqer-order-basketButton {
+ cursor: pointer;
+ padding-right: 5px;
+ position: relative;
+}
+
+/* fix: without it jumping effect */
+/* todo bei Gelegenheit das fixen. Oder Basket Button wird php-seitig erstellt */
+/* dann wird das unnötigt */
+.tpl-btn.quiqqer-order-basketButton {
+ display: flex;
+ align-items: center;
+}
+/* end fix */
+
.tpl-btn.quiqqer-order-basketButton {
background: none;
border: 1px solid #ddd;
@@ -894,6 +908,11 @@ a.toTop:before {
.basket-style-full .quiqqer-order-basketButton-sum {
border-left: 1px solid #ddd;
padding-left: 10px;
+ min-width: 80px;
+}
+
+.tpl-btn.quiqqer-order-basketButton .quiqqer-order-basketButton-quantity {
+ margin-right: 20px;
}
/* style: compact */
diff --git a/bin/javascript/init.js b/bin/javascript/init.js
index 059bb21..f7cb65f 100644
--- a/bin/javascript/init.js
+++ b/bin/javascript/init.js
@@ -133,7 +133,7 @@ window.addEvent('domready', function () {
'package/quiqqer/order/bin/frontend/controls/basket/Button'
], function (Basket) {
new Basket({
- open : basketOpen.toInt(),
+ open : BASKET_OPEN.toInt(),
styles: {
float: 'right'
},
@@ -142,8 +142,8 @@ window.addEvent('domready', function () {
var BasketNode = Basket.getElm(),
basketStyleCss = '';
- if (basketStyle) {
- basketStyleCss = 'basket-style-' + basketStyle;
+ if (BASKET_STYLE) {
+ basketStyleCss = 'basket-style-' + BASKET_STYLE;
}
// clear default content
@@ -160,13 +160,14 @@ window.addEvent('domready', function () {
html : '0'
}).inject(BasketNode);
- if (basketStyle && basketStyle === 'full') {
+ if (BASKET_STYLE && BASKET_STYLE === 'full') {
new Element('span', {
'class': 'quiqqer-order-basketButton-sum',
- html : '---',
- styles : {}
+ html : INITAL_BASKET_PRICE
}).inject(BasketNode);
}
+
+ document.getElement('.cologne-header-control-basket').set('html', '');
},
/**
* onShowBasketBegin event
diff --git a/index.html b/index.html
index f8009b5..3f7db20 100644
--- a/index.html
+++ b/index.html
@@ -27,9 +27,10 @@
{$settingsCSS}
<script>
- var basketStyle = "{$basketStyle}";
- var basketOpen = "{$basketOpen}";
- var COUNT_LANGUAGES = "{$countLanguages}";
+ var BASKET_STYLE = "{$basketStyle}";
+ var BASKET_OPEN = "{$basketOpen}";
+ var INITAL_BASKET_PRICE = "{$initialBasketPrice}";
+ var COUNT_LANGUAGES = "{$countLanguages}";
</script>
</head>
diff --git a/index.php b/index.php
index 36e5fda..b06c8fb 100644
--- a/index.php
+++ b/index.php
@@ -7,6 +7,14 @@
QUI\Utils\Site::setRecursiveAttribute($Site, 'image_emotion');
QUI\Utils\Site::setRecursiveAttribute($Site, 'layout');
+/**
+ * Template config
+ */
+$templateSettings = QUI\TemplateCologne\Utils::getConfig([
+ 'Project' => $Project,
+ 'Site' => $Site,
+]);
+
/**
* Header
*/
@@ -16,13 +24,27 @@
'Project' => $Site->getProject()
]);
-// header logo
+/**
+ * Basket button
+ */
$EngineForMenu = QUI::getTemplateManager()->getEngine();
+$Currency = QUI\ERP\Currency\Handler::getUserCurrency();
+
+if (!$Currency) {
+ $Currency = QUI\ERP\Currency\Handler::getDefaultCurrency();
+}
+
+$InitialBasketPrice = new QUI\ERP\Money\Price(0, $Currency);
+
$EngineForMenu->assign([
- 'Logo' => $Project->getMedia()->getLogoImage()
+ 'Logo' => $Project->getMedia()->getLogoImage(),
+ 'basketStyle' => $templateSettings['basketStyle'],
+ 'InitialBasketPrice' => $InitialBasketPrice
]);
+$templateSettings['initialBasketPrice'] = $InitialBasketPrice->getDisplayPrice();
+
$Menu->prependHTML($EngineForMenu->fetch(\dirname(__FILE__) . '/template/menu/menuPrefix.html'));
$Menu->appendHTML($EngineForMenu->fetch(\dirname(__FILE__) . '/template/menu/menuSuffix.html'));
@@ -51,15 +73,6 @@
'all' => true
]);
-/**
- * Template config
- */
-$templateSettings = QUI\TemplateCologne\Utils::getConfig([
- 'Project' => $Project,
- 'Site' => $Site,
- 'Template' => $Template
-]);
-
/**
* Lang currency swtich control
diff --git a/src/QUI/TemplateCologne/Utils.php b/src/QUI/TemplateCologne/Utils.php
index d52f89d..4d89234 100644
--- a/src/QUI/TemplateCologne/Utils.php
+++ b/src/QUI/TemplateCologne/Utils.php
@@ -68,19 +68,15 @@ public static function getConfig($params)
try {
return QUI\Cache\Manager::get(
- 'quiqqer/templateCologne/'.$Site->getId()
+ 'quiqqer/templateCologne/' . $Site->getId()
);
} catch (QUI\Exception $Exception) {
}
-
$config = [];
/* @var $Project QUI\Projects\Project */
- /* @var $Template QUI\Template() */
- /* @var $Template QUI\Template() */
- $Project = $params['Project'];
- $Template = $params['Template'];
+ $Project = $params['Project'];
/**
* no header?
@@ -178,21 +174,19 @@ public static function getConfig($params)
// predefined footer
$config += self::getPredefinedFooter($Project);
- $config += [
- 'header' => $header,
- 'pageTitle' => $pageTitle,
- 'showBreadcrumb' => $showBreadcrumb,
- 'settingsCSS' => '<style>'.$settingsCSS.'</style>',
- 'typeClass' => 'type-'.str_replace(['/', ':'], '-', $Site->getAttribute('type')),
- 'siteType' => $siteType,
- 'basketStyle' => $basketStyle,
- 'basketOpen' => $basketOpen,
- 'showCategoryMenu' => $showCategoryMenu
- ];
+ $config['header'] = $header;
+ $config['pageTitle'] = $pageTitle;
+ $config['showBreadcrumb'] = $showBreadcrumb;
+ $config['settingsCSS'] = '<style>' . $settingsCSS . '</style>';
+ $config['typeClass'] = 'type-' . str_replace(['/', ':'], '-', $Site->getAttribute('type'));
+ $config['siteType'] = $siteType;
+ $config['basketStyle'] = $basketStyle;
+ $config['basketOpen'] = $basketOpen;
+ $config['showCategoryMenu'] = $showCategoryMenu;
// set cache
QUI\Cache\Manager::set(
- 'quiqqer/templateCologne/'.$Site->getId(),
+ 'quiqqer/templateCologne/' . $Site->getId(),
$config
);
diff --git a/template/menu/menuSuffix.html b/template/menu/menuSuffix.html
index 646aa6f..20e1226 100644
--- a/template/menu/menuSuffix.html
+++ b/template/menu/menuSuffix.html
@@ -1,3 +1,21 @@
<div class="cologne-header-control">
- <div class="cologne-header-control-basket"></div>
+ <div class="cologne-header-control-basket">
+ {if $basketStyle == 'compact'}
+ <button disabled class="quiqqer-order-basketButton button--callToAction tpl-btn basket-style-{$basketStyle}"
+ data-quiid="jyr6toys" style="float: right;"><span class="quiqqer-order-basketButton-icon-custom"><span
+ class="fa fa-shopping-basket"></span></span><span
+ class="quiqqer-order-basketButton-quantity quiqqer-order-basketButton-batch-custom">0</span></button>
+ {else}
+ <button disabled class="quiqqer-order-basketButton button--callToAction tpl-btn basket-style-full" data-quiid="jyr7g3hr"
+ style="float: right;">
+ <span class="quiqqer-order-basketButton-icon-custom">
+ <span class="fa fa-shopping-basket"></span>
+ </span>
+ <span class="quiqqer-order-basketButton-quantity quiqqer-order-basketButton-batch-custom">0</span>
+ <span class="quiqqer-order-basketButton-sum">
+ {$InitialBasketPrice->getDisplayPrice()}
+ </span>
+ </button>
+ {/if}
+ </div>
</div>
\ No newline at end of file
--
GitLab