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.091
1.854
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
95
10
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.426
276
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
95
10
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
95
10
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
95
10
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 Shop 5.3.3 Nova mobile Ansicht sehr klein somit schwer bedienbar Allgemeine Fragen zu JTL-Shop 8
Neu Nova Template (Praesentium veritatis sunt dicta cum....) entfernen? Gelöste Themen in diesem Bereich 4
Neu Attributnamen im Nova 5 Template ausblenden Templates für JTL-Shop 3
Neu NOVA und Bootstrap 5? Technische Fragen zu Plugins und Templates 5
Neu NOVA Child midnight anlegen Templates für JTL-Shop 3
Neu NOVA Child boxed - Warenkorb auf Desktop zu eng Templates für JTL-Shop 0
Neu Nova Template Mobiles Menü Akkordeon Templates für JTL-Shop 0
Neu Nova einige Fontawaysome Icon werden nicht angezeigt wie Whatsapp oder Paypal Templates für JTL-Shop 0
Neu NOVA Child Aktivierung weiße Seite 500 Error Templates für JTL-Shop 0
Neu JTL Google Shopping Plugin - Farbe und Größe bei mehreren Sprachen Plugins für JTL-Shop 0
Neu Logo Größe Verändern - JTL Shop 5.3.0 Gelöste Themen in diesem Bereich 7
Neu Anzeige der Seriennummer nur für den Wareneingang Eigene Übersichten in der JTL-Wawi 0
Fehler bei Hochladen der Versanddaten Otto.de - Anbindung (SCX) 0
Neu Informationen der ParentCategory abrufen Allgemeine Fragen zu JTL-Shop 8
Neu FBA Anlieferung aus der JTL-Wawi heraus --> Firmenname in der Absenderadresse wird nur noch als "-" dargestellt Amazon-Anbindung - Fehler und Bugs 1
Hintergrundfarbe der Wawi auf Dunkel umstellen. JTL-Wawi 1.9 1
Neu Artikel wird in der der Detailbeschreibung nicht angezeigt Allgemeine Fragen zu JTL-Shop 0
Neu Der Lister listet einfach nicht Amazon-Lister - Fehler und Bugs 2
Ausgabe der Mailadresse in Dokumenten JTL-Wawi 1.9 0
In Bearbeitung Wiederherstellung der Datenbank auf neuer Hardware unintuitiv JTL-POS - Ideen, Lob und Kritik 4
[Bug] Zertifikatsnummern werden übertragen, der Button bleibt aber ausgegraut Otto.de - Anbindung (SCX) 0
Eigene USt-IdNr. fehlt in der Auftragsansicht bei Auslandsbestellungen (JTL-Wawi 1.8.12.2) JTL-Wawi 1.8 3
Artikelverkauf über JTL-Shop mit Bestand 0 in der JTL WaWi JTL-Wawi 1.9 13
Neu Zuordnung der Felder in EVO Designvorlage eBay-Designvorlagen - Ideen, Lob und Kritik 0
Neu Kategorien im Shop aber nicht in der Wawi Allgemeine Fragen zu JTL-Shop 2
Neu Eigenes Plugin und der cache.. Plugins für JTL-Shop 3
Gelöst Gibt es einen Cash-Recycler der kompatibel ist? Allgemeine Fragen zu JTL-POS 2
Neu Import von CSV und XML (CSV=Artikel, XML=Variationen der Artikel) JTL-Ameise - Ideen, Lob und Kritik 6
Neu Fehler mit der Synchronisation zwischen Shop und WaWi JTL-Shop - Fehler und Bugs 1
Neu Bug bei Konfigurationsartikeln. Wenn Warenkorb nicht leer, Teile der Konfigurationsartikel-Optionen auf englisch. JTL-Shop - Fehler und Bugs 0
Neu Interpretation der Statistik: Kundenherkunft Allgemeine Fragen zu JTL-Shop 0
Neu Sonderpreise werden auf der Detailseite angezeigt, aber auf keiner der Übersichtsseiten Betrieb / Pflege von JTL-Shop 1
Online-Shop Preise in der Wawi ohne Rabatte JTL-Wawi 1.9 1
Neu Shipping Labels der Schweizer Post: Pakete und Briefe (Webstamp) JTL-ShippingLabels - Ideen, Lob und Kritik 3
Neu MDE Scanner ständig in der Ladestation - schädlich für den Akku? Installation von JTL-WMS / JTL-Packtisch+ 0
Neu Art der Sortierung im Listing auslesen Allgemeine Fragen zu JTL-Shop 0
Versionsupdate der Products-API (V4) zum 15.08.24 Otto.de - Anbindung (SCX) 0
Neu Email-Anhänge der Bestellbestätigung sind plötzlich weg JTL-Shop - Fehler und Bugs 2
Aufpreis in Prozent in der Artikel liste Anzeigen. JTL-Wawi 1.9 0
Neu Probleme in der mobilen Ansicht bei zwei Artikeln Allgemeine Fragen zu JTL-Shop 4
Neu Fehler "Die eingegebenen Variantenmerkmale stimmen nicht mit den Variantenmerkmalen der Varianten des Artikels überein." eBay-Anbindung - Fehler und Bugs 0
Neu Preis/Mwst-Anzeige und Übertragung von Daten aus der Wawi WooCommerce-Connector 4
Neu Reihenfolge der Artikelbilder für eine Plattform ändern Gelöste Themen in diesem Bereich 3
Eigene Felder lassen sich in der Wawi nicht löschen JTL-Wawi 1.8 0
Umsatzauswertung der JTL POS Umsätze aufgeschlüsselt nach Wochentagen JTL-Wawi 1.9 0
Neu Hosting der SQL-DB bei JTL User helfen Usern - Fragen zu JTL-Wawi 6
Neu Gewichtsklasse - Definition der Versandmethode Allgemeine Fragen zu JTL-Shop 1
Rechnungskorrekturen ohne Berücksichtigung der Mindestabnahme / Abnahmeintervall JTL-Wawi 1.9 2
Aufträge öffnen in der WAWI hinter der Hauptmaske Ebene JTL-Wawi 1.9 2
Neu B2B Market - Probleme beim zuweisen der Kundengruppe. WooCommerce-Connector 2

Ähnliche Themen