diff --git a/bin/frontend/controls/orderProcess/Login.js b/bin/frontend/controls/orderProcess/Login.js
index e0a2018ecb97c12e034ea3ff6de9af2ed92d3fbf..ecf0116d10528284ed7fb0d0a97cf91d11943964 100644
--- a/bin/frontend/controls/orderProcess/Login.js
+++ b/bin/frontend/controls/orderProcess/Login.js
@@ -5,26 +5,42 @@
define('package/quiqqer/order/bin/frontend/controls/orderProcess/Login', [
'qui/QUI',
- 'qui/controls/Control'
+ 'qui/controls/Control',
+ URL_OPT_DIR + 'bin/quiqqer-asset/animejs/animejs/lib/anime.min.js',
-], function (QUI, QUIControl) {
+], function (QUI, QUIControl, animejs) {
"use strict";
return new Class({
Extends: QUIControl,
- Type : 'package/quiqqer/order/bin/frontend/controls/orderProcess/Login',
+ Type: 'package/quiqqer/order/bin/frontend/controls/orderProcess/Login',
Binds: [
- '$onImport'
+ '$onImport',
+ '$resize',
+ 'toggle',
+ '$mouseMoveHandler',
+ '$mouseDownHandler',
+ '$mouseUpHandler'
],
initialize: function (options) {
this.parent(options);
+ this.Nav = null;
+ this.navEntries = [];
+ this.Main = null;
+ this.mainEntries = [];
+ this.ActiveNavEntry = null;
+ this.ActiveMainEntry = null;
+ this.clicked = false;
+
this.addEvents({
onImport: this.$onImport
});
+
+ QUI.addEvent('resize', this.$resize);
},
/**
@@ -42,8 +58,346 @@ define('package/quiqqer/order/bin/frontend/controls/orderProcess/Login', [
MailRegister.set('data-no-blur-check', 1);
});
});
+
+ this.initTabs();
+ },
+
+ // region tabs
+
+ /**
+ * Init clickable tabs functionality
+ */
+ initTabs: function () {
+ const Elm = this.getElm();
+ const self = this;
+
+ this.Nav = Elm.querySelector('.quiqqer-order-ordering-nobody__aside > ul');
+ this.navEntries = Elm.querySelectorAll('.quiqqer-order-ordering-nobody-asideNav__entry');
+ this.Main = Elm.querySelector('.quiqqer-order-ordering-nobody__main > ul');
+ this.mainEntries = Elm.querySelectorAll('.quiqqer-order-ordering-nobody-main__item');
+ this.ActiveNavEntry = Elm.querySelector('.quiqqer-order-ordering-nobody-asideNav__entry.active');
+ this.ActiveMainEntry = Elm.querySelector('.quiqqer-order-ordering-nobody-main__item.active');
+
+ if (!this.navEntries || !this.mainEntries) {
+ return;
+ }
+
+ // scroll active nav elm to the left by page load
+ this.$setNavItemPos(this.ActiveNavEntry);
+
+ const clickEvent = function (event) {
+ event.stop();
+
+ if (self.clicked) {
+ return;
+ }
+
+ self.clicked = true;
+
+ let NavItem = event.target;
+
+ if (NavItem.nodeName !== 'LI') {
+ NavItem = NavItem.getParent('li');
+ }
+
+ let target = NavItem.getElement('a').getAttribute("href");
+
+ if (target.indexOf('#') === 0) {
+ target = target.substring(1);
+ }
+
+ if (!target) {
+ self.clicked = false;
+ return;
+ }
+
+ self.$setNavItemPos(NavItem);
+ self.toggle(NavItem, target);
+
+ const url = window.location.href;
+ const newUrl = url.split('?')[0] + '?open=' + target;
+
+ history.pushState(null, null, newUrl);
+ };
+
+ this.navEntries.forEach((NavEntry) => {
+ NavEntry.addEvent('click', clickEvent);
+ });
+
+ this.$resize();
+ },
+
+ $resize: function () {
+ if (this.enableDragToScroll !== 1) {
+ return;
+ }
+
+ if (this.navTab.scrollWidth > this.navTab.clientWidth) {
+ this.navTab.addEventListener('mousedown', this.$mouseDownHandler);
+ } else {
+ this.navTab.removeEventListener('mousedown', this.$mouseDownHandler);
+ }
+ },
+
+ /**
+ * Toggle nav and main content
+ *
+ * @param NavItem HTMLNode
+ * @param target string
+ */
+ toggle: function (NavItem, target) {
+ if (NavItem.hasClass('active')) {
+ this.clicked = false;
+ return;
+ }
+
+ const Content = this.getElm().getElement('[id="' + target + '"]');
+
+ if (!Content) {
+ this.clicked = false;
+ return;
+ }
+
+ const self = this;
+
+ this.Main.setStyle('height', this.Main.offsetHeight);
+
+ Promise.all([
+ this.disableNavItem(this.ActiveNavEntry),
+ this.hideContent(this.ActiveMainEntry)
+ ]).then(function () {
+ Content.setStyle('display', null);
+
+ return Promise.all([
+ self.enableNavItem(NavItem),
+ self.showContent(Content),
+ self.$setHeight(Content.offsetHeight)
+ ]);
+ }).then(function () {
+ self.clicked = false;
+ self.Main.setStyle('height', null);
+ });
+ },
+
+ /**
+ * Make item inactive
+ *
+ * @param Item HTMLNode
+ * @return Promise
+ */
+ disableNavItem: function (Item) {
+ Item.removeClass('active');
+
+ return Promise.resolve();
+ },
+
+ /**
+ * Make nav item active
+ *
+ * @param Item HTMLNode
+ * @return Promise
+ */
+ enableNavItem: function (Item) {
+ Item.addClass('active');
+ this.ActiveNavEntry = Item;
+
+ return Promise.resolve();
+ },
+
+ /**
+ * Hide tab content
+ *
+ * @param Item HTMLNode
+ * @return Promise
+ */
+ hideContent: function (Item) {
+ return new Promise((resolve) => {
+ this.$slideFadeOut(Item).then(function () {
+ Item.removeClass('active');
+ Item.setStyle('display', 'none');
+
+ resolve();
+ });
+ });
+ },
+
+ /**
+ * Show tab content
+ *
+ * @param Item HTMLNode
+ * @return Promise
+ */
+ showContent: function (Item) {
+ return new Promise((resolve) => {
+ this.$slideFadeIn(Item).then(() => {
+ Item.style.display = null;
+ Item.style.opacity = null;
+ Item.addClass('active');
+ this.ActiveMainEntry = Item;
+
+ resolve();
+ });
+ });
+ },
+
+ /**
+ * Set height of tab content container
+ *
+ * @param height integer
+ * @return Promise
+ */
+ $setHeight: function (height) {
+ return this.$animate(this.Main, {
+ height: height
+ });
+ },
+
+ /**
+ * Fade out animation (hide)
+ *
+ * @param Item HTMLNode
+ * @return Promise
+ */
+ $slideFadeOut: function (Item) {
+ return this.$animate(Item, {
+ opacity : 0,
+ translateX: -5,
+
+ });
+ },
+
+ /**
+ * Fade in animation (show)
+ *
+ * @param Item HTMLNode
+ * @return Promise
+ */
+ $slideFadeIn: function (Item) {
+ Item.setStyles({
+ transform: 'translateX(-5px)',
+ opacity : 0
+ });
+
+ return this.$animate(Item, {
+ translateX: 0,
+ opacity : 1
+ });
+ },
+
+ /**
+ * Scroll active nav item to the left edge (on mobile)
+ *
+ * @param Item
+ */
+ $setNavItemPos: function (Item) {
+ if (!Item) {
+ return;
+ }
+
+ if (QUI.getWindowSize().x > 767) {
+ return;
+ }
+
+ const paddingLeft = window.getComputedStyle(this.Nav, null).getPropertyValue('padding-left'),
+ marginLeft = window.getComputedStyle(Item, null).getPropertyValue('padding-left'),
+ itemLeftPos = Item.offsetLeft - this.Nav.getBoundingClientRect().left;
+
+ new Fx.Scroll(this.Nav).start(itemLeftPos - parseInt(paddingLeft) - parseInt(marginLeft), 0);
},
+ /**
+ * Check if element is in viewport
+ * @param element
+ * @return {boolean}
+ */
+ $isInViewport: function (element) {
+ const rect = element.getBoundingClientRect();
+
+ return (
+ rect.top >= 0 &&
+ rect.left >= 0 &&
+ rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+ rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+ );
+ },
+
+ $animate: function (Target, options) {
+ return new Promise(function (resolve) {
+ options = options || {};
+ options.targets = Target;
+ options.complete = resolve;
+ options.duration = options.duration || 250;
+ options.easing = options.easing || 'easeInQuad';
+
+ animejs(options);
+ });
+ },
+
+ // endregion
+
+ // region drag to scroll
+
+ /**
+ * Init drag to scroll
+ */
+ $initDragToScroll: function () {
+ if (this.navTab.scrollWidth <= this.navTab.clientWidth) {
+ return;
+ }
+
+ this.navTab.addEventListener('mousedown', this.$mouseDownHandler);
+ },
+
+ /**
+ * Move handler
+ *
+ * @param e
+ */
+ $mouseMoveHandler: function (e) {
+ // How far the mouse has been moved
+ const dx = e.clientX - this.navPos.x;
+
+ if (this.navPos.x !== dx) {
+ this.clicked = true;
+ }
+
+ // Scroll the element
+ this.navTab.scrollLeft = this.navPos.left - dx;
+ },
+
+ /**
+ * Mouse down handler
+ *
+ * @param e
+ */
+ $mouseDownHandler: function (e) {
+ this.navTab.style.userSelect = 'none';
+
+ this.navPos = {
+ left: this.navTab.scrollLeft, // The current scroll
+ x : e.clientX, // Get the current mouse position
+ };
+
+ document.addEventListener('mousemove', this.$mouseMoveHandler);
+ document.addEventListener('mouseup', this.$mouseUpHandler);
+ },
+
+ /**
+ * Mouse up handler
+ */
+ $mouseUpHandler: function () {
+ document.removeEventListener('mousemove', this.$mouseMoveHandler);
+ document.removeEventListener('mouseup', this.$mouseUpHandler);
+
+ this.navTab.style.removeProperty('user-select');
+
+ setTimeout(() => {
+ this.clicked = false;
+ }, 50);
+ },
+
+ // endregion
+
/**
* @return {Promise|*}
*/
@@ -72,7 +426,7 @@ define('package/quiqqer/order/bin/frontend/controls/orderProcess/Login', [
var EmailRegister = Signup.getElm().getElement(
'.quiqqer-fu-registrationSignUp-registration-email [name="email"]'
);
-
+
if (!EmailRegister) {
return Promise.resolve(false);
}
diff --git a/locale.xml b/locale.xml
index ef066135f23f5c1704740ce82a6395a83ae98807..ee8ed19cc5f3cb25df3846c9632357f7e84d1f79 100644
--- a/locale.xml
+++ b/locale.xml
@@ -375,6 +375,31 @@
<en><![CDATA[---]]></en>
</locale>
+ <locale name="ordering.nobody.nav.login.title">
+ <de><![CDATA[Anmelden]]></de>
+ <en><![CDATA[Log in]]></en>
+ </locale>
+ <locale name="ordering.nobody.nav.login.desc">
+ <de><![CDATA[Ich bin bereits Kunde]]></de>
+ <en><![CDATA[I am already a customer]]></en>
+ </locale>
+ <locale name="ordering.nobody.nav.signup.title">
+ <de><![CDATA[Registrieren]]></de>
+ <en><![CDATA[Sign up]]></en>
+ </locale>
+ <locale name="ordering.nobody.nav.signup.desc">
+ <de><![CDATA[Ich möchte Kundenkonto anlegen]]></de>
+ <en><![CDATA[I would like to create a customer account]]></en>
+ </locale>
+ <locale name="ordering.nobody.nav.guest.title">
+ <de><![CDATA[Als Gast bestellen]]></de>
+ <en><![CDATA[Order as a guest]]></en>
+ </locale>
+ <locale name="ordering.nobody.nav.guest.desc">
+ <de><![CDATA[Ich möchte kein Kundenkonto anlegen]]></de>
+ <en><![CDATA[I do not want to create a customer account]]></en>
+ </locale>
+
<locale name="ordering.nobody.login.text.prefix" html="true">
<de><![CDATA[ ]]></de>
<en><![CDATA[ ]]></en>
@@ -391,6 +416,14 @@
<de><![CDATA[ ]]></de>
<en><![CDATA[ ]]></en>
</locale>
+ <locale name="ordering.nobody.guest.text.prefix" html="true">
+ <de><![CDATA[ ]]></de>
+ <en><![CDATA[ ]]></en>
+ </locale>
+ <locale name="ordering.nobody.guest.text.suffix" html="true">
+ <de><![CDATA[ ]]></de>
+ <en><![CDATA[ ]]></en>
+ </locale>
<locale name="filter.status.all">
<de><![CDATA[Status: Alle]]></de>
<en><![CDATA[Status: all]]></en>
diff --git a/src/QUI/ERP/Order/Controls/OrderProcess.Nobody.html b/src/QUI/ERP/Order/Controls/OrderProcess.Nobody.html
index 0461f83215419e6632b5d95bbb7e3f70d51da6a8..ae7b6554ae19bf6b38ea633589689171103003a6 100644
--- a/src/QUI/ERP/Order/Controls/OrderProcess.Nobody.html
+++ b/src/QUI/ERP/Order/Controls/OrderProcess.Nobody.html
@@ -10,42 +10,121 @@
>
{template_event name="quiqqer::order::orderProcess::nobody::begin"}
- <div class="quiqqer-order-ordering-nobody-login">
-
- {assign var=text value={locale group='quiqqer/order' var='ordering.nobody.login.text.prefix'}}
- {if $text != ''}
- <div class="quiqqer-order-ordering-nobody-login-text quiqqer-order-ordering-nobody-login-text__prefix">
- {$text}
- </div>
- {/if}
-
- {$Login->create()}
-
- {assign var=text value={locale group='quiqqer/order' var='ordering.nobody.login.text.suffix'}}
- {if $text != ''}
- <div class="quiqqer-order-ordering-nobody-login-text quiqqer-order-ordering-nobody-login-text__suffix">
- {$text}
- </div>
- {/if}
+ <div class="quiqqer-order-ordering-nobody__aside">
+ <ul>
+ <li class="quiqqer-order-ordering-nobody-asideNav__entry {if $activeEntry == 'login'}active{/if}" data-step-nav="login">
+ <a href="#login">
+ <span class="fa fa-right-to-bracket quiqqer-order-ordering-nobody-asideNav__icon"></span>
+ <div class="quiqqer-order-ordering-nobody-asideNav__label">
+ <span class="quiqqer-order-ordering-nobody-asideNav__title">
+ {locale group='quiqqer/order' var='ordering.nobody.nav.login.title'}
+ </span>
+ <div class="quiqqer-order-ordering-nobody-asideNav__desc">
+ {locale group='quiqqer/order' var='ordering.nobody.nav.login.desc'}
+ </div>
+ </div>
+ </a>
+ </li>
+ <li class="quiqqer-order-ordering-nobody-asideNav__entry {if $activeEntry == 'signup'}active{/if}" data-step-nav="signup">
+ <a href="#signup">
+ <span class="fa fa-user-plus quiqqer-order-ordering-nobody-asideNav__icon"></span>
+ <div class="quiqqer-order-ordering-nobody-asideNav__label">
+ <span class="quiqqer-order-ordering-nobody-asideNav__title">
+ {locale group='quiqqer/order' var='ordering.nobody.nav.signup.title'}
+ </span>
+ <div class="quiqqer-order-ordering-nobody-asideNav__desc">
+ {locale group='quiqqer/order' var='ordering.nobody.nav.signup.desc'}
+ </div>
+ </div>
+ </a>
+ </li>
+
+ {if $guestOrderInstalled}
+ <li class="quiqqer-order-ordering-nobody-asideNav__entry {if $activeEntry == 'guest'}active{/if}" data-step-nav="guest">
+ <a href="#guest">
+ <span class="fa fa-bag-shopping quiqqer-order-ordering-nobody-asideNav__icon"></span>
+ <div class="quiqqer-order-ordering-nobody-asideNav__label">
+ <span class="quiqqer-order-ordering-nobody-asideNav__title">
+ {locale group='quiqqer/order' var='ordering.nobody.nav.guest.title'}
+ </span>
+ <div class="quiqqer-order-ordering-nobody-asideNav__desc">
+ {locale group='quiqqer/order' var='ordering.nobody.nav.guest.desc'}
+ </div>
+ </div>
+ </a>
+ </li>
+ {/if}
+ </ul>
</div>
- <div class="quiqqer-order-ordering-nobody-registration">
+ <div class="quiqqer-order-ordering-nobody__main">
+ <ul class="quiqqer-order-ordering-nobody-main__list">
+ <li class="quiqqer-order-ordering-nobody-main__item {if $activeEntry == 'login'}active{/if}"
+ {if $activeEntry !== 'login'}style="display: none;"{/if}
+ id="login"
+ >
+ {assign var=text value={locale group='quiqqer/order' var='ordering.nobody.login.text.prefix'}}
+ {if $text|trim != ''}
+ {$text|var_dump}
+ <div class="quiqqer-order-ordering-nobody-login-text quiqqer-order-ordering-nobody-login-text__prefix">
+ {$text}
+ </div>
+ {/if}
+
+ {$Login->create()}
+
+ {assign var=text value={locale group='quiqqer/order' var='ordering.nobody.login.text.suffix'}}
+ {if $text|trim != ''}
+ <div class="quiqqer-order-ordering-nobody-login-text quiqqer-order-ordering-nobody-login-text__suffix">
+ {$text}
+ </div>
+ {/if}
+ </li>
+
+ <li class="quiqqer-order-ordering-nobody-main__item {if $activeEntry == 'signup'}active{/if}"
+ {if $activeEntry !== 'signup'}style="display: none;"{/if}
+ id="signup"
+ >
+ {assign var=text value={locale group='quiqqer/order' var='ordering.nobody.registration.text.prefix'}}
+ {if $text|trim != ''}
+ <div class="quiqqer-order-ordering-nobody-registration-text quiqqer-order-ordering-nobody-registration-text__prefix">
+ {$text}
+ </div>
+ {/if}
+
+ {$Registration->create()}
+
+ {locale group='quiqqer/order' var='ordering.nobody.registration.text.suffix' assign=text}
+ {if $text|trim != ''}
+ <div class="quiqqer-order-ordering-nobody-registration-text quiqqer-order-ordering-nobody-registration-text__suffix">
+ {$text}
+ </div>
+ {/if}
+ </li>
- {assign var=text value={locale group='quiqqer/order' var='ordering.nobody.registration.text.prefix'}}
- {if $text != ''}
- <div class="quiqqer-order-ordering-nobody-registration-text quiqqer-order-ordering-nobody-registration-text__prefix">
- {$text}
- </div>
- {/if}
+ {if $GuestOrder}
+ <li class="quiqqer-order-ordering-nobody-main__item {if $activeEntry == 'guest'}active{/if}"
+ {if $activeEntry !== 'guest'}style="display: none;"{/if}
+ id="guest"
+ >
+ {assign var=text value={locale group='quiqqer/order' var='ordering.nobody.guest.text.prefix'}}
+ {if $text|trim != ''}
+ <div class="quiqqer-order-ordering-nobody-registration-text quiqqer-order-ordering-nobody-guest-text__prefix">
+ {$text}
+ </div>
+ {/if}
- {$Registration->create()}
+ {$GuestOrder->create()}
- {assign var=text value={locale group='quiqqer/order' var='ordering.nobody.registration.text.suffix'}}
- {if $text != ''}
- <div class="quiqqer-order-ordering-nobody-registration-text quiqqer-order-ordering-nobody-registration-text__suffix">
- {$text}
- </div>
- {/if}
+ {locale group='quiqqer/order' var='ordering.nobody.guest.text.suffix' assign=text}
+ {if $text|trim != ''}
+ <div class="quiqqer-order-ordering-nobody-registration-text quiqqer-order-ordering-nobody-guest-text__suffix">
+ {$text}
+ </div>
+ {/if}
+ </li>
+ {/if}
+ </ul>
</div>
{template_event name="quiqqer::order::orderProcess::nobody::end"}
diff --git a/src/QUI/ERP/Order/Controls/OrderProcess.css b/src/QUI/ERP/Order/Controls/OrderProcess.css
index 6233d3b04e04dc71b2e7b47094f07aeb33a7b278..2d1bdbdaab9311f7d07ffa0635f7dcd1ef1d5de0 100644
--- a/src/QUI/ERP/Order/Controls/OrderProcess.css
+++ b/src/QUI/ERP/Order/Controls/OrderProcess.css
@@ -220,100 +220,140 @@
}
}
-/** nobody login / registration
- ============================================*/
+/*******************************/
+/* nobody login / registration */
+/*******************************/
.quiqqer-order-ordering-nobody {
+ max-width: 1000px;
+ margin-inline: auto;
display: flex;
- width: 100%;
+ gap: 4rem;
}
-
-.quiqqer-fu-login-container,
-.quiqqer-fu-registrationSignUp {
- margin-left: 1rem;
- margin-right: 1rem;
+/* aside */
+.quiqqer-order-ordering-nobody__aside {
+ width: min(30%, 300px);
}
-.quiqqer-order-ordering-nobody h2 {
- text-align: center;
+.quiqqer-order-ordering-nobody__aside ul {
+ list-style: none;
+ padding: 0;
}
-.quiqqer-order-ordering-nobody form {
- height: initial;
+.quiqqer-order-ordering-nobody-asideNav__entry {
+ margin-bottom: 1em;
}
-.quiqqer-order-ordering-nobody-login,
-.quiqqer-order-ordering-nobody-registration {
+.quiqqer-order-ordering-nobody-asideNav__entry > :where(a) {
display: flex;
- width: 50%;
- flex-direction: column;
+ gap: 1rem;
+ padding: 1em;
+ border-radius: 0.5em;
+ outline-offset: -1px;
+ color: inherit;
+ text-decoration: none;
}
-.quiqqer-order-ordering-nobody-login {
- margin-right: 1rem;
+
+.quiqqer-order-ordering-nobody-asideNav__entry:where(.active) :where(a) {
+ outline: 1px solid;
}
-.quiqqer-order-ordering-nobody-registration {
- margin-left: 1rem;
+.quiqqer-order-ordering-nobody-asideNav__icon {
+ width: 1.5em;
+ font-size: 1.5em;
}
-.quiqqer-order-ordering-nobody .quiqqer-fu-registrationSignUp,
-.quiqqer-order-ordering-nobody .quiqqer-fu-login {
- margin: 0;
+.quiqqer-order-ordering-nobody-asideNav__label {
+ grid-area: title;
}
-.quiqqer-order-ordering-nobody .quiqqer-fu-registrationSignUp-info,
-.quiqqer-order-ordering-nobody .quiqqer-fu-registrationSignUp-registration {
- padding: 0;
+.quiqqer-order-ordering-nobody-asideNav__title {
+ display: block;
+ font-weight: bold;
+ font-size: 1.125em;
+ line-height: 1.25;
+}
+
+.quiqqer-order-ordering-nobody-asideNav__desc {
+ font-size: 0.915rem;
+ opacity: 0.75;
+ line-height: 1.5;
+}
+
+/* main */
+.quiqqer-order-ordering-nobody__main {
+ flex-grow: 1;
}
-.quiqqer-order-ordering-nobody .quiqqer-fu-login .quiqqer-fu-login-social form {
- height: 50px;
+.quiqqer-order-ordering-nobody-main__list {
+ list-style: none;
+ padding: 0;
}
-.quiqqer-fu-login-email-buttons button,
-.quiqqer-fu-registrationSignUp-email-buttons button {
- padding: 0.75rem;
+.quiqqer-order-ordering-nobody-main__item {
+ max-width: 360px;
+ margin-inline: auto;
}
-.quiqqer-order-ordering-nobody-login-text,
-.quiqqer-order-ordering-nobody-registration-text {
- margin-bottom: 2rem
+.quiqqer-order-ordering-nobody-login-text__prefix,
+.quiqqer-order-ordering-nobody-registration-text__prefix,
+.quiqqer-order-ordering-nobody-guest-text__prefix {
+ margin-bottom: 2rem;
}
.quiqqer-order-ordering-nobody-login-text__suffix,
-.quiqqer-order-ordering-nobody-registration-text__suffix {
+.quiqqer-order-ordering-nobody-registration-text__suffix,
+.quiqqer-order-ordering-nobody-guest-text__suffix {
margin-top: 2rem;
}
-.quiqqer-order-ordering-nobody-registration .quiqqer-fu-login-container-width {
+/* main: login */
+.quiqqer-order-ordering-nobody-main__item .quiqqer-fu-login {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* main: signup */
+.quiqqer-order-ordering-nobody-main__item .quiqqer-fu-registrationSignUp {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.quiqqer-order-ordering-nobody-main__item .quiqqer-fu-registrationSignUp-registration-content {
+ padding: 0;
+}
+
+.quiqqer-order-ordering-nobody-main__item .quiqqer-order-ordering-nobody-guestOrder-email button {
+ margin-top: 1rem;
+}
+
+/* main: guest */
+.quiqqer-order-ordering-nobody-main__item .quiqqer-order-ordering-nobody-guestOrder button {
width: 100%;
}
@media screen and (max-width: 767px) {
.quiqqer-order-ordering-nobody {
- flex-direction: column;
- }
-
- .quiqqer-fu-login-container,
- .quiqqer-order-ordering-nobody-login,
- .quiqqer-order-ordering-nobody-registration {
- margin-left: 0;
- margin-right: 0;
+ display: block;
}
- .quiqqer-order-ordering-nobody-registration {
+ .quiqqer-order-ordering-nobody__aside {
+ margin-bottom: 3rem;
}
- .quiqqer-order-ordering-nobody-login {
- margin-bottom: 1rem;
+ .quiqqer-order-ordering-nobody__aside,
+ .quiqqer-order-ordering-nobody__main {
+ width: 100%
}
- .quiqqer-order-ordering-nobody-login,
- .quiqqer-order-ordering-nobody-registration {
- width: 100%;
+ .quiqqer-order-ordering-nobody__aside ul {
+ display: flex;
+ padding-block: 1rem;
+ overflow: auto;
+ white-space: nowrap;
}
- .qui-window-popup .quiqqer-order-ordering-nobody-registration {
- margin-bottom: 40px;
+ .quiqqer-order-ordering-nobody-asideNav__desc {
+ display: none;
}
-}
+}
\ No newline at end of file
diff --git a/src/QUI/ERP/Order/OrderProcess.php b/src/QUI/ERP/Order/OrderProcess.php
index bd8cf6883a3438c29141cbad16556f6d906422f1..1f867b7dc10428d82a89de2da6f1a141eb7a83f8 100644
--- a/src/QUI/ERP/Order/OrderProcess.php
+++ b/src/QUI/ERP/Order/OrderProcess.php
@@ -496,11 +496,34 @@ public function getBody()
$Engine = QUI::getTemplateManager()->getEngine();
if ($isNobody) {
+ $guestOrderInstalled = QUI::getPackageManager()->isInstalled('quiqqer/order-guestorder');
+ $GuestOrder = null;
+
+ if ($guestOrderInstalled && QUI\ERP\Order\Guest\GuestOrder::isActive()) {
+ $GuestOrder = new QUI\ERP\Order\Guest\Controls\GuestOrderButton();
+ }
+
+ $Request = QUI::getRequest();
+ $url = $Request->getRequestUri();
+
+ $activeEntry = match (true) {
+ str_contains($url, '?open=login') => 'login',
+ str_contains($url, '?open=signup') => 'signup',
+ default => 'login'
+ };
+
+ if ($guestOrderInstalled && str_contains($url, '?open=guest') && QUI\ERP\Order\Guest\GuestOrder::isActive()) {
+ $activeEntry = 'guest';
+ }
+
$Engine->assign([
'Registration' => new Controls\Checkout\Registration([
'autofill' => false
]),
- 'Login' => new Controls\Checkout\Login()
+ 'Login' => new Controls\Checkout\Login(),
+ 'guestOrderInstalled' => $guestOrderInstalled,
+ 'GuestOrder' => $GuestOrder,
+ 'activeEntry' => $activeEntry
]);
return $Engine->fetch(