Bilderbreite bei Bestseller

[swisshurricane]

Hallo Zusammen

Kann mir Jemand sagen, wo die Breite der Bestseller-Bilder definiert wird?
Über das CSS carousel Bestseller box komme ich nicht weiter.

Gruss
Harry

Linkback: https://www.modified-shop.org/forum/index.php?topic=40870.0

[hpzeller]

Für das Template tpl_modified_responsive der aktuellen Shopversion 2.0.5.0, in der Datei templates\tpl_modified_responsive\javascript\extra\bxslider.js.php bei folgender Codesequenz.

Code: Javascript  [Auswählen]

    $('.bxcarousel_bestseller').bxSlider({
      nextText: '<i class="fas fa-chevron-right"></i>',
      prevText: '<i class="fas fa-chevron-left"></i>',
      minSlides: 2,
      maxSlides: 8,
      pager: ($(this).children('li').length > 1), //FIX for only one entry
      slideWidth: 124,
      slideMargin: 18
    });

Wenn du den Wert von slideWidth erhöhst werden die Bilder grösser, dann solltest du aber den Wert slideMargin kleiner machen, sonst stimmt die Gesamtbreite des Sliders nicht mehr.

Gruss
Hanspeter

[Eddi]

Hallo,

wollte auch die Breite der Bestseller Bilder auf der Startseite ändern.
Scheinbar ist es im Shop 2.0.6.0 Template tpl_modified responsitiv anders. Die Datei boxslider.js.php befindet sich nicht an der genannten Stelle.

mfg
Eddi

[swisshurricane]

Soweit ich das dokumentiert habe, kannst das an folgenden Stellen anpassen:

shoproot/templates/tpl_modified_responsive/stylesheet.css

ul.bxcarousel_bestseller li {
width:223px;

ul.bxcarousel_bestseller li .carousel_box .cb_image {         
height:213px;

ul.bxcarousel_bestseller li .carousel_box .cb_image img {     
max-height: 210px;

shoproot/templates/tpl_modified_responsive/javascript/extra/bxslider.js.php 
slideWidth: 224,

shoproot/templates/tpl_modified_responsive/javascript/extra/slick.js.php
   $('.slider_bestseller').slick({
      dots: true,
      arrows: true,
      infinite: true,
      speed: 500,
      slidesToShow: 3,
      slidesToScroll: 3,
      responsive: [
        { breakpoint: 1060, settings: { slidesToShow: 3, slidesToScroll: 3, dots: true, arrows:false } },
        { breakpoint:  800, settings: { slidesToShow: 3, slidesToScroll: 3, dots: true, arrows:false } },
        { breakpoint:  600, settings: { slidesToShow: 3, slidesToScroll: 3, dots: true, arrows:false } },
        { breakpoint:  400, settings: { slidesToShow: 2, slidesToScroll: 2, dots: true, arrows:false } }
      ]

[Markus]

Hi Eddi,

wenn du nur die Breite der Bilder ändern willst nicht aber die Anzahl dann musst du den Wert hier anpassen.

stylesheet.css

Code: CSS  [Auswählen]

.slider_bestseller .carousel_box .cb_image:before {
    content: "";
    display: block;
    padding-top: 78%;
}

Die 78% steuern die Höhe des Containers.
Bei 100% bekommst du z.B. einen quadratischen Container.
Das Bild wird darin automatisch angepassts.

Markus

[Eddi]

Hallo,

zunächst vielen Dank für die Antworten.

Haben leider nicht das gewünschten Ergebnis gebracht.

An swisshurricane. Wie ich bereits schrieb, fehlt in meinem Template die Datei bxslider.js.php. In einem älteren Shop habe ich es ähnlich Deiner Anleitung umgesetzt.

An Markus. Wenn ich den Wert auf 100 % oder auch höher stelle ändert sich die Höhe der Box, aber die Breite bleibt unverändert. Übersehe ich hier eventuell noch etwas?

Eddi

[Markus]

Hi Eddi,

daher war meine Frage was du ändern willst.
Die reine Bildbreite geht über das CSS ... wenn du aber generell die Box breiter haben möchtest kannst du auch nur 5 anstatt 6 Artikel anzeigen lassen.

Das stellst du hier ein:
/tpl_modified_responsive/javascript/extra/slick.js.php

Da findest du diesen Abschnitt für die Anzahl der Artikel pro Reihe.

Code: PHP  [Auswählen]

    $('.slider_bestseller').slick({
      dots: true,
      arrows: true,
      infinite: true,
      speed: 500,
      slidesToShow: 6,
      slidesToScroll: 6,
      responsive: [
        { breakpoint: 1060, settings: { slidesToShow: 5, slidesToScroll: 5, dots: true, arrows:false } },
        { breakpoint:  800, settings: { slidesToShow: 4, slidesToScroll: 4, dots: true, arrows:false } },
        { breakpoint:  600, settings: { slidesToShow: 3, slidesToScroll: 3, dots: true, arrows:false } },
        { breakpoint:  400, settings: { slidesToShow: 2, slidesToScroll: 2, dots: true, arrows:false } }
      ]
    });

Den musst du dann entsprechend anpassen. 

Markus

[Eddi]

Hi Marcus,

ok, jetzt habe ich es auch verstanden. So wollte ich es haben. Nochmals vielen Dank.

Eddi