Mehrere Varianten - 1 "in den Warenkorb"-Button

Fragen und Antworten zu den Templates und eigener Template-Erstellung
Antworten
ix_merconis
Beiträge: 13
Registriert: 20. Mai 2014, 10:53

Mehrere Varianten - 1 "in den Warenkorb"-Button

Beitrag von ix_merconis »

Hallo,

1) eine Frage: kann man über die Modifikation eines Templates eine Tabelle mit Varianten ausgeben, die jeweils ein Text-Eingabe-Feld für die Menge haben. Unter der Liste soll es EINEN "In den Warenkorb"-Button für ALLE eingetragenen Mengen geben, also zB:

Variante1 ArtNr1 [input type=text => Eingabe der Menge]
Variante2 ArtNr2 [input type=text => Eingabe der Menge]
...
VarianteN ArtNrN [input type=text => Eingabe der Menge]

[input type=submit => alle eingetragenen Mengen werden in dem Warenkorb gespeichert]


2) Luxusvariante:
Wie 1), aber: Ist es möglich, das Eintragen in den Warenkarb per Ajax zu erstellen, sodass die Seite nicht neu geladen werden muss?


Ich erwarte keinen fertigen Quellcode, es wäre schon hilfreich zu wissen, ob es überhaupt geht,
welche Methoden man evtl. verwenden könnte oä.

Vielen Dank!


PS: ich habe es hinbekommen, die Varianten in einer Tabelle auszugeben und in jeder ZEILE einen "In den Warenkorb"-Button hinzuzufügen:
(eingefügt in: /templates/merconis_theme_basic_templates/template_productDetails_ixtensa_desktop.xhtml)

Code: Alles auswählen

foreach($this->objProduct->_variants as $k_variant=>$variant) {
	echo $variant->ls_data["de"]["title"];
	echo $variant->ls_data["de"]["lsShopVariantCode"];
	echo $variant->ls_priceQuantityData->quantityInput;
}
Benutzeravatar
supportteam
Beiträge: 245
Registriert: 28. Aug 2013, 17:58

Re: Mehrere Varianten - 1 "in den Warenkorb"-Button

Beitrag von supportteam »

Für die erste Variante, also die ohne Ajax, müsste der Merconis-Core verändert werden, da der Programmteil, der das "in den Warenkorb"-Formular verarbeitet, genau eine Menge für ein Produkt bzw. eine Variante erwartet. Das geht über die Möglichkeiten, die Sie als Shopbetreiber haben, hinaus. Im Rahmen einer Auftragsprogrammierung können wir Ihnen das natürlich gerne anbieten. Sollte das für Sie interessant sein, kontaktieren Sie bitte den Merconis techSupport telefonisch (Kontaktdaten finde Sie auf http://www.merconis.com/).

Der Einsatz von Ajax könnte aber eine einfachere Alternative ermöglichen, die Sie - Javscriptkenntnisse vorausgesetzt - selbst hinbekommen könnten. Sofern es funktioniert, ein Produkt bzw. eine Variante per Ajax in den Warenkorb zu legen (hier muss ich eine Machbarkeitsprüfung beim techSupport anstoßen), so wäre es möglich, durch einen Knopfdruck mehrere Ajax-Requests für die einzelnen eingegebenen Mengen auszuführen. Das Ergebnis wäre dann die beschriebene "Luxusvariante", wobei die Verarbeitungszeit im Vergleich mit einem Request ein wenig erhöht wird. Sofern ein javascriptfreies Fallback benötigt wird (JS ist ja üblicherweise aktiviert) wäre dies dann eben die von Ihnen bereits realisierte Darstellung mit Eingabefeld und Button für jede einzelne Variante.

Bitte geben Sie kurz Bescheid, ob die Ajax-Version mit dem genannten Fallback für sie eine geeignete Lösung sein kann. Dann würde ich die Prüfung der Ajax-Fähigkeit der "in den Warenkorb"-Funktion an den techSupport weitergeben.
ix_merconis
Beiträge: 13
Registriert: 20. Mai 2014, 10:53

Re: Mehrere Varianten - 1 "in den Warenkorb"-Button

Beitrag von ix_merconis »

Hallo,
vielen Dank für die schnelle Antwort.

Die Lösung mit Ajax ist für uns sehr interessant!!!

Wenn ich das richtig verstanden habe, könnten wir dann selbst beliebig viele Artikel in den Warenkorb verschieben, vermutlich anhand einer ID/ Artikelnummer o.ä., d.h. wir würden uns selbst um das Auslesen der Textfelder (Mengen) kümmern.

Viele Grüße
Benutzeravatar
supportteam
Beiträge: 245
Registriert: 28. Aug 2013, 17:58

Re: Mehrere Varianten - 1 "in den Warenkorb"-Button

Beitrag von supportteam »

Mittlerweile liegt die Antwort vom techSupport vor. In der nächsten Version wird das Hinzufügen von Produkten zum Warenkorb per Ajax möglich sein. Laut techSupport sollte ihr Anwendungsfall damit machbar sein, voraussichtlich sogar das Zusammenfassen mehrerer Warenkorb-Einfügungen in einem Ajax-Request. Da diese Ajax-Funktionalität in der Entwicklungsversion bereits weitestgehend enthalten ist, möchten wir Ihnen einen Pre-Release anbieten, den wir Ihnen bei Interesse in einigen Tagen zur Verfügung stellen können.

Als kurze Detailinfo: Der Ajax-Request erwartet als Parameter die Artikel-/Varianten-ID und die Menge. Zu entscheiden, woher Sie diese Informationen beziehen, steht Ihnen frei. Ein mitgelieferter JS-Code belegt die regulären Mengeneingabe-Felder und ihren jeweiligen Submit-Button mit dem Ajax-Verhalten und dient Ihnen als Vorlage zur Realisierung ihrer individuellen Lösung.
ix_merconis
Beiträge: 13
Registriert: 20. Mai 2014, 10:53

Re: Mehrere Varianten - 1 "in den Warenkorb"-Button

Beitrag von ix_merconis »

Hallo,
super, vielen Dank!
Benutzeravatar
supportteam
Beiträge: 245
Registriert: 28. Aug 2013, 17:58

Re: Mehrere Varianten - 1 "in den Warenkorb"-Button

Beitrag von supportteam »

Der angekündigte Pre-Release sollte Ihnen per E-Mail bereits gesendet worden sein. Hier erhalten Sie nun noch ein paar Hinweise zur Verwendung.

Bitte ersetzen Sie zunächst Ihren Modulordner "\system\modules\zzz_merconis" durch das neue Verzeichnis "zzz_merconis". Zunächst sollte damit alles so funktionieren, wie bisher.

Legen Sie nun ein neues Frontend-Modul an:
Frontend-Modul "Ajax"
Frontend-Modul "Ajax"
fe_modul_ajax.JPG (38.44 KiB) 28988 mal betrachtet
...und binden Sie es an erster Stelle im Ajax-Layout ein:
Layout "Ajax"
Layout "Ajax"
layout_ajax.JPG (62.09 KiB) 28988 mal betrachtet
Ersetzen Sie nun die Datei "\files\shopfiles\merconisTheme_basic\jsConfiguration\jsConfiguration.js" durch das Verzeichnis "\system\modules\zzz_merconis\installerRessources\shopfiles\merconisTheme_basic\jsConfiguration". Sollten Sie ein anderes Theme verwenden, weicht der Pfad entsprechend ab.

Bitte beachten Sie: Falls Sie Anpassungen an der Datei "jsConfiguration.js" vorgenommen haben, nehmen Sie aus der neuen Datei einfach den entsprechend kommentierten Code-Block am Ende der Datei und fügen Sie ihn in Ihre eigene "jsConfiguration.js" ein.

Dieser Javascript-Code hinterlegt allen regulären "in den Warenkorb"-Buttons in den Standard-Templates die Ajax-Funktionalität. Im genannten Code wird pro Ajax-Request genau ein Produkt mit der im Mengenfeld angegebenen Menge in den Warenkorb gelegt.

Für Ihren Anwendungszweck haben wir nun auch das gleichzeitige Hinzufügen mehrerer Produkte/Varianten in einem Ajax-Request ermöglicht. Der folgende Beispielcode zeigt, wie das funktioniert:

Code: Alles auswählen

	/*
	 * Dieser Code kann in die Datei jsConfiguration.js eingefügt werden.
	 *
	 * Wenn ein Element mit der ID 'putAllVariantsToCart' existiert, so wird die Ajax-Funktion, die bei Klick auf das Element alle Varianten
	 * auf einmal in den Warenkorb legt, initialisiert.
	 * 
	 * Hinweis: Die Identifikation verschiedener Elemente funktioniert mit diesem Beispielcode im Zusammenhang mit dem standardmäßigen
	 * Produktdetails-Template Nr. 2 und muss angepasst werden, wenn das Template verändert wird.
	 */
	var elPutAllVariantsToCartButton = $('putAllVariantsToCart');
	if (elPutAllVariantsToCartButton != undefined && elPutAllVariantsToCartButton != null) {
		
		/*
		 * Alle Submit-Buttons der Varianten-Mengeneingabefelder werden entfernt.
		 */
		Array.each($$('.variantsContainer input.submit'), function(el) {
			el.dispose();
		});
		
		/*
		 * Der Button, der alle Varianten in den Warenkorb legen soll, wird mit einem click-Event versehen.
		 */
		elPutAllVariantsToCartButton.addEvent('click', function() {
			/*
			 * Alle Varianten-IDs und die jeweiligen Mengen in den Mengeneingabefeldern werden ausgelesen
			 * und in mehreren Objekten innerhalb eines Arrays hinterlegt.
			 */
			var arrProductVariantIDsToPutInCart = [];
			Array.each($$('.variantsContainer input[name="quantity"]'), function(el) {
				var quantity = el.getProperty('value');
				var productVariantID = el.getParent().getParent().getElement('input[name="productVariantID"]').getProperty('value');
				
				arrProductVariantIDsToPutInCart.push({'productVariantID': productVariantID, 'quantity': quantity});
			});

			/*
			 * Starten des JSON-Requests, der die Varianten in den Warenkorb legt.
			 * Zu beachten sind die Parameter im "data"-Attribut.
			 */
			new Request.JSON({
				url: MERCONIS_AJAX_URL,
				noCache: true,
				data: 'REQUEST_TOKEN=' + REQUEST_TOKEN + '&isAjax=1&action=putInCart&requestedClass=ls_shop_ModuleAjaxGeneral&productVariantIDsToPutInCart=' + encodeURIComponent(JSON.encode(arrProductVariantIDsToPutInCart)),
				onComplete: function(objResponse) {
					/*
					 * Ist der Request beendet, muss der Mini-Warenkorb aktualisiert werden.
					 * Sofern der Quickview verwendet wird, muss er gesondert berücksichtigt werden,
					 * da der Mini-Warenkorb sich dann in der übergeordneten window-Instanz befindet. 
					 */
					if ($$('body')[0].hasClass('merconisThemeLayoutQuickview')) {
						window.parent.ls_shop_feController.reloadCartMini();
					} else {
						ls_shop_feController.reloadCartMini();
					}

					/*
					 * objResponse enthält alle Informationen, die zur Ausgabe von Fehler- und Erfolgsmeldungen
					 * nötig sind. Hier wird objResponse in der Konsole ausgegeben.
					 */
					console.log(objResponse);

	   			}.bind(this)
			}).send();
			return false;
		})
	}
Bitte lassen Sie uns wissen, ob Sie mit diesen Informationen ihr gewünschtes Shopverhalten realisieren können, und fragen Sie, wenn noch etwas unklar sein sollte.
ix_merconis
Beiträge: 13
Registriert: 20. Mai 2014, 10:53

Re: Mehrere Varianten - 1 "in den Warenkorb"-Button

Beitrag von ix_merconis »

Hallo,

erster Schritt:
ich habe die Installation ausgeführt und keine Veränderunge bemerkt.

Daher habe ich noch auf der Seite "Ajax" das neue Ajax-Layout hinzugefügt,
ich hoffe, das war korrekt. (siehe Screenshot)

Dann konnte ich eine Veränderung sehen:
Der in den Warenkorb-Button wird nach dem Anklicken etwas heller und ein grüner Text wird dynamisch eingebaut: 1 dieses Produktes wurde(n) dem Warenkorb hinzugefügt!


Den 2ten Punkt (mehrere Produkte in einem Request) muss ich noch testen.

Viele Grüße
Dateianhänge
seite_ajax_layout.png
seite_ajax_layout.png (79.33 KiB) 28980 mal betrachtet
ix_merconis
Beiträge: 13
Registriert: 20. Mai 2014, 10:53

Re: Mehrere Varianten - 1 "in den Warenkorb"-Button

Beitrag von ix_merconis »

ok, letzter Test:
1) jsConfiguration.js anpassen wie beschrieben
2) Div mit id putAllVariantsToCart erstellen
3) wichtig: man braucht noch die Klasse variantsContainer im umgebenden Container,
dann funktioniert es wunderbar.

Beispiel:

Code: Alles auswählen

echo '<table class="variantsContainer">';
echo '<tr><td>Titel</td><td>ArtNr</td>';
echo '<td>Button</td></tr>';
foreach($this->objProduct->_variants as $k_variant=>$variant) {
	echo '<tr>';
	echo '<td>' . $variant->ls_data["de"]["title"] . '</td>';
	echo '<td>' . $variant->ls_data["de"]["lsShopVariantCode"] . '</td>';	
	echo '<td>' . $variant->ls_priceQuantityData->quantityInput . '</td>';
	echo '</tr>';
}
echo '</table>';
echo '<div id="putAllVariantsToCart">Alle Artikel in den Warenkorb</div>';
Hat prima funktioniert, vielen Dank
Antworten

Zurück zu „Templates“