Hey zusammen,
ich stehe vor einem unerklärlichen Problem. Ich habe die Add-Funktion eines Warenkorbes ein wenig erweitert und die Hauptaddfunktion in eine Funktion ausgelagert um diese dann immer wieder aufrufen zu können. Nun wird diese Funktion jedoch mehrfach aufgeruft und das Produkt dann auch mehrfach hinzugefügt obwohl es nur 1 mal hinzugefügt werden soll.
Ich habe auf die akkuButtons zu erst über eine for-schleife die Klick-Funktion intialisiert. Da diese for schleife 2-mal durchlaufen wird dachte ich mir , dass die Funktion im Falle "Ja" 2 mal aufgerufen wird. Dann habe ich die For-Schleife entfernt und manuell die Funktionen auf den akkuButtons intialisiert. Auch das brachte keine Änderung. Was für mich auch unerklärlich ist, ist dies, dass diese Funktion wie gesagt mehrfach aufgerufen wird (habe ich mittels debugging erfahren) und plötzlich nach 2 Klicks 6 x dieses Produkt im Warenkorb steht.
Live könnt ihr es hier testen: https://shop.darkhorizongroup.com/racingQuadcopt…ora-rc-armor220
Wenn ich die Funktion ohne meine Erweiterung aufrufe werden die Produkte normal hinzugefügt - so wie es sein sollte.
So sieht meine Erweiterung aus:
var akkuOptions = document.querySelectorAll(".akkuOptions");
var importantAkkuOption = akkuOptions[0] ? akkuOptions[0] : "";
var importantAkkuOptionValue = importantAkkuOption.value;
$('#button-cart').on('click', function() {
var akkuHinweis = $("#akkuHinweis");
var akkuFieldValue = $(".productAkku").val();
akkuHinweis.dialog({
autoOpen : false,
modal : true,
show : "blind",
hide : "blind",
});
if(akkuOptions.length > 0){
if(akkuFieldValue == "" || akkuFieldValue == importantAkkuOptionValue ){
// Dialog
akkuHinweis.dialog("open");
var akkuButtons = document.querySelectorAll(".akkuHinweisButtons");
/* Akkubuttons
0 = Ja
1 = Nein
*/
akkuButtons[0].addEventListener("click", function(){
var auswahl = this.value;
if(auswahl == "ja"){
addEinkauf();
akkuHinweis.dialog("close");
}
});
akkuButtons[1].addEventListener("click", function(){
var auswahl = this.value;
if(auswahl == "nein"){
akkuHinweis.dialog("close");
}
});
} else{
addEinkauf();
}
} else{
addEinkauf();
}
});Funktion Add Einkauf (daran habe ich nichts geändert - einfach nur den Funktionsinhalt in diese Funktion eingelagert):
function addEinkauf(){
i = 0;
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
dataType: 'json',
beforeSend: function() {
$('#button-cart').button('loading');
},
complete: function() {
$('#button-cart').button('reset');
},
success: function(json) {
$('.alert-dismissible, .text-danger').remove();
$('.form-group').removeClass('has-error');
if (json['error']) {
if (json['error']['option']) {
for (i in json['error']['option']) {
var element = $('#input-option' + i.replace('_', '-'));
if (element.parent().hasClass('input-group')) {
element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
} else {
element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
}
}
}
if (json['error']['recurring']) {
$('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
}
// Highlight any found errors
$('.text-danger').parent().addClass('has-error');
}
if (json['success']) {
$('.breadcrumb').after('<div class="alert alert-success alert-dismissible">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');
$('html, body').animate({ scrollTop: 0 }, 'slow');
$('#cart > ul').load('index.php?route=common/cart/info ul li');
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
i += 1;
console.log(i);
}Ich hoffe ihr könnt mir helfen dieses Problem zu lösen.
Stef
