Boxen mit mehr als 3 Artikeln

[3jojojo]

Hey Leute kann mir jemand sagen wie ich in die Boxen Top-Angebote und Co mehr als nur 3 Artikel nebeneinander bekomme?

Gruß
JO

 

[3jojojo]

AW: Boxen mit mehr als 3 Artikeln

kann es sein das es schlicht nicht möglich ist die neuen EVO Slider mit mehr als 3 Artikeln arbeiten zu lassen. Gerade auf der Startseite sieht das sehr wenig aus. Im Backend habe ich keine Einstellungmöglichkeiten gefunden. Hier kann man nur die Anzahl der ARtikel in den Boxen festlegen.

Für die Startseite mit Top-Seller - Top Angebot scheint es keine Lösung zu geben ;(

 

[martinwolf]

AW: Boxen mit mehr als 3 Artikeln

Seit 4.02 ist der slickslider dafür zuständig. Für diesen sind aber keine Parameter innerhalb der TPL-Dateien hinterlegt. Ergo muss hier derzeit in der jtl.evo.js gearbeitet werden, was nicht updatesicher ist.

        generateSlickSlider: function() {
            /*
             * box product slider
             */
            
            $('.evo-box-slider:not(.slick-initialized)').slick({
                //dots: true,
                arrows: true,
                slidesToShow: 1
            });
            
            /*
             * responsive slider (content)
             */
            $('.evo-slider:not(.slick-initialized)').slick({
                //dots: true,
                arrows: true,
                slidesToShow: [COLOR=#ff0000][B]3[/B][/COLOR],
                responsive: [
                    {
                        breakpoint: 480, // xs
                        settings: {
                            slidesToShow: [B][COLOR=#ff0000]1[/COLOR][/B]
                        }
                    },
                    {
                        breakpoint: 768, // sm
                        settings: {
                            slidesToShow: [B][COLOR=#ff0000]2[/COLOR][/B]
                        }
                    },
                    {
                        breakpoint: 992, // md
                        settings: {
                            slidesToShow: [B][COLOR=#ff0000]3[/COLOR][/B]
                        }
                    }
                ]
            });
        },

Die rot markierten Werte sind den Bedürfnissen anzupassen.

 

[3jojojo]

AW: Boxen mit mehr als 3 Artikeln

Seit 4.02 ist der slickslider dafür zuständig. Für diesen sind aber keine Parameter innerhalb der TPL-Dateien hinterlegt. Ergo muss hier derzeit in der jtl.evo.js gearbeitet werden, was nicht updatesicher ist.

        generateSlickSlider: function() {
            /*
             * box product slider
             */
            
            $('.evo-box-slider:not(.slick-initialized)').slick({
                //dots: true,
                arrows: true,
                slidesToShow: 1
            });
            
            /*
             * responsive slider (content)
             */
            $('.evo-slider:not(.slick-initialized)').slick({
                //dots: true,
                arrows: true,
                slidesToShow: [COLOR=#ff0000][B]3[/B][/COLOR],
                responsive: [
                    {
                        breakpoint: 480, // xs
                        settings: {
                            slidesToShow: [B][COLOR=#ff0000]1[/COLOR][/B]
                        }
                    },
                    {
                        breakpoint: 768, // sm
                        settings: {
                            slidesToShow: [B][COLOR=#ff0000]2[/COLOR][/B]
                        }
                    },
                    {
                        breakpoint: 992, // md
                        settings: {
                            slidesToShow: [B][COLOR=#ff0000]3[/COLOR][/B]
                        }
                    }
                ]
            });
        },

Die rot markierten Werte sind den Bedürfnissen anzupassen.

hat genial geklappt danke für die Hilfe

 

[3jojojo]

AW: Boxen mit mehr als 3 Artikeln

Seit 4.02 ist der slickslider dafür zuständig. Für diesen sind aber keine Parameter innerhalb der TPL-Dateien hinterlegt. Ergo muss hier derzeit in der jtl.evo.js gearbeitet werden, was nicht updatesicher ist.

        generateSlickSlider: function() {
            /*
             * box product slider
             */
            
            $('.evo-box-slider:not(.slick-initialized)').slick({
                //dots: true,
                arrows: true,
                slidesToShow: 1
            });
            
            /*
             * responsive slider (content)
             */
            $('.evo-slider:not(.slick-initialized)').slick({
                //dots: true,
                arrows: true,
                slidesToShow: [COLOR=#ff0000][B]3[/B][/COLOR],
                responsive: [
                    {
                        breakpoint: 480, // xs
                        settings: {
                            slidesToShow: [B][COLOR=#ff0000]1[/COLOR][/B]
                        }
                    },
                    {
                        breakpoint: 768, // sm
                        settings: {
                            slidesToShow: [B][COLOR=#ff0000]2[/COLOR][/B]
                        }
                    },
                    {
                        breakpoint: 992, // md
                        settings: {
                            slidesToShow: [B][COLOR=#ff0000]3[/COLOR][/B]
                        }
                    }
                ]
            });
        },

Die rot markierten Werte sind den Bedürfnissen anzupassen.

hast du vielleicht ne Ahnung wie ich Auf einer CMS Seite mit ein Banner aus dem Bannermanger anzeigen lassen kann. Also nur auf einer spziellen CMS Seite nicht auf allen CMS seiten????

 

[martinwolf]

AW: Boxen mit mehr als 3 Artikeln

Das ist nicht vorgesehen.

 

[3jojojo]

AW: Boxen mit mehr als 3 Artikeln

Das ist nicht vorgesehen.

eigentlich schade ich hatte gehofft das man das über die Idee der CMS Seite irgendwie hätte lösen können oder per Include auf der CMS Seite

DANKE dir aber für deine Hilfe in dem anderen Punkt hat mir sehr geholfen

 

[dark2007]

AW: Boxen mit mehr als 3 Artikeln

Hallo und guten Abend!

Kann mir jemand sagen wie der Code der jtl.evo.js genau auszusehen hat bei Darstellung von 4 Artikeln inkl. Autoplay-Funktion?

Für eine Rückmeldung bedanke ich mich im Vorraus.

 

[Arne.E]

AW: Boxen mit mehr als 3 Artikeln

Zeile 100 in der jtl.evo.js:

slidesToShow: 3,

Ersetzen mit:

slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,

Alle optionen, die man sonst noch bei dem Slick-Slider benutzen kann findet man hier:

slick - the last carousel you'll ever need

 

[dark2007]

AW: Boxen mit mehr als 3 Artikeln

Vielen Dank für deine Antwort.

Der Link war mir bereits bekannt, nur die Stelle an der die Änderung/ergänzung eingesetzt werden mußte, war nicht nicht ganz klar.

Woran ich mir jedoch die Zähne ausbeiße ist die Slick-Funktion 'Center-Mode'...

Hat dazu jemand einen Tip in Verbindung mit Autoplay und 4 Artikeln?

 

[Arne.E]

AW: Boxen mit mehr als 3 Artikeln

CenterMode bedeutet ja einfach nur, dass das fokussierte Element in der Mitte ist vom Slider. Rechts und Links könnten die Elemente unter Umständen abgeschnitten sein, je nach vorhandenem Platz. Denke das sieht bei Produkten nicht so sexy aus?
Was verstehst Du denn bei der Funktion nicht so ganz?

 

[dark2007]

AW: Boxen mit mehr als 3 Artikeln

Da muß ich dir leider widersprechen. Laut der Slick-Seite soll das mittlere Element größer dargestellt werden als die Artikel/Element links und rechts davon, auch zu sehen anhand der Pixelangaben im Beispielcode.
Daß evtl. Elemente abgeschnitten dargestellt werden ist klar, läßt sich jedoch natürlich durch Reduzierung der dargestellten Elemente beheben.

Jedoch will der Shop diesen Center-Mode nicht darstellen, also speziell die Vergrößerung des mittleren Elements. Daher meine Frage wie der Code auszusehen hat.

 

[holzpuppe]

AW: Boxen mit mehr als 3 Artikeln

Seit 4.02 ist der slickslider dafür zuständig. Für diesen sind aber keine Parameter innerhalb der TPL-Dateien hinterlegt. Ergo muss hier derzeit in der jtl.evo.js gearbeitet werden, was nicht updatesicher ist.

Ist es nicht updatesicher, wenn du es in deinen Templateordner/js packst?

 

[Groundhog]

Ist es nicht updatesicher, wenn du es in deinen Templateordner/js packst?

Es ist schon möglich die Original *.js Datei zu überschreiben. Dazu einfach in die eigene Template.xml

<File Path="js/jtl.evo.js" override="true"/>

hinzufügen und die geänderte jtl.evo.js im eigenen Template JS Ordner ablegen....allerdings müssen bei einem Update etwaige Änderungen an der originalen jtl.evo.js nachgezogen werden.

 

[Tomas]

Ich weis zwar, dass der Beitrag schon ein wenig älter ist - wollte jedoch trotzdem noch eine Ergänzung machen für diejenigen die auch auf der Suche nach diesem Thema sind.

Da ich selber aber noch sehr neu in der JTL-Welt bin, wäre es toll, wenn einer der "alten Hasen" hier noch seinen Segen für diese Lösung geben würde
Ich bin noch so neu - vielleicht übersehe ich da etwas gravierendes.


Das kopieren der ganzen jtl.evo.js ist nicht notwendig und auch im Bezug auf die Updatefähigkeit nicht ratsam. Es reicht, wenn man sich eine .js Datei anlegt und die slick() Funktion gesondert aufruft.

Dafür habe ich mal eine jtl.evo_ext.js mit folgendem Inhalt angelegt

$('.evo-slider:not(.slick-initialized)').slick({
    //dots: true,
    arrows: true,
    slidesToShow: 4,
    responsive: [
        {
            breakpoint: 480, // xs
            settings: {
                slidesToShow: 1
            }
        },
        {
            breakpoint: 768, // sm
            settings: {
                slidesToShow: 2
            }
        },
        {
            breakpoint: 992, // md
            settings: {
                slidesToShow: 3
            }
        }
    ]
});

Manchmal möchte man aber auch unterschiedliche Einstellungen für bestimmte Bereiche haben und nicht eine globale Einstellung für alle Slider.
Im Standart Evo-Template gibt es bei den "Ähnlichen Artikeln" auf der Detailseite eine CSS Klasse "recommendations" mit deren Hilfe man den Bereich eindeutig zuordnen kann.
In diesem Fall, kann man die Slickfunktion kopieren und entsprechend anpassen.

$('.recommendations .evo-slider:not(.slick-initialized)').slick({
    //dots: true,
    arrows: true,
    slidesToShow: 4,
    responsive: [
        {
            breakpoint: 480, // xs
            settings: {
                slidesToShow: 1
            }
        },
        {
            breakpoint: 768, // sm
            settings: {
                slidesToShow: 2
            }
        },
        {
            breakpoint: 992, // md
            settings: {
                slidesToShow: 3
            }
        }
    ]
});

$('.evo-slider:not(.slick-initialized)').slick({
    //dots: true,
    arrows: true,
    slidesToShow: 6,
    responsive: [
        {
            breakpoint: 480, // xs
            settings: {
                slidesToShow: 1
            }
        },
        {
            breakpoint: 768, // sm
            settings: {
                slidesToShow: 2
            }
        },
        {
            breakpoint: 992, // md
            settings: {
                slidesToShow: 3
            }
        }
    ]
});

Dabei ist zu beachten, dass die allgemein gültige Funktion $('.evo-slider:not(.slick-initialized)').slick() erst nach allen anderen aufgerufen wird (also immer unten steht ). Sie kann auch ganz weg gelassen werden - womit dann wieder auf die Standartfunktion aus der jtl.evo.js zurückgegriffen wird.
Damit hat man schon eine tolle Möglichkeit ein wenig Variation in die Slider zu bringen.

Leider gibt es z.B. auf der Startseite keine so eindeutige CSS-Klasse pro Slider. Mit einer kleinen Erweiterung der snippets/product_slider.tpl ist aber schnell Abhilfe geschaffen.

{extends file="{$parent_template_path}/snippets/product_slider.tpl"}
{block name="product-slider-class"}evo-slider{if isset($Box)} slider-{$Box->name|lower}{/if}{/block}

Damit bekommt jeder Slider auf der Startseite auch eine eindeutige CSS Klasse zugewiesen. Ich kann dann z.B. die "Top-Angebote" auf der Seite manipulieren ohne die Eigenschaften der übrigen Slider anzufassen.

$('.evo-slider.slider-topangebot:not(.slick-initialized)').slick({
    //dots: true,
    arrows: true,
    slidesToShow: 6,
    responsive: [
        {
            breakpoint: 480, // xs
            settings: {
                slidesToShow: 1
            }
        },
        {
            breakpoint: 768, // sm
            settings: {
                slidesToShow: 2
            }
        },
        {
            breakpoint: 992, // md
            settings: {
                slidesToShow: 3
            }
        }
    ]
});

Und so könnte das fertige Produkt dann aussehen.




Ich hoffe ich habe alles verständlich erklärt und vielleicht hilft es ja tatsächlich jemandem.

Sollten noch Fragen offen sein - immer her damit.

LG
Tomas

 

[ple]

Ist schon ein wenig her, aber vielleicht noch aktuell.
ich versuche mich auch gerade an den Boxen. ich bin ziemlich neu was Sachen Shop angeht.
ich habe mal deinen ersten Code im child js gepackt, nur um zu sehen ob das überhaupt so klappt. Leider hatte der Code keine Auswirkung auf die Standard "Neu im Sortiment" usw.

Kannst du da vielleicht noch ein wenig Unterstützung, was da noch so gemacht werden muss??

Gruß und Danke

 

[R. Kroll]

Hallo ple,

die Anzahl neuer Artikel muß dann auch >3 sein, vielleicht liegt es ja daran
Oder hast du den Selektortyp nicht richtig? Klasse wird z.B. mit .class, ID mit #ID angesteuert.

 

[ple]

Ich habs mal in die custom.js gepackt. Sehr schön, scheint zu funktionieren.
Jetzt mal dein Script angehen, wo ich unterschiedliche Angaben machen kann.
gibt es dafür auch ein Autoplay? wäre ja auch sehr schön.

Gruß und vielen Dank.

 

[R. Kroll]

Autoplay geht über der Slik http://kenwheeler.github.io/slick/