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.544
2.084
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

Gut bekanntes Mitglied
14. Juli 2009
110
12
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.572
311
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

Gut bekanntes Mitglied
14. Juli 2009
110
12
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

Gut bekanntes Mitglied
14. Juli 2009
110
12
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

Gut bekanntes Mitglied
14. Juli 2009
110
12
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 Frage zur ersten Seite des Nova-Template (Demoseite) und wie man diese abschaltet Allgemeine Fragen zu JTL-Shop 2
Neu Nova Template - Kategoriemenü links Hintergrund andere Farbe und Balken umfärben Templates für JTL-Shop 5
Neu Nach Aktivierung Nova Template - Fatal error: Uncaught TypeError: JTL\Template\Model::getTemplateType() Templates für JTL-Shop 5
Neu Ändern der Header-Einstellungen im NOVA-Template ziehen nicht Templates für JTL-Shop 1
Neu Anfrage für CSS Anpassung Nova Childtemplate Dienstleistung, Jobs und Ähnliches 1
Änderungen aus Child-Template Einstellungen (Nova-child) werden nicht übernommen (Footer/Header) Einrichtung JTL-Shop5 3
Neu Sprachauswahl mit Flaggen Shop 5.4 Nova Template Templates für JTL-Shop 10
Social Media Links und Icons in den Header, Nova Template, Child vorhanden Einrichtung JTL-Shop5 0
Neu Nova Template Bild loeschen Templates für JTL-Shop 1
Neu Nova Template - Filter Eigenes Fenster Hintergrundfarbe ändern + Kategoriebilder Mobil anzeigen lassen Templates für JTL-Shop 0
Neu Placeholder Schriftfarbe Suchfeld Nova Templates für JTL-Shop 2
Neu Bilderanzeige teilweise nur wenn der Nutzer angemeldet ist. Allgemeine Fragen zu JTL-Shop 1
Keine PDF-Rechnungserzeugung beim VCS-Verfahren der Amazon Buchunsdaten seit Download 1.10.10.3 JTL-Wawi 1.10 2
Neu Lagerbestand nach Alter der Artikel filtern User helfen Usern - Fragen zu JTL-Wawi 1
Neu Artikel aus der Kategorieübersicht zum Warenkorb hinzufügen? Allgemeine Fragen zu JTL-Shop 0
Seit Version 1.10.10.3 folgenden Fehler: Verschieben der Positionen in Angeboten und Aufträgen nicht mehr möglich JTL-Wawi 1.10 2
Neu DPD "Die Abholadresse entspricht keiner der hinterlegten Abholadressen" JTL-ShippingLabels - Fehler und Bugs 0
Gelöst SumUp am POS lässt nur Einstecken der Karte zu Allgemeine Fragen zu JTL-POS 1
Neu Keine Rechnungen für FBA -> Der Auftrag wird extern abgerechnet Amazon-Anbindung - Fehler und Bugs 2
Merkmale mit der Ameise importieren mehr als 10 JTL-Wawi 1.9 1
Neu Bilder fehlen (teilweise) in der Kasse Einrichtung / Updates von JTL-POS 3
Neu WMS Mobile - Meldet sich ständig ab während der Benutzung JTL-WMS / JTL-Packtisch+ - Fehler und Bugs 4
FFN Der Status des Auftrags konnte nicht abgeändert werden JTL-Wawi 1.9 0
Neu Anzahl Artikel in der Artikelübersicht Allgemeine Fragen zu JTL-Shop 3
Neu JTL Wawi / Shop / POS in der Schweiz Starten mit JTL: Projektabwicklung & Migration 0
Problem bei der Produkt-Upload - Marketplace-Abgleich JTL-Wawi 1.9 0
Nach Shopabgleich wird der Auftrag in Wawi immer mit Versandart "Abholung" gesetzt JTL-Wawi 1.9 0
Artikel wird nach Erstellung nicht in der Wawi angezeigt, ist aber in der Datenbank vorhanden. JTL-Wawi 1.9 4
Neu Absender in der E-Mail Vorlage fest hinterlegen Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 4
Neu Staffelpreise in der Angebotsvorlage Arbeitsabläufe in JTL-Wawi 1
Neu Funktionen der Klassen Templates für JTL-Shop 0
Amazon Bestellungen mit Versandentgelt kaufen im Seller Central automatisch in der Wawi abschließen JTL-Wawi 1.9 0
Neu Wie kann ich es so einstellen, dass die Verfügbarkeit schon in der Suche und der Kategorieübersicht angezeigt wird, anstatt nur auf der Artikelseite? Allgemeine Fragen zu JTL-Shop 0
Neu Template Datei Cross Selling / Sortierung nach Name der Cross Selling Gruppe Templates für JTL-Shop 3
Problem bei der Anzeige von Kindartikel-Titeln bei Vaterartikeln (JTL-Shop & eBay) JTL-Wawi 1.9 0
Email aus der WAWI 1.9.7.0 werden nicht an Kunden gesendet JTL-Wawi 1.9 3
JTL 1.9.7.0 | Warum ändert sich der Nummernkreis für Rechnungen bei Bestellungen aus dem OTTO-Market und bei anderen Marktplatzanbindungen nicht? Otto.de - Anbindung (SCX) 3
Neu Shopify - wegen Formatierung der Email Adresse - unbehandelte Ausnahme #959190594F6282F Shopify-Connector 0
Neu Variablenname der Bilder WooCommerce-Connector 1
Einstellen der Lieferzeit ins Ausland Einrichtung JTL-Shop5 1
Neu eBay Bestellung aus der Schweiz MwST und DHL User helfen Usern - Fragen zu JTL-Wawi 1
Mehrwerts Steuersatz in % auf der Rechnung anzeigen JTL-Wawi 1.9 5
Neu eBay Angebotsimport - Ungültiger Header - Aufbau der CSV Datei? User helfen Usern - Fragen zu JTL-Wawi 2
Neu Neuen Artikel anlegen (innerhalb der Auftragsverwaltung) JTL-Wawi - Ideen, Lob und Kritik 4
Massenumbenennung der Bilder in Wawi und Shop JTL-Wawi 1.9 2
Neu Warum wird im Shop 5 der Lieferanten-Artikelname anstatt WAWI-Artikelname angezeigt? Wie kann ich das ändern? Betrieb / Pflege von JTL-Shop 1
Neu Anbindung eines externen Shops an bestehendes JTL – Trennung der Buchhaltungszahlen möglich? Onlineshop-Anbindung 5
Neu Vergleich der (Schweizer) Zahlungsanbieter Plugins für JTL-Shop 0
Neu WMS - 1 Auftrag -> in 2 Lieferungen / Picklisten aufteilen (auf Basis der Versandklasse) Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 3
Neu Gesamtzahl der Aufträge pro Monat für JTL Rechnung Einrichtung und Installation von JTL-eazyAuction 1

Ähnliche Themen