Linke Navigation auf Newsletter Seite ausblenden?

Liebe Community,

meine Newsletter Seite sieht momentan recht unansehlich aus, da aus mir unverständlichen Gründen die Hauptnavigation in der linken Seitennavigation wiederholt wird. Wenn ich versuche, diese Seitennavigation auszublenden über .sidebar-main .sidebar–categories-wrapper {display: none;}, hat dies leider zur Folge dass die gesamte Navigation meiner mobilen Version verschwindet.

Die linke Sidebar scheint also mit der Menüführung in der mobilen Version verknüpft zu sein. Hat jemand eine Idee, wie man diese Sidebar auf der Newsletter Seite ausblenden kann ohne dass dabei die Navigation der mobilen Version verloren geht? Der Link zur URL: www.mixmyshampoo.de/newsletter

Ich freue mich sehr über jede Anregung.

Vielen Dank im Voraus & viele Grüße,
Lisa

*push*

Kennt sich da gar niemand aus? Ich freue mich wirklich sehr über jeden Tipp :slight_smile:

Hallo Lisa,

probier mal folgendes aus: Leg dir folgende Datei in dein Theme an: /frontend/_public/src/less/_modules/sidebar.less

@media screen and (min-width: @tabletViewportWidth) {

    .sidebar-main {		    
		.is--ctl-listing &,
        .is--ctl-forms &,
        .is--ctl-tellafriend &,
        //.is--ctl-newsletter &, // 

 

VG, Newb

p.s.: Dieser Code steuert, wo die Sidebar überall angezeigt wird.

1 Like

Hallo Newb! 

Vielen Dank erstmal für Deine Antwort!! Ich muss nur nochmal nachfragen, da ich mich nicht so gut auskenne: den Code den Du geschickt hast kopiere ich in den Editor und speichere die Datei als sidebar.less in diesen Ordner:

Stimmt das? Und wie kann ich eine Zeile auskommentieren?

Danke nochmals!!

Viele Grüße,

Lisa

Leg dir folgende Datei in dein Theme an: /frontend/_public/src/less/_modules/sidebar.less

Die Datei im eigenen Theme anlegen. Im Backend im Theme Manager auf den Button drücken. Weitere Infos dann auch hier:

https://developers.shopware.com/designers-guide/

1 Like

@Lisa88 schrieb:

Hallo Newb! 

Vielen Dank erstmal für Deine Antwort!! Ich muss nur nochmal nachfragen, da ich mich nicht so gut auskenne: den Code den Du geschickt hast kopiere ich in den Editor und speichere die Datei als sidebar.less in diesen Ordner:

image

Stimmt das? Und wie kann ich eine Zeile auskommentieren?

Danke nochmals!!

Viele Grüße,

Lisa

Guten Morgen Lisa,

ja genau so. Auskommentieren kannst du mithilfe der zwei Slashes (//) wie im Code-Beispiel.

Hast du eine Ordnerebene darüber (in deinem eigenem Theme!) eine all.less? Dort müsste nämlich noch eine Zeile aufgenommen werden, damit wird die sidebar.less dem Theme erstmal bekannt gemacht und importiert wird.

 

Für alle Codeänderungen gilt folgendes Verzeichnis: /themes/Frontend/DEIN THEME/frontend/_public/src/less/

  1. all.less (falls noch nicht existent, bitte anlegen)

    @import “_modules/sidebar.less”;

  2. _modules/sidebar.less

    @media screen and (min-width: @tabletViewportWidth) {

     .sidebar-main {		    
     	.is--ctl-listing &,
         .is--ctl-forms &,
         .is--ctl-tellafriend &,
         //.is--ctl-newsletter &, // 
    

 

VG, Newb 

1 Like

Guten Morgen! :slight_smile:

die all.less Datei gab es schon. Ich habe sie nun um die Codezeile ergänzt, sieht jetzt so aus:

/*
All.less
======================================
The `all.less` file imports all style components that will display on the page.

It includes the plugins `normalize` and `pocketgrid`, the open-sans fontface and the specific less files.
*/

@import "_modules/header"; @import "_modules/sidebar";

 

Dann habe ich die sidebar.less angelegt im Ordner Modules, sieht jetzt so aus:

@media screen and (min-width: @tabletViewportWidth) {

    .sidebar-main {		    
		.is--ctl-listing &,
        .is--ctl-forms &,
        .is--ctl-tellafriend &,
        //.is--ctl-newsletter &, // 

 

Leider kann ich keine Veränderungen im Frontend feststellen (Theme habe ich neu kompiliert und Cache gelöscht). 

Hab ich irgendwas falsch gemacht?

 

Danke & LG,

Lisa

 

Hallo Lisa,

puh… hm… schau doch mal in der originalen sidebar.less nach dem Block „.sidebar-main {…“

Mit den „.is–ctl-xyz“ wird festgelegt, auf welcher Seite (xyz) die Sidebar dargestellt werden soll.

Welche Shopware Version setzt du ein? Zur Not kannst du auch mal die komplette originale sidebar.less posten.

VG, Cedric 

1 Like

@Lisa88 schrieb:

Guten Morgen! :slight_smile:

die all.less Datei gab es schon. Ich habe sie nun um die Codezeile ergänzt, sieht jetzt so aus:

/*
All.less

The all.less file imports all style components that will display on the page.

It includes the plugins normalize and pocketgrid, the open-sans fontface and the specific less files.
*/

@import „_modules/header“; @import „_modules/sidebar“;

 

Dann habe ich die sidebar.less angelegt im Ordner Modules, sieht jetzt so aus:

@media screen and (min-width: @tabletViewportWidth) {

.sidebar-main {
.is–ctl-listing &,
.is–ctl-forms &,
.is–ctl-tellafriend &,
//.is–ctl-newsletter &, //

 

Leider kann ich keine Veränderungen im Frontend feststellen (Theme habe ich neu kompiliert und Cache gelöscht). 

Hab ich irgendwas falsch gemacht?

 

Danke & LG,

Lisa

Das wird so nicht funktionieren denn wenn du das in deiner less auskommentierst, wird es von der original geladen,

richtiger wäre hier der original Eintrag aus der sidebar.less, der darunter ist und dafür sorgt das es auf „display: none“ gesetzt wird.

So müsste es funktionieren, in deine_sidebar.less folgendes kopieren:

@media screen and (min-width: @tabletViewportWidth) {

	.is--ctl-newsletter {

		display: none;

	}

}

Uwe

1 Like

Hallo zusammen, ich habe jetzt die Änderung von Uwe übernommen, meine sidebar.less Datei sieht nun so aus:

Das bringt nur leider auch nichts. 

Eine „originale“ sidebar.less finde ich nicht, ich hab sie mir ja selbst angelegt. Was ich allerdings gefunden habe ist eine Datai die „menuleft“ heißt. Kann man mit der auch arbeiten?

Darin steht folgendes: 

{* Static sites *}
{if $sMenu.gLeft}
    
        {se name="MenuLeftHeading"}Informationen{/se}
        {foreach from=$sMenu.gLeft item=item}
            
                
                    {$item.description}
                
                {if $item.active && $item.subPages}
                    
                        {foreach $item.subPages as $subPage}
                            {$subPage.description}
                        {/foreach}
                    
                {/if}
            
        {/foreach}
    
    
{/if}

 

Danke nochmals!!!

Du musst zwischen Template und Theme unterscheiden!

Die Originale sidebar.less findest du in folgendem Ordner: / themes/ Frontend/Responsive/frontend/_public/src/less/_modules/sidebar.less

Deine Sidebar.less musst du dann auch in den entsprechenden Theme Ordner erstellen.

/ themes/ Frontend/ DEIN THEME /frontend/_public/src/less/_modules/

Viele Grüße

 

1 Like