Mobile Navigation & Miniwarenkorb

Trotz automatischer Installation noch Fragen? Hier werden Sie beantwortet!
Antworten
Jeroma
Beiträge: 32
Registriert: 31. Okt 2018, 19:01

Mobile Navigation & Miniwarenkorb

Beitrag von Jeroma »

Hey,

ich baue gerade ein neues Theme und komme gerade mit 2 Themen nicht weiter:

1.) Ich würde dem user gerne den Zugang zum Warenkorb nicht als "Off-Canvas-Lösung" anbieten sondern als Link zu einer richtigen Seite. Jedoch finde ich kein Modul dazu welches ich einfach per insert-tag einbinden kann. Muss ich hier ein eigenes bauen, welches die automatische Aktualisierung der sich im Warenkorb befindlichen Items vornimmt? Oder gibt es hierfür bereits ein Modul welches ich einfach einfügen kann?

2.) Wo finde ich die Möglichkeit die Off-Canvas-Navigation zu beinflussen bzw. abzustellen? Ich habe bisher nur die app.js gefunden. Finde aber darin nicht die möglichkeit das Ein- und Ausblenden des Togglers zu beinflussen oder wo die Klassenvergabe (z.B. "verticalNavigation") des Navigationsmoduls stattfindet.

Vielen Dank im Voraus
Benutzeravatar
supportteam2
Beiträge: 427
Registriert: 4. Mär 2015, 14:05

Re: Mobile Navigation & Miniwarenkorb

Beitrag von supportteam2 »

Hallo,

zunächst zu Frage 1:

Den Warenkorb auf einer eigenen Seite gibt es im Auslieferungszustand bereits, weil dieser als JS-freies Fallback und als Rücksprungziel für PayPal benötigt wird. Um ihn standardmäßig zu nutzen, müssen Sie lediglich in der Datei "app.js", die Sie ja bereits kennen, den folgenden Code-Block entfernen und dann darauf achten, dass der LSJS-Cache geleert und ggf. umgangen wird (siehe Hinweis weiter unten).

Code: Alles auswählen

				var el_miniCart = $$('.template_cart_mini')[0];

				if (
						el_miniCart !== undefined
					&&	(
								el_domReference.contains(el_miniCart)
							||	el_domReference.hasClass('template_cart_mini')
						)
				) {
					this.obj_references.lsMerconisMiniCart = lsjs.__moduleHelpers.miniCart.start({
						bln_useUnfold: true,
						obj_unfoldOptions: {
							bln_automaticallyCreateResizeBox: false,
							var_initialHeight: 'auto',
							int_heightOffset: 50,
							str_initialDisplayType: 'block',

							/*
							 * We don't set the animation mode to the actually supported values "height" or "margin-top" because
							 * we don't really want to use the regular unfold effect. Instead, we want to leverage the classes
							 * set the unfold effect and use css transitions to create the effect, we really want.
							 */
							str_animationMode: 'none',

							bln_closeOnOutsideClick: true,
							str_togglerEventType: ['click', 'closeButton'],
							str_initialToggleStatus: 'closed',
							var_togglerSelector: '.template_cart_mini',
							var_contentBoxSelector: '.template_cart_mini .cartPreview',
							var_wrapperSelector: '.template_cart_mini',
							var_closeButtonSelector: '.template_cart_mini .cartPreview .closeButton',

							/*
							 * false
							 *
							 * if we don't want the cart preview to open when a product gets put into the cart
							 *
							 * or
							 *
							 * el_domReference !== $$('body')[0]
							 *
							 * if we want it to open. We can't simply set the
							 * value to true because then the cart preview would open on every page reload, i.e.
							 * even when the page gets loaded regularly by clicking on a menu item or by opening
							 * the whole website for the very first time.
							 */
							bln_toggleOnInitialization: false,

							obj_morphOptions: {
								'duration': 600,
								'onStart': function() {
									$$('body')[0].addClass('mini-cart-animation-running');
								},
								'onComplete': function() {
									$$('body')[0].removeClass('mini-cart-animation-running');

									if ($$('.template_cart_mini')[0].hasClass('lsUnfoldOpen')) {
										$$('body')[0].addClass('mini-cart-open');
									} else {
										$$('body')[0].removeClass('mini-cart-open');
									}
								}
							}
						}
					});
				}
Den Cache des Javascript-Frameworks "LSJS" können Sie leeren, indem Sie den Inhalt des folgenden Verzeichnisses löschen: "assets/lsjs/cache/"

Wenn Sie mit LSJS noch weitere Arbeiten durchführen (also z. B. in der app.js noch das eine oder andere anpassen möchten), dann können Sie im Contao-Backend im Seiten-Layout im Bereich "MERCONIS: LSJS" verschiedene Einstellungen vornehmen und dort unter Anderem den Cache umgehen.
Benutzeravatar
supportteam2
Beiträge: 427
Registriert: 4. Mär 2015, 14:05

Re: Mobile Navigation & Miniwarenkorb

Beitrag von supportteam2 »

zu Frage 2:
In der Datei "app.js" können Sie die Off-Canvas-Navigation deaktivieren, indem Sie den folgenden Code-Block entfernen oder auskommentieren:

Code: Alles auswählen

			lsjs.__moduleHelpers.ocNavi.start({
				str_contentSelector: '#offCanvasContainer',
				str_togglerSelector: '#lsOcNaviToggler.lsfwk-pointer.lsfwk-txs-xxl.lsfwk-txc-inverted.lsfwk-fi.lsfwk-fi-mobileToggler'
			});
Darüber hinaus finden Sie im Contao-Backend einige Frontend-Module für die Navigation, die Sie dann möglicherweise noch anpassen möchten. In den Frontend-Modulen finden Sie im Bereich "Experten-Einstellungen" auch die Klassen- und ID-Vergabe.
Jeroma
Beiträge: 32
Registriert: 31. Okt 2018, 19:01

Re: Mobile Navigation & Miniwarenkorb

Beitrag von Jeroma »

Super, vielen Dank!
Antworten

Zurück zu „Installation“