Neu "In den Warenkorb" - sehr lange Ladezeit

[Schulfreund]

Hallo,
wenn man den "In den Warenkorb"-Button eines unserer Konfigurationsartikel klickt, dauert es über 10 Sekunden bis der Artikel dem Warenkorb hinzugefügt wurde. ( Unser Shop: https://shop.schulfreund.org/Kl-Test-Materialliste )
In den Template-Einstellungen habe ich die Komprimierung bereits aktiviert, geholfen hat es nicht.
Wie beschleunige ich diesen Prozess?
Vielen Dank für eure Hilfe

 

[martinwolf]

Sind wahrscheinlich zuviele Konfigurationsmöglichkeiten. Der Konfigurator prüft beim legen in den Warenkorb jede Komponente, ob diese überhaupt in ausreichender Menge vorrätig ist und sich diese tatsächlich in den Warenkorb legen lässt. Das ganze setzt eine entsprechende Abfrage gegen die Datenbank ab. In Deinem Fall, fällt diese Abfrage extrem umfangreich aus. Die Logik wirst Du nicht ändern können, daher würde maximal ein schnellerer Server oder gar die Auslagerung der DB Abhilfe schaffen. Zumindest wenn die Artikel so bleiben wie sie sind.

Für mich stellt sich die Frage, weshalb es überhaupt ein Konfiguratiosnartikel sein muss und nicht herkömmliche Einzelartikel die sich der Kunde zusammensucht? Aufgrund der Menge finde ich den Konfigurator an dieser Stelle auch sehr unübersichtlich.

 

[css-umsetzung]

Das liegt an der Menge der Artikel, jeder einzelne wird geprüft, ob er in den WK gelegt werden kann, das kannst du nicht beschleunigen, es wird immer etwas langsamer sein.
Lass dir etwas bauen, dass dem Kunden begreiflich macht, dass er sich etwas gedulden muss, bespaße Ihn mit einem spinner oder ähnlichem.

 

[Schulfreund]

Vielen Dank für die hilfreichen Antworten.
Leider besteht für uns nur die Möglichkeit es wie von css-umsetzung beschrieben umzusetzen.
Daher habe ich mich dran gemacht und versucht ein onclick overlay mit spinner einzubauen. Ich habe mich etwas umgesehen und folgenden Code gefunden. Allerdings habe ich leichte Probleme diesen einzubauen.

also beim button habe ich ein onclick="configAnim()"; eingefügt.

Dieses ruft folgenden Code ab:

<div id="animation_outer" class="evom_animation_hidden"><div id="animation_inner"><div id="evomanimation" style="transform: scale(0.5) rotate(180deg);"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div><div class="bar4"></div><div class="bar5"></div><div class="bar6"></div><div class="bar7"></div><div class="bar8"></div></div></div></div>

<div id="evomanimation" style="transform: scale(0.5) rotate(225deg);"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div><div class="bar4"></div><div class="bar5"></div><div class="bar6"></div><div class="bar7"></div><div class="bar8"></div></div>

und das Skript:

<script type="text/javascript">
function configAnim() {
$("#animation_outer").removeClass('evom_animation_hidden');
$("#animation_outer").addClass('evom_animation_activ');
}
$(document).ready(function(){
$("#animation_outer").addClass('evom_animation_hidden');
$("#animation_outer").removeClass('evom_animation_activ');
/*
$("button[name='inWarenkorb']").click(function(){
$("#animation_outer").removeClass('evom_animation_hidden');
$("#animation_outer").addClass('evom_animation_activ');
});
*/
var count = 0;
function rotate() {
var elem2 = document.getElementById('evomanimation');
elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
if (count==360) { count = 0 }
count+=45;
window.setTimeout(rotate, 100);
}
window.setTimeout(rotate, 100);
});
</script>

Wenn ich diesen Code nun integriert habe und auf den Button klicke, öffnet sich das Overlay nicht. Allerdings kann ich mit den Entwicklertools sehen, dass der Code arbeitet. Liegt es daran, dass das Overlay einfach nicht sichtbar ist ? Bei der Seite auf der ich das gefunden habe funktioniert das ohne Probleme, allerdings ist da das "<div Animation_outer …." und das "<script ..." grau.

Falls das insgesamt nicht klappen sollte, wie viel würde eine Entwicklung ca. kosten? (Startup mit begrenztem Budget)

 

[css-umsetzung]

Eventuell gehst du das alles zu kompliziert an.
Es würde ja reichen einen div container, fix positioniert zu aktivieren der top,left,bottom,right auf 0 hat, einen schwarzen Hintergrund besitzt der zu 80% transparent ist und als Hintergrundgrafik einen zentrierten spinner hat.

Viel mehr muss es ja eigentlich gar nicht sein.

 

[Schulfreund]

Ok und wie genau setze ich das um?

1. onclick=??? in <button …?
2. <div …. wo genau deklarieren? --> in der Datei /productdetails/config.tpl oder in einer anderen?
3. irgend einen Spinner nehmen oder gibt's da was fertiges?

Danke für die freundliche Unterstützung.

 

[css-umsetzung]

Mehr geht nicht,
ich habe einen Mitkonkurrenten als Kunden bei dem dieses Problem auch bestand.