Neu Kategorie Listenansicht: Shop-Skript berechnet Höhe "falsch"

[Belushi]

Wir wollen im Shop (5.5.3) in den Kategorien die Möglichkeit anbieten, direkt zu Kaufen, und haben den Warenkorb-Button für die Listenansicht aktiviert.
Leider müssen wir (Grundpreise und anderes) 2-3 Zeilen zusätzlich oberhalb des Warenkorb-Bereichs einfügen, was mit der productdetails/price.tpl sowohl in der Gallerieansicht als auch auf der Produktdetailseite wunderbar funktioniert; das ist so konfiguriert, dass das Layout je nach tmplate-scope entsprechend angepasst wird.

Grundsätzlich funktioniert das auch im Listenmodus der Kategorie, ABER: Das Shop-interne Javascript berechnet fortlaufend und bei jeder Änderung des Browserfensters die Höhe des Containers .product-wrapper neu und setzt das 'hart' als style="height: xy" in das DIV ein!
Blöderweise berechnet es den Wert falsch, da unsere rechte Spalte im ChildTemplate wegen der zusätzlichen Zeilen etwas höher ist als als im Nova-Original, und das schießt uns eben spätestens beim Verkleinern des Browserfensters das Layout, weil der INHALT des Containers (.productbox) über .product_wrapper hinaussteht und in das nächste Produkt hineinragt :-/
Die Höhe der einzelnen Produkte kann und muss aus genanntem Grund übrigens nicht einheitlich sein.

Wie gewöhne ich dem Skript dieses gut gemeinte aber leider kontraproduktive Verhalten ab??
Am besten auch gleich das automatische Ersetzen des Preises, wenn man bei Staffelpreisen die Mengen ändert (das erste span, das unter .price_wrapper gefunden wird)... da soll ein ab-Preis hin bei Staffelpreisen. Dauerhaft; ein Staffelpreis-Popup ist schon vorhanden.

Wie gesagt, Produktdetailseite und Galleriensicht tun was sie sollen, nur die Listenansicht lässt sich nicht überlisten...

 

[css-umsetzung]

Blöderweise berechnet es den Wert falsch, da unsere rechte Spalte im ChildTemplate wegen der zusätzlichen Zeilen etwas höher ist als als im Nova-Original, und das schießt uns eben spätestens beim Verkleinern des Browserfensters das Layout, weil der INHALT des Containers (.productbox) über .product_wrapper hinaussteht und in das nächste Produkt hineinragt :-/
Die Höhe der einzelnen Produkte kann und muss aus genanntem Grund übrigens nicht einheitlich sein.

Ab einer Bestimmten Breite passt der Listenmodus eh nicht mehr, dann richtet sich das eigentlich nach $isMobile, die Frage ist also ab welcher Breite du Probleme bekommst.

Ansonsten würde ich die Höhe im css, mit height:auto !important; überschreiben, dann kann der rechnen was auch immer der möchte.
Um die Preisänderung zu verhindern, wird es vermutlich das beste sein, den Preis in ein anderes html zu setzen oder die Klasse ändern, sonst machst du dir eine mögliche Variantenauswahl kaputt.

 

[Belushi]

mit height:auto !important; überschreiben, dann kann der rechnen was auch immer der möchte

Das habe ich tatsächlich schon drin, und es funktioniert auch bei der initialen Darstellung - ansonsten würde der Content schon direkt nach Seitenaufruf die Höhe von .product_wrapper überschreiten. Sobald ich das Fenster aber nur etwas verkleinere (bei einem FullHD Monitor auf ca. 1500px) kommt das Problem zurück.
Ich kann das im Inspektor des Browsers gut nachvollziehen: Manipuliere ich dort im DOM style="height: ...px" und setze statt der berechneten Zahl "auto" ein, passt das Layout perfekt. Erst im Bereich unter 1000 Pixel, wenn ein anderer Media-Query greift, sieht es wieder müllig aus. Das wäre behebbar - aber nur, wenn ich die erzwungene height loswerde. Mobil ist übrigens alles OK.

Um den Spuk ein Ende zu bereiten, müsste ich die komplette item_list.tpl kopieren, da das Div mit .product_wrapper ganz oben im Hauptblock des Templates steht. Das kann nicht der Zweck der Übung sein; zumal wir ansonsten bei Child-Anpassungen so Mikroinvasiv wie möglich vorgehen.

Ähnlich sieht es mit der price.tpl aus: Wir haben hier nur einzelne Blöcke modifiziert, um unsere zusätzlichen Infos da reinzubekommen; die optische Feinjustage erfolgt dann per Abfrage des $tplscope und CSS. Da das Shop-Skript auf .price_wrapper zugreift, stehe ich hier vor genau dem selben Problem, denn das .price_wrapper-DIV steht auch ganz am Anfang des Templates.

 

[Belushi]

(k)eine Lösung für das height-Problem:
Funktioniert, aaaber.... ist hässlich* AF

const isCatList = document.querySelector('body[data-page="2"] #product-list-type[value="list"]');
if (isCatList) {
    resizeListHeight();
    let resizeTimer;
    window.addEventListener('resize', function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            resizeListHeight();
        }, 250);
    }, { passive: true });
}

Der Aufruf erfolgt in einem bereits bestehenden $( document ).ready() Script.

*) hässlich bezieht sich auf den Ansatz; das sollte so nicht notwendig sein, mit dem Holzhammer zuzuschlagen. Optisch passiert genau was wir sollen.

 

[css-umsetzung]

Ich hätte das ja gerne mal angeschaut, weil die Höhe über eine css Anweisung fix auf auto zu setzen (mit einem !important) muss eigentlich ausreichen.
Das es ab 992px komisch wird ist klar, da erwartet JTL das isMobile gesetzt ist.

Da muss man viel fummeln mit css damit das vernünftig aussieht, wenn man eine listbox auch bei kleineren Auflösungen schön haben möchte.

 

[Belushi]

Also 992px Breite = Mobil? Eher nicht - da stell ich mir unsere Einkäufer früher vor, als sie einen Webshop und ihre Excel-Tabellen mit den Bestellungen nebeneinander am Bildschirm hatten!
Mittlerweile haben wir Gott sei Dank alles mindestens Dual-Monitor-Setups^^

Die Idee mit der height: auto !important hätte imho auch klappen müssen, aber sie hat wie gesagt nur bei der initialen Darstellung (neuer Seitenaufruf) funktioniert. Spätestens bei Variantenprodukten war's dann wieder vorbei. Der JS-Hack funktioniert ja, aber ich mich nervt es, dass man zu solchen Krücken greifen muss, weil das nicht einfach irgendwo konfiguriert werden kann - notfalls in irgendeiner Shop-XML. Den OPC-Editor musste ich wegen des Standardverhaltens mit den Pfaden (Links, img-src's etc.) ja auch schon hacken, weil die Kollegen irre geworden sind.

Ich hab Dir mal privat geschrieben, kannst Dir das Problemkind gerne mal anschauen.