Galeriebilder auf Artikeldetailseite, Höhe ändern + Teaser Slider nach rechts rücken

Thema wurde von Capricorni, 13. Oktober 2017 erstellt.

  1. Capricorni

    Capricorni Erfahrener Benutzer

    Registriert seit:
    8. August 2015
    Beiträge:
    132
    Danke erhalten:
    1
    Danke vergeben:
    41
    Hallo Ihr Lieben,

    jetzt benötige ich auch mal wieder eure Hilfe. Leider habe ich nichts passendes in der Suche gefunden.

    1. Meine Galeriebilder auf den Artikeldetailseiten sind mir zu hoch, aber ich habe nirgendwo gefunden, wie ich da die Höhe verändern kann. Ausgetestet habe ich schon alles mögliche, aber die Änderungen gelten nur für die Übersichtsseite, nicht aber für die Artikelseiten. Am liebsten wäre mir aber, wenn die Galeriebilder nicht links neben dem großen Bild wären, sondern unter diesem Bild. Ist das irgendwie machbar und wenn ja, wie?

    2. Ich habe auf der Startseite einen Teaser Slider drin, hätte den aber gerne rechtsbündig, damit die Kategorien linksbündig direkt oben am Header anfangen, optisch so wie im Testshop 2. Ist das umsetzbar mit den Boardmitteln?

    Mein Shop: https://stickdatei-und-digitales.capricorni.net/de/

    PS: Wo kann ich da denn das /de ausstellen? Das geht mir schon die ganze Zeit auf den Keks. Unter - Land - Steuern - Sprache ist Englisch ausgeschalten. In meinem anderen Shop ist das nicht so, allerdings ist der schon älter und lief vorher über EyeCandy.

    Vielen Dank schonmal vorab
    Kathi
     

    Anhänge:

  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Ich fange von hinten an:
    Shop Einstellungen -> SEO ->Sprachcode in URLs integrieren

    2. Das im Testshop 2 ist ein Bild , das über den Content-Manager eingefügt wurde. Ob man den Teaser da so hinbekommt
    und ob das wirklich gut aussehen würde, kann ich Dir leider nicht sagen.

    zu 1.
    Du kannst Dir hier
    (Link nur für registrierte Nutzer sichtbar.)
    das Template des Testshop 2 runterladen (achte auf Deine Version)
    Da findest Du unter templates/ Honeagrid/ snippets/ product_info/ images/
    die DAtei
    product_images-USERMOD.html
    in der Datei ist die Änderung enthalten, um die Galerie unter dem Artikelbild auszugeben.

    Danach muss aber noch der Style angepasst werden, sonst bleibt links eine Lücke als Platzhalter.
     
  3. Capricorni

    Capricorni Erfahrener Benutzer

    Registriert seit:
    8. August 2015
    Beiträge:
    132
    Danke erhalten:
    1
    Danke vergeben:
    41
    Hallo Barbara,

    ich danke dir schonmal. Das erste Problem mit dem /de konnte ich schonmal ausschalten :)
    Jetzt muss ich mir mal die Anleitung dazu durchlesen, wie ich das hinbringe, die Usermod so einzubinden, daß es passt. Ein Test-Template hab ich schonmal angelegt, bzw. das jetzige dupliziert.

    Mh, das mit dem Teaser könnte man dann vermutlich nur mit einem Plugin oder sowas lösen, über den Kontentmanager, richtig? Gibts da irgendwie beim Bild einfügen eine Möglichkeit, das in Reihenfolge ablaufen zu lassen? Vermutlich nicht, oder?
     
  4. Capricorni

    Capricorni Erfahrener Benutzer

    Registriert seit:
    8. August 2015
    Beiträge:
    132
    Danke erhalten:
    1
    Danke vergeben:
    41
    PS: Sollte mir das mit der Galerieumstellung zu kompliziert werden ( was durchaus möglich ist, möchte mir ungern den Shop zerschießen), wie kann ich denn die Höhe der aktuellen Galerie anpassen? Das dunkelrot hinterlegte ich mir zu hoch, ich hätte es gerne kompakter, kleiner..
     

    Anhänge:

  5. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Die Höhe richtet sich nach Dingen:
    Die Höhe des Artikelbildes = die Hohe der gesamten Galerie
    die Anzahl der Bilder, die auf der Leiste angezeigt werden sollen - je mehr Bilder, desto geringer die Höhe.
    Kopiere die Datei
    templates/ Honeagrid/ snippets/ product_info/ images/
    product_images.html
    und speicher die Kopie im selben Verzeichnis als
    product_images-USERMOD.html
    In der Usermod
    suchst Du nach
    HTML:
    <div class="product-info-thumbnails hidden-xs hidden-sm swiper-vertical">
            {include file="get_usermod:{$tpl_path}snippets/product_info/images/swiper.html" swiperId="product_thumbnail_swiper" startWidget="true" swiperImages=$thumbnails itemProp=$RICH_SNIPPET_ARRAY.product_itemprop_image swiperTarget="#product_image_swiper" swiperOptions=", \"spaceBetween\": 10, \"loop\": false, \"direction\": \"vertical\", \"slidesPerView\": 4, \"autoplay\": null" additionalData="data-swiper-breakpoints=\"[]\""}
        </div>
    An der sTelle: \"slidesPerView\": 4, \"autoplay\" änderst Du die "4" z.B. in eine "6"

    P.S. ich habe "nur" einen 22" Monitor.
    Deine Seite würde ich normaler weise sehr schnell wieder verlassen, weil mich das alles erschlägt.
    Ich bin erst mal mit meinem Stuhl einen Meter weiter nach hinten gerutscht.
     
  6. Capricorni

    Capricorni Erfahrener Benutzer

    Registriert seit:
    8. August 2015
    Beiträge:
    132
    Danke erhalten:
    1
    Danke vergeben:
    41
    Es hat nicht funktioniert. Hab ne Fehlermeldung bekommen und der Shop war nicht mehr erreichbar... :(
    Hab die geänderte Usermod wieder gelöscht. Irgendwas haut da nicht hin.
    Ich hab meine beiden Shops eigentlich auch noch mit meinem ´13er MacBook nachkontrolliert. Da hat mich jetzt nix erschlagen. Meinst du die Breite, oder die Farben, oder die Schriftgrößen?

    Mh, hab jetzt gerade am Rechner von meinem Mann geschaut, da ist nichtmal der Teaser Slider zu sehen und oben wird mein Banner abgeschnitten... :confused:
     
  7. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Auf einem kleineren Monitor kann das ja gut aussehen,
    ich habe mal ein Bild gemacht, vielleicht hilft das ja etwas:
    Unbenannt.JPG

    Das ist nicht die ganze Höhe, aber die ganze Breite
     
  8. Capricorni

    Capricorni Erfahrener Benutzer

    Registriert seit:
    8. August 2015
    Beiträge:
    132
    Danke erhalten:
    1
    Danke vergeben:
    41
    Also bei mir sieht es auch so aus. Finde jetzt nicht, das es einen erschlägt. Hab als Breite 1600px drin. Mein anderer Shop ist auch so aufgebaut ( www.capricorni.net). Aber ich habe festgestellt, das es bei anderen Breiten echt Probleme gibt und bei großen Bildschirmen, siehts mit z.B. 1200px so mickerig aus. Anbei mal mein Screenshot mit 1600px, einer mit 1200px und einer von meinem MacBook Bildschirm. Da ist überall die Breite des Banners angepasst, nur bei dem mistigen HP Laptop von meinem Mann nicht.
     

    Anhänge:

  9. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Ich meine nicht die Startseite, sondern die Artikelseiten.

    Und falls man es nicht auf dem Bild sieht:
    der rechte Bereich mit dem Warenkorb-Button nimmt fast ein Drittel das Bildschirms ein.
    Dein Bild-Bereich ist 900px hoch, Die Bilder, die ich gesehen habe, sind aber nur 500 - 600px hoch. Das ist verschenkter Platz, den ich als Kunde unnötig scrollen muss.
    Der Bereich für die Galerie-Bilder ist 280px breit, die Galeriebilder sleber sind aber nur 94px breit. Dadurch entsteht da eine große Lücke und die Pfeile sind nicht über und unter den Bildern, sondern zur Seite versetzt.
    von Text sehe ich erst etwas, wenn ich nach unten Scrolle.
     
  10. Capricorni

    Capricorni Erfahrener Benutzer

    Registriert seit:
    8. August 2015
    Beiträge:
    132
    Danke erhalten:
    1
    Danke vergeben:
    41
    Achso, könnte man eigentlich den Text im Banner den ich drin habe, und den Handmade Button separat einfügen im Header? So würde das dann zumindest auf jeder Bildschirmbreite passen.
    Warum das beim HP meines Mannes anders aussieht, weiß ich auch nicht. Aber das Teil ist eh ne Krücke.. Witzigerweise sieht es im IE und in Safari nochmal anders aus, als im Firefox ( damit arbeite ich mit Gambio).
     

    Anhänge:

  11. Capricorni

    Capricorni Erfahrener Benutzer

    Registriert seit:
    8. August 2015
    Beiträge:
    132
    Danke erhalten:
    1
    Danke vergeben:
    41
    Ah ok, aber an dem Warenkorbbereich, hab ich nix geändert. Ändere ich den Platz dort über die Grid-Spalten, oder ist es sinnvoller, den Bereich von 1600px auf 1200-1400px zu reduzieren? Damit sollte der Warenkorbbereich ja auch schmaler werden. Stimmt, meine Bilder sind normalerweise um die 600px hoch. Das habe ich gerade abgeändert auf 500px. Könnte auch 600px machen.

    PS: Die Pfeile sind immer noch versetzt, wie bekomme ich die untereinander? Die Breite der Galerie hab ich jetzt auf 100px gesetzt.
     
  12. Capricorni

    Capricorni Erfahrener Benutzer

    Registriert seit:
    8. August 2015
    Beiträge:
    132
    Danke erhalten:
    1
    Danke vergeben:
    41
    Ah, ich habs selber rausgefunden. War die Breite der Thumbnails :) Jetzt sollte es, bis auf die Breite der Warenkorbanzeige eigentlich angenehmer sein.
     
  13. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Der Kasten mit dem Warenkorb-Button ist zwar immer noch riesig, aber so ist es schon viel besser :)
     
  14. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Zu Deinem Header:
    der Hintergrund passt sich nicht dem Bildschirm an.
    Du hast da ein
    background-size: auto;
    stehen, wenn ich statt "auto" da "100%" eingebe, wird es mit dem Bildschirm kleiner.
    Dann hast Du ein Problem mit dem Warenkorb.Du hast dem ein Padding-Top von 70px gegeben, das ist bei einem großen Monitor gut, aber bei kleineren rutsch das nach unten.
    Wenn Du bei Auflösungen bis 991px die Farbe auf dunkelrot stellst und das padding-top auf 30px
    würde das unter 991px so aussehen:
    Unbenannt-1.JPG

    Ab 992px die Farbe auf weiß ändern und das padding-top auf 60px
    Unbenannt-2.JPG

    Man könnte es noch ab 1600px auf padding-top: 70px hochstellen,
    60px: Unbenannt-3.JPG 70px: Unbenannt-4.JPG
     
  15. Capricorni

    Capricorni Erfahrener Benutzer

    Registriert seit:
    8. August 2015
    Beiträge:
    132
    Danke erhalten:
    1
    Danke vergeben:
    41
    Danke dir Barbara... ich hab den Warenkorb jetzt schwarz gemacht und das Banner nochmal vergrößert und im Shop alles ( hoffentlich) angepasst.
    Mit der Ausrichtung des Warenkorbes werde ich aber wahnsinnig. Entweder es ändert sich überhaupt nichts, wenn ich da was eingebe, oder so, daß ich nicht nachvollziehen kann, wie denn was jetzt zusammenhängt. Ich gestehe, das fand ich bei EyeCandy echt besser, daß man durch den Mouseover sehen konnte, mit welchem Parameter, was geändert wurde. Das fehlt mir bei Honeygrid sehr.
    Kannst du mir sagen was ich einstellen muss, damit ich den Warenkorb in die roten Felder bekomme? Auch die Anzeige von der Menge im Warenkorb. Spiele jetzt schon ewig daran rum und komme auf keinen grünen Zweig :-(
    Von mir aus, kann der Warenkorb auch im hellen Bereich sein, würde beides passen.
     

    Anhänge:

  16. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Bei mir ist das immer noch weiß, demnach sehe ich Deine Änderungen noch nicht (nicht gespeichert?)
    Ich kann Dir nachher mal die css-Codes raussuchen, mit der ich die Anzeige oben hinbekommen habe.
     
  17. Capricorni

    Capricorni Erfahrener Benutzer

    Registriert seit:
    8. August 2015
    Beiträge:
    132
    Danke erhalten:
    1
    Danke vergeben:
    41
    Mh, gespeichert hab ich alles, aber irgendwie wurde das wohl nicht richtig übernommen. Nach dem Cache löschen gings und müsste jetzt es aber sichtbar sein.
    Die Breite habe ich jetzt von 1600px auf 1400px reduziert. Ich verstehe auch nicht, warum es mir in Safari/ IE anders von der Breite angezeigt wird, als bei Firefox. Der Bildschirm ist ja der gleiche.
     
  18. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Jeder Browser Interpretiert bestimmte Codes anders.
    Der IE ist da z.B. ein ganz besonders eigensinniger Browser, für den man schon immer nach Möglichkeit einen eigenen Style
    erstellen musste.
     
  19. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Ich habe mal geschaut, spiele mal etwas mit den Werten (das wo Du von 70px auf 60px runter gegangen bist),
    Wenn ich da z.B. "0px" eingebe, ist es immer im weißen bereich und das Icon für die Menge steht genau am Warenkorb.
    Unbenannt.JPG

    Ich nutzte übrigens Chrome. :)
     
  20. Capricorni

    Capricorni Erfahrener Benutzer

    Registriert seit:
    8. August 2015
    Beiträge:
    132
    Danke erhalten:
    1
    Danke vergeben:
    41
    Ich hab schon soviel rumgespielt das ich schon gar nicht mehr durchblicke, was für was zuständig ist. Aber ich hab da jetzt mal 0 eingetragen und schwups, ist der Warenkorb zumindest auf einer Höhe mit den dazugehörigen Pictures.
    Gibts denn da nirgendwo eine Anleitung wo steht, welche Änderung für was ist? Mit Sticky usw. kann ich halt nicht viel anfangen, auch nicht mit vertikaler ausserer Abstand usw...