Hallo, ich bin neu hier, habe bisher immer Magento oder XTC genutzt und wollte jetzt gerne mal Shopware ausprobieren. Nun zu meiner Frage: Gibt es auch für Shopware kostenlose Templates? Gruß Andreas
Shopware liefert im Installpackage ein kostenloses Templates in mehreren Farben mit, die sich einfach anpassen lassen. Ansonsten musst Du auf ein kostenpflichtiges Template zurück greifen.
So siehts aus. Ich kann aber aus eigener Erfahrung sagen das man das Standarttemplate so weit umbauen kann das es hinterher einfach nur geil aussieht, vorausgesetzt man hat Geschmack Ich finde meinen Umbau auch ganz cool ^^ Und ich hatte bis vor 2 Monaten 0 Plan von CSS PHP und co…
[quote=„Gazu“]Ich kann aber aus eigener Erfahrung sagen das man das Standarttemplate so weit umbauen kann das es hinterher einfach nur geil aussieht, vorausgesetzt man hat Geschmack :P[/quote] Pic or it didn’t happen.
xD Warte
Danke für die Antwort. Ich werde mir das mal anschauen
Eine Frage habe ich noch…ich schaue mir gerade die ganzen tpl Datei an und versuche auf der Artikeldetailseite mit das Menü links anzeigen zu lassen. Nur irgendwie klappt das nicht. Was muss ich machen?
Ich gehe davon aus dass du, wie in der Wiki beschrieben, ein eigenes Template angelegt hast, in dem du alle Änderungen durchführst. Einfachster Weg von Anfang an: Schau dir an wo das Menü links bereits eingebunden ist. Zum Beispiel auf der Kategorie-Seite. Dann öffnest du den Inspector deiner Wahl (Firebug, Anleitung im Wiki) oder Chrome Developer Tools und schaust nach einer Klasse oder ID die du dir merkst. Im Beispiel die Box mit der Service-Navigation links auf der Kategorienseite: “servicenav” Dann suchst du im Editor deiner Wahl (Notepad++, Sublime Text 2, etc.) im templates-Verzeichnis nach dieser Klasse, und wirst fündig im _default und _emotion-Template. Und zwar gibt es da die “menu_left.tpl” im Ordner “frontend/index”. Um also das Service-Menü in die Detailseite zu bekommen, gehst du dorthin wo die Detailseite zusammengebaut wird aus den einzelnen Blöcken (“dein_template/frontend/details/index.tpl”) und fügst an der richtigen Stell (im Inspector zusammensuchen) die menu_left.tpl ein. {block name='frontend\_index\_navigation\_categories\_top'} {include file='frontend/index/menu\_left.tpl'} {/block}
Nun erstellst du noch eine leere “menu_left.tpl” in deinem eigenen Template im Ordner “index” und schreibst hinein {extends file='parent:frontend/index/menu\_left.tpl'}
wodurch sich dein Template den Inhalt der menu_left.tpl aus der Version des _emotion-Templates holt. Wenn dies im Zuge eines Updates geändert wird, musst du nichts anpassen oder ändern. So gehst du bei allen “Block-Verpflanzungen” vor. Das Design kann allerdings kaputt aussehen danach, weil es nicht darauf ausgelegt ist, dass links noch ein Block ist. Genauer kann und will ich nicht darauf eingehen jetzt, da eine komplette Anleitung zum Erstellen von Templates meinen Rahmen etwas sprengen würde hier - aber wenn du spezifische Fragen hast, stell sie gerne. Viel Glück!
Super danke, das hat schon mal geklappt. Nun wird aber das Produkt (Detailansicht) unter dem Menu angezeigt, weil es von der Breite her zu Groß ist. Jetzt muss ich das ja nur in der CSS Datei ändern. Finde das dort aber nicht. Habe hier geschaut _emotion/frontend/_resources/styles/emotion.css und dort nach grid_16 gesucht…dort steht width:998, aber wenn ich das änder dann passiert nichts. Oder muss ich es voanders ändern? Gruß Andreas
Achtung, wenn du eine Eigenschaft im CSS änderst, welche auch anderswo verwendet wird, dann änderst du zum Beispiel überall im Shop auf allen Seiten die Breite aller Container die mit .grid_16 formatiert werden bzw. deren Breite. Das kann hässliche Folgen haben. Am sichersten (wenn auch nicht am saubersten) fährst du damit, dir die body-Klasse zunutze zu machen. Der HTML-body hat in Shopware je nach Shop-Bereich spezifische Klassen. Auf der Detailseite lautet diese “ctl_detail”. Also schaust du am besten woher die Breite des Artikel-Containers kommt: Suche das größte Element welches den Artikel umschließt ohne andere Elemente zu umschließen - in diesem Fall ein Div mit der ID “detail” und den Klassen “grid_16”, “first” und “last”. Ausserdem siehst du im Code-Inspector nun rechts (normalerweise) das CSS, und woher es kommt. Bei mir (Chrome Developer Tools) steht emotion.css:1499 #content #detail { padding: 50px; margin: 0; width: 898px; }
D.h. die Breite wird in Zeile 1499 der emotion.css festgelegt. Gehe also in dein eigenes CSS (ich hoffe du hast ein eigenes Template angelegt), und füge deinen Code ein: .ctl\_detail #detail { width: 500px; }
Damit sprichst du das #detail-Div nur auf der Detail-Seite an (in dem Fall nicht unbedingt nötig, da #detail glaube ich nur auf der Detail-Seite zum Einsatz kommt, es ist jedoch nie verkehrt, möglichst spezifisch zu sein - auch um die Standard-Werte zu überschreiben manchmal. Bei CSS gilt (unter anderem) nämlich: Desto genauer, desto wichtiger die Regel für den Browser/Interpreter.). Jetzt musst du aber vermutlich immer noch innerhalb des #detail-Divs einiges zurechtbasteln da es eben auf diese schmale Breite nie ausgelegt war. Grundsätzlich ist der Weg aber immer derselbe wie hier beschrieben - 1. Element suchen 2. CSS identifizieren dass du ändern musst 3. Am besten im Browser per Inspektor live mit den Werten spielen bis das Ergebnis passt 4. Dann die eigene CSS-Datei entsprechend anpassen Wenn’s hilfreich war, fänd ich’s nett wenn du auf “Bedanken” klickst. Viel Glück!