Im 3. Teil unserer Shopware 5 Beitragsreihe zeigen wir euch wie man ein eigenes Shopware 5 Theme anlegt und Anpassungen am Shopware 5 Design vornimmt.
Hier vorab zwei wichtige Tipps, die man gar nicht oft genug nennen kann:
– Ihr habt eine LESS Datei angepasst, aber seht keine Änderung? -> Kompiliert euer Theme!
– Ihr habt das Tehme kompiliert aber es tut sich trotzdem nichts? -> Löscht den Cache!!
1. Shopware 5 Theme erstellen:
- 1.1 Theme Manager
- 1.2 Vorschaubild
2. Shopware 5 Theme anpassen – Header
- 2.1 Header – Cookie Plugin
- 2.2 Header – Navi-Links
3. Shopware 5 Theme anpassen – Produkt-Detailseite
- 3.1 Produkt-Detailseite – Artikelnummer Anzeige anpassen
- 3.2 Produkt-Detailseite – Staffelpreis Anzeige anpassen
- 3.3 Produkt-Detailseite – Ähnliche Artikel ausblenden
- 3.4 Produkt-Detailseite – Anführungsstriche in Beschreibung entfernen
4. Shopware 5 Theme anpassen – Kategorie-Listen
- 4.1 Kategorie-Listen – Artikelnummern abkürzen
- 4.2 Kategorie-Listen – Eigenes Produktlayout
- 4.3 Kategorie-Listen – Artikelnummern in Listen anzeigen
- 4.4 Kategorie-Listen – Warenkorb Button in Listen anzeigen lassen >
5. Shopware 5 Theme anpassen – Sidebar
- 5.1 Sidebar – Rahmenfarbe anpassen
- 5.2 Sidebar – Aktive Kategorie Links bearbeiten
- 5.3 Sidebar – Paypal Feld anpassen
6. Shopware 5 Theme anpassen – Footer
- 6.1 Footer – Newsletter Spalte entfernen
7. Shopware 5 Theme anpassen – Einkaufswelten
- 7.1 Einkaufswelten – Einkaufswelten Slider-Pfeile, Farbe
- 7.2 Einkaufswelten – Artikel korrekt verlinken
1.1 Shopware 5 Theme erstellen – Theme Manager
Gehen Sie in den Bereich: Einstellungen > Theme Manager und klicken Sie dann auf Theme erstellen.
Wählen Sie als Vorlage auf jeden Fall Responsive, wenn Sie nicht schon ein Diplom in Shopware-Wissenschaften besitzen. Wählen Sie zudem einen Namen, eine Beschreibung sowie Lizenz-Art. Ich empfehle: MIT.
Wer ganz sauber arbeiten möchte legt sein Theme lokal an, so werden nicht gleich alle möglichen leeren Unterordner mit angelegt. Oder man löscht eben nachträglich alles unnötige an Ordnern, das geht am einfachsten.
1.2 Shopware 5 Theme erstellen – Vorschaubild
Wer mag kann noch die preview.png neu anlegen, damit es in der template Auswahl nicht so langweilig aussieht. Die Datei sollte direkt im obersten Verzeichnis des Themes abgelegt werden. Hier kommen die Maße: 133 x 98px.
2.1 Shopware 5 Theme anpassen – Header: Cookie Plugin
Wer bei der Installation von Shopware das Standard-Cookie-Plugin installiert hat, wird eventuell das Bedürfnis verspüren die Hintergrundfarbe anzupassen.
Hierfür können Sie so vorgehen: Legen Sie in Ihrem Theme die Datei „/themes/Frontend/ByouteaTheme/frontend/_public/src/css/byoutea.css“ an. Die Namen ByouteaTheme und byoutea.css sind Ihrem eigenen Theme entsprechend anzupassen.
Nun zum Inhalt:
/* HEADER - Cookie Bar - BG color */
.cookie-bar {
background: #25beac !important;
}
Und hier das Ergebnis:
2.2 Shopware 5 Theme anpassen – Header: Navi-Links
Wenn Sie die Navi-Links anpassen möchten, benötigen Sie in Ihrem childtheme die Datei /less/modules/main-navigation.less bearbeiten. So könnte man zum Beispiel die Top-Navi Links in ihrer Größe ein wenig verkleinern:
/* Header - Navi - Link-Textgröße */
.navigation-main .navigation--link {
font-size: 15px;
}
3.1 Shopware 5 Theme anpassen – Produkt-Detailseite: Artikelnummer Anzeige anpassen
Wer, so wie ich gerade, das Bedürfnis hat den doch sehr riesigen Abstand zwischen dem Wort Artikelnummer und der eigentlichen Nummer zu verringern kann dies auf folgendem Wege erledigen: Zuerst einmal braicht ihr in eurem theme die Datei detail.less – die Datei muss im Ordner a/themes/Frontend/euertheme/frontend/_public/src/less/_modules abgelegt werden und dann noch in der modules.less eingetragen werden.
Der Inhalt der detail.less hingegen sollte so aussehen:
/* Abstand zwischen dem Wort ARTIKELNUMMER und der eigentlichen Nummer verringern */
.product--details .product--base-info .entry--label {
width: auto;
}
Die Anmerkung könnt ihr natürlich auch weglassen, wenn ihr Platz sparen wollt. Auf jeden Fall wird dem Feld für das Wort Artikelnummer die Größe nun automatisch und schwer dynamisch zugewiesen. Vorher war die Breite starr auf 35% festgelegt. Woher ich das weiß? Ganz einfach: Ich bin bei der freiwilligen Feuerwehr und ein Arbeitskollege hatte eine Nutoka-Brot dabei.
In dem oberen Screenshot seht ihr wie es vorher war. Anstandshalber soll ein Screenshot der angepassten Version nicht fehlen. Zukünftige Shopware Superstars werfen auch 1-3 Blicke in den CSS Bereich.
3.2 Shopware 5 Theme anpassen – Produkt-Detailseite: Staffelpreisanzeige anpassen
Ein Kunde hatte zum Beispiel mal den Wunsch in den Staffelpreisen die Worte Stück und je ergänzen zu lassen. Hört sich erstmal komisch aber, aber dieses Screenshot erklärt sehr deutlich wo die beiden Worte eingesetzt wurden:
Um eine solche Anpassung vorzunehmen braucht ihr in eurem Theme die Datei: frontend/detail/block_price. Dort findet ihr die entsprechenden Stellen. Das Wort je kommt dann z.B. vor:
{$blockPrice.price|currency}
3.3 Produkt-Detailseite – Ähnliche Artikel ausblenden
Nicht jeder Shop Betreiber hat Lust auf die Cross-Selling Leiste wo unter anderem auch die ähnlichen Artikel angezeigt werden. Aus dem Backend kann man diese Funktion leider nicht deaktivieren. Daher gehören folgende Zeilen in eure global.less Datei eures childthemes:
/* Ähnliche Artikel ausblenden */
.tab-menu--cross-selling {
display: none;
}
Dann solltet ihr das Theme kompilieren, falls der Cache aktiviert ist. Sonst sieht man keine Änderungen. Zumindest nicht im Regelfall.
Update vom 16.05.2017: Man kann die ähnlichen Artikel doch im Backend anpassen. Einfach mal bei den Einstellung „Cross-Selling“ eingeben und da die ANzahl der angezeigten Ähnlcihen Artikel auf 0 setzen…
4.1 Shopware 5 Theme anpassen – Kategorie-Listen: Artikelnamen abkürzen
Wenn ihr die Artikelnamen abkürzen wollt, könnt ihr dafür folgenden Code verwenden:
.product--box .product--title {
height: 23px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
Was passiert da genau? Der Artikelname bekommt einen Höhe von 23px und kann damit schonmal nicht über 2 Zeilen gehen es sei denn die Schrift ist sehr winzig (macht das bitte nicht…). Alles was zu lang ist wird abgeschnitten und ans Ende werden 3 Punkte gesetzt. Wie viel vom Artikelnamen angezeigt wird, ist im Endeffekt davon abhängig wie breit die Artikelbox in euren Listen ist. Bei Artikeln mit kurzen Namen spielt das natürlich keine Rolle.
In welche Datei kommt der Code:
/themes/Frontend/euertheme/frontend/_public/src/less/_modules/product-box.less
Wie sieht das Ergebnis aus:
Und hier sieht man, wie die gleiche Liste aussieht wenn etwas mehr Platz vorhanden ist:
4.2 Shopware 5 Theme anpassen – Kategorie-Listen: Eigenes Produktlayout
Ursprünglich kann man im Kategorie Bereich des Backends 3 verschiedene Layouts für die Kategorie-Ansichten auswählen:
Wer eine zusätzliche option sucht kann sich mit ein paar Anpassungen der .less Dateien weiterhelfen. Das Ergebnis wird eine Mischung des Layouts „Großes BIld“ und „Nur wichtige Informationen“. Wenn man die Sidebar nutzt werden nur 2 große Bilder angezeigt. Verwendet man hingegen Nur wichtige Informationen werden gleich 4 Artikel nebeneinander angezeigt. Mit den unten beschriebenen Anpassungen erreichen wir, dass 3 Artikel angezeigt werden.
Das hier gehört im childtheme in den Ordner less/modules/product-box.less
/* PRODUCT BOX - FULL CONTAINER - less width to show more in 1 line */
.box--image {
width: 33.33%;
}
Achtung: wenn die Datei neu angelegt wird muss sie auch in der modules.less aufgelistet werden! Um das Ergebnis zu sehen muss man bei der Kategorie Großes Bild wählen, da mit diesem Codeschnipsel die großen Bilder verkleinert werden. Die normale Version kann jetzt nicht mehr verwendet werden.
Nach ein paar Tests muss ich sagen: 3 Artikel in einer Reihe sehen in schmaleren Browsern semi-optimal aus. Es empfiehlt sich also die Anpassungen erst ab einer bestimmten Breite zu aktivieren. Ich habe es so gemacht, der Zweite Schnipsel ist um die Höhe der Bilder anzupassen, den braucht ihr nur, wenn ihr Bilder im Quer- statt Hochformat verwendet.
@media screen and (min-width: 68em) {
/* PRODUCT BOX - FULL CONTAINER - less width to show more in 1 line */
.box--image {
width: 33.33%;
}
/* PRODUCT BOX - IMAGE HEIGHT, make smaller for widescreen pictures */
.box--image .product--image {
height: 180px;
}
}
Denkt daran nach dem Upload den Cache zu löschen!! Denn sonst seht ihr die Änderung nicht und fragt euch warum!
4.3 Kategorie-Listen – Artikelnummern in Listen anzeigen
Um in den Shopware Kategorie-Listen die Artikelnummern anzuzeigen sind folgende Schritte notwendig:
a) Im Childtheme muss die Datei frontend/listing/product-box/box-basic.tpl angelegt werden.
ich kann jetzt viel erzählen aber ich poste gleich mal den Code:
[code]
{extends file=’parent:frontend/listing/product-box/box-basic.tpl‘}
{block name=’frontend_listing_box_article_info_container‘}
<div class="product–info"> {* Product image *}
{block name=’frontend_listing_box_article_picture‘}
{include file="frontend/listing/product-box/product-image.tpl"}
{/block} {* Customer rating for the product *}
{block name=’frontend_listing_box_article_rating‘}
<div class="product–rating-container">
{if $sArticle.sVoteAverage.average}
{include file=’frontend/_includes/rating.tpl‘ points=$sArticle.sVoteAverage.average type="aggregated" label=false microData=false}
{/if}
</div>
{/block}
{* G2G – Anpassung: Artikelnummer in Artikelbox anzeigen *}
{if $sArticle.ordernumber}
{block name=’frontend_detail_data_ordernumber‘}
<div class="listing–dataid">
{se name="DetailDataId"}{/se}<span class="listing–ordernumber">{$sArticle.ordernumber}
</div>
{/block}
{/if}
{* Product name *}
{block name=’frontend_listing_box_article_name‘}
<a href="{$sArticle.linkDetails|rewrite:$sArticle.articleName}" class="product–title" title="{$sArticle.articleName|escape}"> {$sArticle.articleName|truncate:50} </a>
{/block}
{* Product description *}
{block name=’frontend_listing_box_article_description‘}
<div class="product–description">
{$sArticle.description_long|strip_tags|truncate:240}
</div>
{/block}
{block name=’frontend_listing_box_article_price_info‘}
<div class="product–price-info">
{* Product price – Unit price *}
{block name=’frontend_listing_box_article_unit‘}
{include file="frontend/listing/product-box/product-price-unit.tpl"}
{/block}
{* Product price – Default and discount price *}
{block name=’frontend_listing_box_article_price‘}
{include file="frontend/listing/product-box/product-price.tpl"}
{/block} </div> {/block}
{* Product actions – Compare product, more information, buy now *}
{block name=’frontend_listing_box_article_actions‘}
{include file="frontend/listing/product-box/product-actions.tpl"}
{/block} </div>
{/block}
[/code]
So muss die Datei also aussehen. Als nächstes geht man dann zu den Textbausteinen und sucht nach DetailDataId. Ist es da, kann der entsprechende Titel eingegeben werden. Man muss aber darauf achten, dass es auch und die richtige Datei geht. Andernfalls könnt ihr den Textbaustein von hand nachtragen. Hier seht ihr 2 Einträge – der 1. war schon da und den 2. habe ich eingetragen. Jetzt wird der Inhalt anstelle der Variable angezeigt:
4.4 Kategorie-Listen – Warenkorb Button in Listen anzeigen lassen
Wer in seinem Shop den Kaufbutton nicht nur auf den Artikel-Detailseiten „verstecken“ sondern auch gleich in den Kategorie-Listen präsentieren möchte kann hierzu in seinem Childtheme aktiv werden, indem man dort im Verzeichnis frontend/listing/product-box die Datei product-actions.tpl mit folgendem Inhalt anlegt:
[code]
{extends file="parent:frontend/listing/product-box/product-actions.tpl" }
{* Product actions *}
{block name=’frontend_listing_box_article_actions_content‘}
<div class="product–actions">
<form name="sAddToBasket" method="post" action="{url controller=’checkout‘ action=’addArticle‘}" class="buybox–form" data-add-article="true" data-eventname="submit" data-showmodal="false" data-addarticleurl="{url controller=’checkout‘ action=’ajaxAddArticleCart‘}">
<input type="hidden" name="sAdd" value="{$sArticle.ordernumber}">
<input type="hidden" name="sQuantity" value="1">
<button class="buybox–button block btn action–to-basket is–primary is–icon-right is–center is–small" name="{s name=’ButtonToBasket‘}In den Warenkorb{/s}">
{s name=’ButtonToBasket‘}In den Warenkorb{/s} <i class="icon–arrow-right"></i>
</button>
</form>
{$smarty.block.parent}
</div>
{/block}
[/code]
Das Ergebnis sieht dann so aus:
Aber ACHTUNG: Erstens wirft dieser Warenkorb Button auch ungefragt Varianten-Artikel in Ihrer Hauptvariante in den Warenkorb und ist somit nur optimal für Shops wo die Artikel keine unterschiedlichen Varianten haben. Die gute Nachricht: Ab Version 5.3 ist diese Funktion wieder von Haus aus verfügbar und unterscheidet auch zwischen Varianten Artikeln und NICHT-Varianten Artikeln. Letztere werden direkt in den Warenkorb gelegt, erstere bekommen stattdessen einen Details Button. Wo und wie das funktioniert wird im Artikel zur Shopware Konfiguration beschrieben.
Wer noch nicht den Luxus von Shopware 5.3 genießen kann, dem sei mit diesem Code hier geholfen:
[code]
{extends file="parent:frontend/listing/product-box/product-actions.tpl" }
{* Product actions *}
{block name=’frontend_listing_box_article_actions_content‘}
<div class="product–actions">
{if $sArticle.sConfigurator}
{* Zum Produkt – Button *}
<form name="sAddToBasket" class="buybox–form">
<a href="{$sArticle.linkDetails}"
title="{$sArticle.articleName|escape}"
>
<button class="buybox–button block btn action–to-basket is–primary is–icon-right is–center is–small" name="{s name=’ButtonToDetails‘}Zu den Artikeldetails{/s}">
{s name=’ButtonToDetails‘}Zu den Artikeldetails{/s} <i class="icon–arrow-right"></i>
</button>
</a>
</form>
{else}
<form name="sAddToBasket" method="post" action="{url controller=’checkout‘ action=’addArticle‘}" class="buybox–form" data-add-article="true" data-eventname="submit" data-showmodal="false" data-addarticleurl="{url controller=’checkout‘ action=’ajaxAddArticleCart‘}">
<input type="hidden" name="sAdd" value="{$sArticle.ordernumber}">
<input type="hidden" name="sQuantity" value="1">
<button class="buybox–button block btn action–to-basket is–primary is–icon-right is–center is–small" name="{s name=’ButtonToBasket‘}In den Warenkorb{/s}">
{s name=’ButtonToBasket‘}In den Warenkorb{/s} <i class="icon–arrow-right"></i>
</button>
</form>
{/if}
{$smarty.block.parent}
</div>
{/block}
[/code]
Mit diesem Code wird in der Liste zunächst geprüft, ob es sich um einen Varianten-Artikel handelt oder nicht. Wenn ja kommt der Zu den Artikeldetails Button zum Einsatz und wenn nein kommt der In den Warenkorb Button.
5.1 Sidebar – Rahmenfarbe anpassen
Um eure sidebar anzupassen benötigt ihr in eurem childtheme die Datei sidebar.less, die im Ordner: frontend/src/less/modules abgelegt werden und in der modules.less Datei registriert werden muss.
Sidebar Rahmenfarbe in der Desktop Ansicht anpassen:
.sidebar--navigation {
border: 1px solid #b43f74;
}
5.2 Sidebar – Aktive Kategorie-Links anpassen
Die Inhalte kommen in die gleiche Datei wie beim letzten Punkt oben.
Aktive Oberkategorie, Hintergrund und Textfarbe anpassen
.sidebar--navigation .navigation--link.is--active {
background: #b43f74 none repeat scroll 0 0;
color: #fff;
}
Wichtig: Wenn ihr eine Hintergrundfarbe verwendet sollten die Abstände raus:
.sidebar--navigation .navigation--entry {
margin: 0;
}
Aktive Oberkategorie größere Schrift:
.sidebar--navigation .navigation--link.is--active {
background: #b43f74 none repeat scroll 0 0;
color: #fff;
}
Aktive Unterkategorie-Links größer:
.sidebar--navigation ul.sidebar--navigation .navigation--entry {
font-size: 0.97rem;
}
5.3 Sidebar – Aktive Kategorie-Links anpassen
Wenn ihr wie oben beschriben die Rahmenfarbe der Sidebar angepasst habt solltet ihr auch die Rahmenfarbe des Paypal Felds anpassen. Dafür könnt ihr diese Zeilen verwenden.
.paypal-sidebar {
border-color: #b43f74;
}
6.1 Shopware 5 Theme anpassen – Footer: Newsletter Spalte entfernen
Sie haben keinen Lust einen Newsletter anzubieten oder wollen aus anderen Gründen die Newsletter Spalte im Footer Ihres Shops entfernen? Kein Problem mit 2, 3 Handgriffen ist das ganz erledigt. Zunächst einmal brauchen wir die Datei: /themes/Frontend/euertheme/frontend/index/footer-navigation.tpl die folgenden minimalen Inhalt benötigt:
{extends file='parent:frontend/index/footer-navigation.tpl'}
{block name="frontend_index_footer_column_newsletter"}
{/block}
Die erste Zeile registriert die Datei und sagt dem System dass die Original Datei mit dem Inhalt dieser Datei überschrieben werden soll. Der Rest zeigt die Box der Newsletter Spalte dessen Inhalt entfernt wurde.
Nun müssen die restlihen Spalten noch von 25% Breite auf 33.3 (PUNKT nicht Komma!) gebracht werden. Hierfür müssen wir die Datei unitize.less im Ordner: /themes/Frontend/euertheme/frontend/_public/src/less/_mixins/ angelegt werden. Zusätzlich müsst ihr sehr wahrscheinlich auch den Ordner _mixins nicht vergessen anzulegen und selbigen in der all.less Datei zu registrieren. Hierfür gebt ihr diese Zeile ein:
@import "_mixins";
Zu guter letzt müsst ihr noch eine mixins.less Datei anlegen und auf der Ebene der all.less Datei ablegen. Hier werden dann alle Dateien registriert, die im Ordner -mixins landen. Der Inhalt sollte so aussehen, wenn ihr noch keine andere Dateien außer der unitize.less darin gespeichert habt.
@import "_mixins/unitize";
So und jetzt kommen wir zu guter letzt auch noch zu dem Inhalt der besagten unitize.less Datei, der sieht nämlich so aus:
/* Footer Spalten auf 33% Breite erhöhen, da Newsletter ausgeblendet ist */
@media screen and (min-width: 48em) {
.footer-main .footer--column {width: 33.3%}
}
P.S.: Es passiert nichts? Cache löschen!
to be continued… ;)
7.1 Einkaufswelten – Einkaufswelten Slider-Pfeile, Farbe
Um die Farben der Einkaufswelten Slider-Pfeile anzupassen kann man folgenden Code verwenden:
/* Einkaufswelten - Slider Link */
.image-slider--container {
.arrow {
color: #ede1a4 !important;
&:hover {
color: #c6bb8b !important;
}
}
}
Wer es ordentlich machen will erstellt hierfür in seinem ChildTheme die Datei /frontend/_public/src/less/_components/image-slider.less und vergisst auch nicht diese zu registrieren.
7.2 Shopware Einkaufswelten – Artikel korrekt verlinken
So Leute schaut euch das hier genau, dann wisst ihr eigentlich schon was ich meine.
Für alle die gerade aufs Handy geguckt haben erkläre ich es noch einmal: Geht in den Einkaufswelten NICHT hin und tragt den genauen Link / die genaue URL in das Feld sondern schreibt in das Feld den Namen des Artikels den ihr verlinken möchtet in das Feld ein. Wenn ihr die ersten paar Buchstaben eingegeben habt werden euch schon die Produkte die mit den Buchstaben beginnen angezeigt und ihr könnt das was ihr gesucht habt dort auswählen.
Der Vorteil: Wenn ihr eine Testumgebung verwendet oder einmal den Server / Webhosting Anbieter wechselt, dann müssen diese Links später nicht von Hand angepasst werden sondern erkennen automatisch die neue Umgebung. Resultat: Man spart Zeit & Arbeit. Was will man mehr?!
Weiterführende Links:
Icons für Shopware: https://8mylez.com/shopware-icon-set/
Font Awesome bei Shopware einbinden: https://8mylez.com/blog/eigene-font-awesome-icons/
So bereitet man seine Themes zum Upload im im Community Store vor:
https://developers.shopware.com/designers-guide/preparing-themes-for-the-community-store/
https://github.com/shopware/devdocs/blob/master/source/designers-guide/preparing-themes-for-the-community-store/index.md
Offizieller Shopware Designer Guide:
https://developers.shopware.com/designers-guide/getting-started/#preview-of-the-guide
Plugin erstellen:
https://blog.hostianer.de/shopware-5-eigenes-template-erstellen/
Plugin Styles anpassen
http://forum.shopware.com/themes-und-design-f101/less-files-von-plugins-uberschreiben-erweitern-t26259-20.html
In welcher LESS Datei steht der Code:
http://8mylez.com/blog/pro-tipp-ganz-einfach-herausfinden-in-welcher-less-datei-der-code-steht/
Theme Konfiguration
http://community.shopware.com/files/downloads/stylecheatsheet-18088588.pdf
Ewiges Theme kompilieren umgehen
http://8mylez.com/blog/shopware-5-theme-entwicklung-mit-grunt/
Tutorial Link SW 5 Design:
http://store.shopware.com/tonur91184388946/artikel-zoom-shopware-5.html
JavaScript manipulieren:
http://www.gb-media.biz/de/Tutorials-Snippets/Shopware-responsive-JS-Plugins-manipulieren.html
Theme konfiguration
http://community.shopware.com/files/downloads/stylecheatsheet-18088588.pdf
Hey,
tolles Blogposting ;)
Wie würde der Code bei 4.2 aussehen, wenn ich das ganze anstatt für „Großes Bild“ für „Nur wichtige Informationen machen möchte?
Der Hintergrund ist der, dass ich das andere Layout für die mobilen Nutzer nutzen möchte ;)
LG aus Köln
Kann ich leider gerade nicht aus dem Kopf sagen, aber wenn ich es mal probieren sollte, werde ich den Beitrag ergänzen.
Beste Grüße aus Porz
Wo ist bei der Standard Installation von shopware 5 das cookie plugin? Ich finde es nicht und im shop ist das einzigste welches gratis ist nicht verfügbar. Somit ist shopware 5 nicht eu konform
Ok es gibt es doch das plugin. Warum man dies mit Cookie entfernen bezeichnet hat ist sonderbar. EU Cookie Richtlinie Plugin wäre der passendere Name.
Etwas Verwirrung ist immer gut – so wissen nur die wahren Profis wo es langgeht :D
/* Header – Navi – Link-Textgröße */
.navigation-main .navigation–link {
font-size: 15px;
}
Fontgröße mag funktionieren aber Link und Hoover habe ich so noch nicht hinbekommen. Da streikt shopware
Prüfe ich mal bei der nächsten Shopware Design Erstellung, danke für den Tipp.
Hallo,
ich würde gerne zusätzlich eine Info in das Produkt-Box Layout „Großes Bild“ hinzufügen. zB. dass das Produkt in xx verschiedenen Farben erhältlich ist. Gibt es eine Möglichkeit das mit der tatsächlichen Anzahl der Farbvarianten zu kombinieren? zB. „Produkt ist ein x Farben erhältlich“ und x ist die Anzahl der Farben die das Produkt tatsächlich hat. Vllt mit einem Freitextfeld? Bin ratlos.
Da müsste ich mir auch erstmal länger zu Gedanken machen. Aktuell bin ich ebenfalls ratlos.
Hallo,
sehr gut erklärt.
ist es auch möglich die Sidebar dauerhaft auszuklappen?
so das man immer alle Unterkategorien sieht?
Beste Grüße
PB
Gute Frage, habe ich bisher leider noch nicht ausprobiert.
Hi,
Danke für die Anleitung oben. Zwei Fragen hätte ich noch vllt kannst du mir weiter helfen.
1.)Wie muss ich den oben genannten Code ändern sodass auf einen Computer 3 Spalten im listing sind und in mobiler Ansicht 2 Spalten?
2.) wie kann ich die Bilder auf der product Detail seite größer anzeigen?
Hallo Sunny,
das würde jetzt etwas dauern den Code da raus zu fischen. Ich kann mal gucken, dass ich das evtl in eines der nächsten Tutorials mit einbaue und erkläre. Bis dahin müsste ich dich um etwas Geduld bitten.
VG,
Atilla
Ich hätte eine Frage zu den Abständen in der Artikelübersicht.
In dieser ist zwischen dem Titel und dem Preis immer ein großer Abstand (sieht man auch in dem Bild oben).
Wie läßt sich dieser Abstand verringern?
Hallo, je nach Länge des Titels können die Abstände in den Listen recht riesig ausfallen, das ist korrekt. Das war eine der ersten Anpassungen die ich bei unserem „Haus-Theme“ vorgenommen habe, weil es teilweise wirklich grottenschlecht aussieht. Man muss die Anpassungen in einem Childtheme machen und dort die LESS / CSS Angaben machen. Einen einfacheren Weg gibt es glaube ich sonst noch nicht.
Hallo!
Vielen Dank für die ausführliche Anleitung. So konnte ich als Anfänger schon erfolgreich die Newsletter-Spalte im Footer ausblenden. Nur leider werden die anderen Spalten im Footer nicht breiter angezeigt obwohl ich mich genau an die Anleitung gehalten habe. Egal welche Änderung ich in der „unitize.less“ Datei vornehme (z.B. Hintergrundfarbe), es wird keine Änderung im Frontend angezeigt.
Ich wäre dir sehr Dankbar, wenn du mir einen Tipp geben könntest.
Viele Grüße,
Andrea
Hallo liebe Andrea,
das ist ein typisches Anzeichen dafür, dass der Cache nicht gelöscht wurde.
LG, Atilla
Hi,
vielen Dank für die tollen Tipps!
Wenn ich beim Tipp unter 4.4 bei einem durch InfinityScrolling nachgeladenem Artikel auf den „In den Warenkorb“-Button klicke, öffnet sich nicht rechts die Offcanvas-Box wie sonst, sondern ich lande im Warenkorb und das ist unschön.
Hier wird von EikeWarneke empfohlen, ein Event abzufangen:
https://forum.shopware.com/discussion/26574/in-den-warenkorb-direkt-aus-dem-listing/p2
Das habe ich in Datei „…frontend\_public\src\js\jquery.infinite-scrolling.js“
an der folgenden Stelle direkt unter dem „publish“ eingebaut:
…
$.publish(‚plugin/swInfiniteScrolling/onFetchNewPageFinished‘, [me, template]);
$.subscribe(‚plugin/swInfiniteScrolling/onFetchNewPageFinished‘, function() {
StateManager.addPlugin(‚*[data-add-article=“true“]‘, ’swAddArticle‘);
});
…
Es funzt aber dennoch nicht. Möglicherweise falsche Stelle?
Any idea?
P.S. Meine Shopware-Version: 5.0..4
Danke & Gruß,
Johnny
Hi Johnny,
das müsste ich mir in Ruhe anschauen und kann aktuell noch nichts dazu sagen.
VG, Atilla
Hi,
ich habe in meinem Shop ein Problem und finde leider keien Lösung, die Agentur die es gemacht hat gibt es leider nicht mehr.
Der Produktname wir bei mir leider nur als H2 dargestellt und ich würde das gerne ändern.
Hat wer eine Lösung für mein Problem ?
Quelltext auf der Seite:
Aladdin Lunchbox Iso 0,7 L
das einzige was ich gefunden habe war in einer CSS Datei, traue mich das aber nicht ändern:
h2.product–title {font-weight:400}
.buybox–inner .price–content {font-weight:400!important}
.motiv_group_container {display:relative; width:110px!important}
.removemotiv {font-size:11px; color:#C52E39; text-align: center; cursor:pointer}
Ich freue mich über alle Tipps
Dein Weg führt in die TPL Dateien.
Gute Beschreibung.
Guter Kommentar.