Neu Nova - Größe der Slides / Anzahl der Artikel bei Cross Selling Slider anpassen

alexled

Neues Mitglied
31. Oktober 2023
2
0
Hallo zusammen,

wir würden bei den Produktslidern wie Besteller, Neuheiten, Cross Selling usw. gerne die einzelnen Slides größer darstellen. Aktuell sind die für unseren Zweck zu klein da auch die Artikelnamen arg beschnitten werden.

Danke im Voraus für eure Unterstützung!

LG Alex
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
7.233
1.965
Berlin
Da hilft derzeit nur eine größere Anpassung über das Child Template wenn man das vernünftig haben möchte.

Ich sorge z.B.: dafür, dass die Initialisierung der Slider durch JTL verhindert wird und initialisiere diesen dann über meine eigene Konfiguration.
 
  • Gefällt mir
Reaktionen: alexled

pctech

Aktives Mitglied
14. Juli 2009
99
11
Hallo Forum & Support
Nun, habe das selbe problem, arbeite mit Nova Cild für 5.2.4

Via CSS konnte ich nichts erreichen, da das DIV Class .slick-track die width: 264px Angabe irgendwie (über NOVA\js\slick.js Zeile 523 oder NOVA\js\slick.min.js??)
dynamisch generiert wird.
So wird dann eine CSS Regel zu DIV slick-track auch nicht angewendet und immer wieder vom Element selber überschrieben mit 264px

Leider wird auch DIV Class .product-wrapper.product-wrapper-product.text-center-util.slick-slide.slick-current.slick-active irgendiwe automatisch berechnet im Objekt, so dass eine CSS Regel darauf nicht einwirkt. Wird auch immer wieder vom Element selber mit 132px überschrieben

Das selbe auch beim class .product-wrapper.product-wrapper-product.text-center-util.slick-slide.slick-active und div.product-wrapper:nth-child

Das Bild selber konnte ich via CSS auf DIV Class .item-slider.productbox-image.square.square-image vergrössern, da jedoch die Obengenannten Container dann zu klein ist wird es abgeschnitten.

Generell sind da viele Dinge eingebunden in dem Carousell Slider.
Habe natürlich NOVA mal durchsucht, zum Beispiel nach slick-track
NOVA\themes\base\sass\components\_carousel.scss = Keine Angabe zu der Breite
NOVA\themes\base\slick\slick.scss = Keine Angabe zu der Breite

Um zu verstehen wie die Template dateien zusammenarbeiten habe ich nach der DIV Class recommendations d-print-none gesucht ob da was ist.
NOVA\productdetails\details.tpl = Keine Angabe zu der Breite jedoch wird da dann NOVA\snippets/product_slider.tpl aufgerufen (in Zeile 376)
In NOVA\snippets/product_slider.tpl wird dann zu DIV Class .slick-slider-other is-not-opc x-sell (ab Zeile 34) dann in Zeile 56 die NOVA\snippets/slider_items.tpl aufgerufen.
In NOVA\snippets/slider_items.tpl ab Zeile 5 zu DIV Class product-wrapper product-wrapper-product text-center-util wird dann in Zeile 6 NOVA\productlist/item_slider.tpl aufgerufen
NOVA\productlist/item_slider.tpl wird dann in dem DIV Class div class="item-slider productbox-image square square-image (ab Zeile 4) in Zeile 19 NOVA\snippets/image.tpl aufgerufen.
Okay, nirgends eine Angabe zu der Breite zu finden.

In der NOVA\snippets/image.tpl ist zwar im aufruf der image.tpl Zeile 20-23 was zu den zu ladenden Bilderegrössen, jedoch brachte das auch keine Änderung.

Nun, existiert da ein Plugin welcher dies grösser darstellt auf dem Markt? Oder hat jemand eine Idee wo man das anpassen kann?

Mit freundlichen Grüssen, Marcel
 

martinwolf

Offizieller Servicepartner
SPBanner
6. September 2012
3.478
289
In der NOVA\snippets/image.tpl ist zwar im aufruf der image.tpl Zeile 20-23 was zu den zu ladenden Bilderegrössen, jedoch brachte das auch keine Änderung.
Die Breite der Slides wird dynamisch anhand der gesetzten Anzahl berechnet. Die Anzahl definiert sich in der jtl.evo.js im Bereich des SlickSliders. Einfach da mal schauen.
 
  • Gefällt mir
Reaktionen: Groundhog

pctech

Aktives Mitglied
14. Juli 2009
99
11
Sehr geehrter Herr Wolf

Vielen Dank, für diesen Tipp, hier der Code:
JavaScript:
generateSlickSlider: function() {
            let self = this;
            self.initSlick($('.evo-box-slider:not(.slick-initialized)'), 'box-slider');
            self.initSlick($('.evo-slider-half:not(.slick-initialized)'), 'slider-half');
            self.initSlick($('.evo-slider:not(.slick-initialized)'), 'product-slider');
            self.initSlick($('.news-slider:not(.slick-initialized)'), 'news-slider');

            $('.slick-lazy').on('mouseenter', function (e) {
                let mainNode = $(this);
                mainNode.removeClass('slick-lazy');
                if (!mainNode.hasClass('slick-initialized')) {
                    mainNode.find('.product-wrapper').removeClass('mx-auto ml-auto-util mr-auto');
                    self.initSlick(mainNode, mainNode.data('slick-type'));
                }
            });

showNotify: function(options) {
            eModal.alert({
                size: 'xl',
                buttons: false,
                title: options.title,
                message: options.text,
                keyboard: true,
                tabindex: -1})
                .then(
                 function() {
                    $.evo.generateSlickSlider();
                }
            );
        },

register: function() {
            this.productTabsPriceFlow();
            this.generateSlickSlider();
            setTimeout(() => {
                $('.nav-tabs').tabdrop();
            }, 200);
            this.tooltips();
            this.popupDep();
            this.popover();
            this.addCartBtnAnimation();
            this.checkout();
            if ($('body').data('page') == 3) {
                this.addInactivityCheck('#cart-form');
            }
            this.fixStickyElements();
            this.setWishlistVisibilitySwitches();
            this.initEModals();
            $.evo.article().initConfigListeners();
            this.initScrollEvents();
            this.initReviewHelpful();
            this.initWishlist();
            this.initPaginationEvents();
            this.initFilterEvents();
            this.initItemSearch('filter');
            this.initSliders();
            this.registerImageHover();
        }
    };

Leider sehe ich ausser bei size:xl nichts zu der Grösse. Haben Sie da einen genaueren Tipp?
Freundliche Grüsse, Marcel Wuersch
 

pctech

Aktives Mitglied
14. Juli 2009
99
11
Da hilft derzeit nur eine größere Anpassung über das Child Template wenn man das vernünftig haben möchte.

Ich sorge z.B.: dafür, dass die Initialisierung der Slider durch JTL verhindert wird und initialisiere diesen dann über meine eigene Konfiguration.
Guten Abend
Nunja, irgendwie ist wohl das Nova template einfach mit zu vielen alten dingens belastet. Das vorherige Template war wohl einfach besser.
 

pctech

Aktives Mitglied
14. Juli 2009
99
11
Hallo Forum
Nunja, ein wenig grösser geht, indem man das Padding rausnimmt, welches in der in der carousel.scss zum Div .slick-slide gesetzt ist.
So hat es dann ein wenig mehr Platz und somit berechnet die JS das das Bild ein wenig grösser erscheint.

CSS:
.slick-slide {
  padding: 0rem;
}


Das ganze "alte" EVO Boxen Zeug wird wohl hoffentlich mal alles entfernt aus NOVA und durch OPC Portlets ersetzt.
Wollte dazu ein Support Ticket erstellen, damit es in den Issue Tracker kommt. Jedoch damit kein Glück gehabt oder Gehör gefunden.
Nunja. Was solls. Die Hoffnung besteht.... 😇😇😇
Wünsche euch allen einen schönen Tag
 
Ähnliche Themen
Titel Forum Antworten Datum
Neu Keine Bestellung möglich über Nova 5.4 auf 4K Laptop JTL-Shop - Fehler und Bugs 16
Neu Laden einer JS-Datei aus dem Nova im Child Template verhindern Templates für JTL-Shop 4
Neu NOVA (ChildTemplate) Header Einstellungen funktionieren nicht Templates für JTL-Shop 0
Neu Artikelsticker mit Nova-Template Einrichtung von JTL-Shop4 11
Neu Kategorien im NOVA werden nicht angezeigt Templates für JTL-Shop 19
Neu GPSR Verordnung - Wie handhabt ihr das im Shop mit dem Nova Template? Betrieb / Pflege von JTL-Shop 30
Neu Shop 5.3.3 Nova mobile Ansicht sehr klein somit schwer bedienbar Allgemeine Fragen zu JTL-Shop 8
Neu Bei VarKombi-Artikeln, wie immer eine Farbe und Größe vorauswählen, damit alle Bilder angezeigt werden? Allgemeine Fragen zu JTL-Shop 4
Runterladen alter Bestellung bei Aktivierung der Schnittstelle Otto.de - Anbindung (SCX) 0
Neu Kunde automatisiert über Eingang der Retoure benachrichtigen JTL-Wawi - Ideen, Lob und Kritik 2
Probleme beim Export mit der Ameise JTL-Wawi 1.7 1
Neu Megamenü Anzahl der Kategrien je Zeile von vier auf sechs erhöhen Templates für JTL-Shop 3
Neu Versanddaten nicht übermittelt. Fehlermeldung in der Spalte Status Versand/Zahlung eBay-Anbindung - Fehler und Bugs 2
Neu Kumulierte Menge der Artikelpositionen vor dem Speichern des Auftrags einsehen Eigene Übersichten in der JTL-Wawi 0
Neu "Variationsvorschau anzeigen" in der Galerie funktioniert nicht JTL-Shop - Fehler und Bugs 2
Neu Verkaufskanalverwaltung: languageIso / Der Wert darf nicht NULL sein. Shopware-Connector 2
Neu Woran erkennen, dass der Connector funktioniert? Technische Fragen zu den JTL-Connectoren 0
Aktuelle Störung der SCX-Schnittstelle und weiterer JTL-Systeme Störungsmeldungen 1
Neu Anpassung der Rechnungsansicht bei zu langen Artikelbeschreibungen Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 0
Neu Amazonspezifische Variablen in der Voralgenerstellung Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 0
Neu Merkmalfilter: Ausgabe der Kindartikel möglich? Betrieb / Pflege von JTL-Shop 0
Neu Sehr lange Ladezeit der Produktseite nach Upgrade auf Version 5.4 Allgemeine Fragen zu JTL-Shop 6
JTL-Search - Hardwarestörung auf einem der Search-Server (s7) Störungsmeldungen 0
Neu Anzeige der Konten in der Wawi User helfen Usern - Fragen zu JTL-Wawi 2
Neu POS Aufträge in der Wawi nicht abgeschlossen, stehen somit im Versand als "offen" JTL-POS - Fehler und Bugs 10
Neu Wie löscht man eine Lizenz aus der Lizenzverwaltung im KC? Allgemeine Fragen zu JTL-Shop 2
Neu Spontane Überarbeitung der Versandbedingungen bei Ebay eBay-Anbindung - Fehler und Bugs 1
Konfigurationsartikel mit 0 € vs. Preise der einzelnen Komponenten mit 0 € Einrichtung JTL-Shop5 1
Tiefe der Navigation JTL-Wawi 1.9 1
Welche Barcodeschriftart ist zu verwenden, damit der Druck auch von einem iOS-Gerät korrekt ausgeführt wird? JTL-Wawi App 7
Neu Preisdarstellung mit der niedrigsten Staffelung Allgemeine Fragen zu JTL-Shop 5
Neu durchscnittlicher VK der Kundengruppe Eigene Übersichten in der JTL-Wawi 4
Neu Shop 5.4.0: Zahlungsarten nun als Position in der Wawi? JTL-Shop - Ideen, Lob und Kritik 17
Neu Wird der Woocommerce Connector eigentlich noch gepflegt? WooCommerce-Connector 0
Neu Bestandsvariable in der Sprachvariable ampelGelb Templates für JTL-Shop 0
Nummernliste der Bilder in mobiler Ansicht entfernen Einrichtung JTL-Shop5 8
Kampagnenreiter in der Auftragsansicht JTL-Wawi 1.8 1
Neu Hauptbild wird bei Wechsel der VarKombi nicht angezeigt Betrieb / Pflege von JTL-Shop 3
Neu Einstellung der Deutsche Post Portokasse JTL-ShippingLabels - Ideen, Lob und Kritik 16
Neu Artikelnamen auf der Homepage vollständig sehen. Er ist wenn er zu lang ist verkürzt. Allgemeine Fragen zu JTL-Shop 2
Neu Picken nur von dem Lagerplatz, der 100 % der Aufträge bedienen kann Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 2
Neu Anzeige der Vorgangsstatus im JTL Shop 5 Betrieb / Pflege von JTL-Shop 1
Neu Zusätzliche Bearbeitungszeit wird nicht bei der Lieferzeit an Shopware 6 berücksichtigt Shopware-Connector 0
Neu Artikel mit Zustand beschädigt wird nicht als eigenständiger Artikel in der WaWi angezeigt User helfen Usern - Fragen zu JTL-Wawi 1
Neu Geht bei Euch das Aufladen der Portokasse in DHL-Onlinefrankierung? JTL-ShippingLabels - Ideen, Lob und Kritik 12
Neu Fehlermeldung: Fehler bei der Kommunikation mit dem eA-Server eBay-Anbindung - Fehler und Bugs 3
Neu Workflow der prüft, ob eine Bestellung komplett aus einem bestimmten Lager lieferbar ist. User helfen Usern - Fragen zu JTL-Wawi 7
Neu Kommentare von der Retoure in WMS einsehen\ Retoure wiederfinden User helfen Usern - Fragen zu JTL-Wawi 0
Neu Umbuchung der Lizenzen Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 2
Ändern der Bearbeitungszeit auf Amazon lässt sich nicht auf Länder eingrenzen JTL-Wawi 1.9 0

Ähnliche Themen