Mein erster onlineshop
mit shopware 5
Social Media ist wichtig.
Deswegen wollen wir auch unsere Social Media Seiten auf unserem Shop verlinken.
Unten links im Footer ist ein toller Platz dafür.
Ihr könnt selbstverständlich schauen wo es euch am besten gefällt.
Die icons nehmen wir von Font Awesome.
Jetzt gibt es zwei Wege die Social Media Icons einzubauen:
Beides hat seine Vor- und Nachteile.
Da wir uns aber auf Theme Entwicklung konzentrieren, nehmen wir den ersten Weg:
Im Theme
Insgesamt sind es nur 5 Schritte die uns zum Erfolg führen.
Die 5 Schritte:
Kommt euch bekannt vor?
Na klar doch!
Haben wir auch schon paar mal gemacht.
Beim Beitrag über die Themestruktur und beim Anpassen der Logo Größe.
Ganz kurz zusammengefasst:
Im Theme Manager, ein neues Theme anlegen mit Ableitung eures aktuellen Themes (wir nutzen das Standard Responsive Theme von Shopware).
Wir müssen rausfinden in welchen Dateien sich der Code für den Footer befindet.
Wenn es um den Header oder Footer geht dann schauen wir in den Ordner
themes/Frontend/Bare/frontend/index/Im Bare Theme befinden sich die Eltern Dateien von denen geerbt wird.
Wir finden die footer.tpl und die footer-navigation.tpl.
Die footer.tpl brauchen wir erstmal nicht.
In der footer-navigation.tpl sehen wir unter anderem folgenden Code:
{* Service hotline *}
{block name="frontend_index_footer_column_service_hotline"}
<div class="footer--column column--hotline is--first block">
<div class="column--headline">{s name="sFooterServiceHotlineHead"}{/s}</div>
{block name="frontend_index_footer_column_service_hotline_content"}
<div class="column--content">
<p class="column--desc">{s name="sFooterServiceHotline"}{/s}</p>
</div>
{/block}
</div>
{/block}
Dieser Code sorgt dafür, dass unten Links in der ersten Spalte des Footers eine Überschrift (Standard ist Service Hotline) und ein Beschreibungstext angezeigt werden.
Wir wollen diesen Bereich erweitern und legen daher unsere erste Datei (die footer-navigation.tpl) in derselben Ordnerstruktur bei uns im Theme an:
themes/Frontend/UnserErstelltesTheme/frontend/index/footer-navigation.tplDer Code für die Datei kommt im übernächsten Schritt.
Die icons nehmen wir von Font Awesome.
Toller Service.
Dazu brauchen wir nur folgende Zeile einbinden (der einfachste Weg):
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">Ich verlinke unten das Getting Started von Font Awesome, falls euch weitere Informationen interessieren.
Wir wollen diese Zeile Code in unseren Header packen.
Dazu schauen wir uns an wie die anderen CSS Dateien eingebunden werden.
Wir schauen in die Datei:
themes/Frontend/Bare/frontend/index/header.tplDa steht sehr viel drin.
Uns interessiert gerade aber nur folgender Code:
{* Stylesheets *}
{block name="frontend_index_header_css_screen"}
{{compileLess timestamp={themeTimestamp} output="lessFiles"}}
{foreach $lessFiles as $stylesheet}
<link href="{$stylesheet}" media="all" rel="stylesheet" type="text/css" />
{/foreach}
{if $theme.additionalCssData}
{$theme.additionalCssData}
{/if}
{/block}Mit dem werden alle LESS Dateien kompiliert und dann eingebunden.
Also hängen wir unsere CSS Datei doch einfach dran.
Zuerst legen wir folgende Datei an:
themes/Frontend/UnserErstelltesTheme/index/header.tplIn diese Datei schreiben wir folgenden Code:
{extends file="parent:frontend/index/header.tpl"}
{block name="frontend_index_header_css_screen"}
{$smarty.block.parent}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
{/block}In Zeile 1 erben wir von der Elterndatei.
Und in Zeile 2 sprechen wir den Block frontend_index_header_css_screen an und laden mit {$smarty.block.parent} erstmal den Originalen Block und hängen unseren Code dahinter an.
Bei uns ist das nur die Verlinkung zur Font Awesome CSS Datei.
Font Awesome ist somit eingebunden in unser Theme und wir können die icons nutzen.
In Schritt 2 haben wir unsere Datei footer-navigation.tpl erstellt.
Diese befüllen wir jetzt mit folgendem Code:
{namespace name="frontend/index/menu_footer"}
{extends file="parent:frontend/index/footer-navigation.tpl"}
{block name="frontend_index_footer_column_service_hotline_content"}
<div class="column--content">
<p class="column--desc">{s name="sFooterServiceHotline"}{/s}</p>
<ul class="em-social-links">
<li><a href="https://www.facebook.com/eightmylez?fref=ts" target="_blank"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://twitter.com/Eightmylez" target="_blank"><i class="fab fa-twitter-square"></i></a></li>
<li><a href="mailto:i@8mylez.com" target="_blank"><i class="fas fa-envelope"></i></a></li>
</ul>
</div>
{/block}Wie auch bei der header.tpl wollen wir von der Elterndatei erben, was wir auch mit Zeile 1 machen.
Am Ende bauen wir die Icons mit Link ein.
Die Icons verlinken gerade auf meine Social Media Accounts, also denkt dran diese auszutauschen, falls ihr den Code kopiert.
Um die Icons zu stylen erzeugen wir noch folgende Datei:
themes/Frontend/UnserErstelltesTheme/frontend/_public/src/less/all.lessTheoretisch könnte der CSS-Code hier hinein geschrieben werden. Da wir es aber etwas strukturierter haben möchten, importieren wir nur die Datei, die wir noch anlegen werden.
Dazu wird folgende Zeile in die all.less eingefügt:
@import "_mixins/social_media_icons";Die Datei, auf die wir in diesem Import verweisen, legen wir nun an unter:
themes/Frontend/UnserErstelltesTheme/frontend/_public/src/less/_mixins/social_media_icons.lessund fügen folgenden CSS-Code dort hinein:
.em-social-links {
font-size: 40px;
}
.em-social-links li {
display: inline;
}
.em-social-links li a {
display: inline;
transition: opacity .3s ease-in-out;
}
.em-social-links li a:hover {
opacity: 0.6;
transition: opacity .3s ease-in-out;
}
.em-social-links li a i.fa-facebook {
color: #3b5998;
}
.em-social-links li a i.fa-twitter-square {
color: #55acee;
}Zum Schluss wie immer den Cache leeren und das Theme kompilieren.
Sieht doch super aus!
Wir haben uns angeschaut wie wir Social Media Icons in unseren Footer integrieren.
Dabei haben wir auch gelernt, wie eigenen Code an die Blöcke von Shopware anhängen können.
Außerdem haben wir ein externes CSS eingebunden und die Icons von Font Awesome verwendet.
Ihr könnt natürlich alle icons von Font Awesome integrieren.
Seid kreativ und baut euch alles mögliche mit den Icons.
Unsere Standorte
Zentrale
Technologiepark 23
33100 Paderborn
Leipzig
Bernhardstraße 34
04315 Leipzig
Kontakt
E-Mail: support@8mylez.com
Telefon: +49 (0) 5251 284 710
Shopware Dienstleistungen
Über 8mylez
✓ 38 Mitarbeiter
✓ Shopware Gold Partner
✓ 40.000+ Plugin Downloads
✓ 160+ betreute Shops
✓ Full-Service Shopware Agentur
✓ 70 Shopware Videos auf Youtube
✓ Alle Shopware Zertifizierungen
Social
Ich tue mich leider immer mit dem Coding schwer, aber dank dem Beitrag hier hab sogar ich es hinbekommen. KAnn man sich fast gar nicht vorstellen, wie gut Icons anstatt einfacher Textlinks funktionieren!
das freut mich :)
Gruss
Alexander
du kannst dir hier eine eigene Sammlung erstellen und als Font einbinden: https://fontello.com/
Gruss
Alexander
Gibt es auch eine Alternative zu Font Awesome? Leider gibt es hier nämlich nicht alle Social-Media Icons, die wir benötigen..
Danke schon mal im Voraus.
Wir sind mittlerweile richtige Fan´s von Ihnen!
Unsere Shops werden nach Ihren Anleitungen erstellt.
Einfach super!
wir haben den Blogpost angepasst. Wenn du jetzt alles befolgst, ist der Fehler weg und die Icons sind mit im Footer in der mobilen Ansicht!
Gruß
Alexander
in den Kommentaren habe ich gelesen, dass die Icons in der mobilen Ansicht nicht einklappen und das das 8mylez Team das ganze updaten wollte, leider aber immer noch geschehen ist. Die Icons klappen nicht ein. Ansonsten wirklich super Arbeit und herzlichen Dank. Könnte das Team den Code updaten.
wir setzen uns nochmal ran, arbeiten das Tutorial selbst in der neuesten Shop Version durch und passen den Code an!
Vielen Dank für dein Feedback :)
Gruß
Alexander
Es hat mir so manche Stunde sucherei erspart und das Ergebnis ist immer brilliant.
Wenn ich mir etwas wünschen dürfte, so wäre es Artikel wie der Boss Header - allerdings kompatibel mit Responsive Template und all den Plugins, die das Responsive voraussetzten.
Auf jeden Fall bin ich extrem dankbar, daß hier jemand sein Wissen der Community freizügig zur Verfügung stellt.
LG
Steffen
vielen lieben Dank fuer die netten Worte :) Wir geben unser bestes und freuen uns wenn es ankommt!
Gibt es spezielle Plugins die bei der Kompatibilitaet Probleme machen beim Boss Header?
Gruß
Alexander
Danke für den Artikel auf jeden Fall.
das kann ich mir gut vorstellen. Wir haben da auch tiefgreifende Anpassungen gemacht.
Mit etwas mehr Aufwand lässt sich das aber teilweise beheben. Im Live Stream konzentrieren wir uns aber zunächst das Theme zu Entwickeln ohne dabei die Kompatibilitaet zu achten. Wäre vielleicht spannend für den nächsten Live Stream.
Gruß
Alexander
vermutlich überschreibt ein CSS Code die Anpassungen. Kannst du mir einen Link von deinem Shop schicken? Dann kann ich da kurz reingucken und dir einen Tipp geben!
Gruß
Alexander
vielen Dank!
Dazu müsste ich einen Blick auf deinen Code werfen. Kannst du mir den Link zu deinem Shop schicken? Vielleicht sehe ich direkt etwas und kann dir einen Tipp geben.
Gruß
Alexander
Schneller und besser gehts, wenn man den HTML Teil, also deine [...] direkt in den Textbaustein schreibt und das Styling der Icons über eine extra CSS Datei einbindet. Dafür einfach im Theme Manager einen neue Stylesheet Datei mit einbinden. Dann entfällt nämlich auch das lästige Cache leeren sowie das neu kompilieren des Themes !
Vorteil: Mit dieser zusätzlichen CSS Datei kann man nämlich sämtliche CSS Regeln von Shopware überschrieben und weiß dann auch immer, wo man was geändert hat; nämlich nur in dieser Datei! ;-)
PS: Was auch immer die Menschen über LESS und seine Vorteile erzählen, für mich ist und bleibt es was total unnötiges!
ja stimmt. Ich schaue mir das Problem die Tage an und Update den Beitrag, damit es auf der mobilen Ansicht angezeigt wird und entsprechend zugeklappt ist.
Ja CSS ist manchmal wirklich einfacher. Ich denke es ist eine Frage des Geschmacks, was man gerne nutzen möchte. LESS hat meiner Meinung schon einige Vorteile wenn man mit einigen Zeilen arbeitet (ich spreche wirklich von einigen 100 oder 1000 Zeilen CSS Code).
Gruß
Alexander
Auch bei mir hat das Einbinden super geklappt! Danke dafür!
Ich hab nur ein kleines Problem, in meinem Handy Footer werden die Bilder nicht mehr mit eingeklappt!
Irgendeine Idee wie Ich das lösen kann?
Besten Dank
Johannes
der HTML Code für die Icons muss mit in das DIV mit der Klasse column--content. Dann sollte es auch eingeklappt werden.
Wenn es nicht klappt, meld dich per E-Mail i@8mylez.com" rel="nofollow">i@8mylez.com> und ich schaue mir das an!
Gruß
Alexander
Die Icons haben einen "durchsichtigen Hintergrund", da mein Hintergrund auf der Homepage normal sehr dunkel ist, wirkt es nicht so schön. Ich habe versucht einfach über backcolor einen weißen Hintergrund einzubauen.
.em-social-links li a i.fa-facebook-official{
color: #3b5998;
backcolor: #fff;
Allerdings entsteht dan ein unschöner Rand oben und unten.
Haben Sie da noch einen Tip für mich ?
es freut mich sehr, dass es so problemlos geklappt hat.
Ja der Rand ist bei mir auch da, wenn ich es anpasse. Ich würde bei einem sehr dunklem Hintergrund empfehlen die Farbe der Icons nur weiß zu machen, ohne den Hintergrund anzupassen.
Das sieht, meiner Meinung nach, auch sehr edel aus. Die Icons lassen sich auch ohne jeweilige Logo Farbe gut erkennen.
Gruß
Alexander
Du hattest einen Hinweis zu Smarty Snippet geschrieben.
Beim Link zum Kontaktformular solltest du darauf achten, dass das Smarty Snippet benutzt wird und nicht der hardgecodete Link (‚/kontaktformular‘).
Wie setze ich das Snippet richtig?
Danke Tipp: Um Links zu deaktivieren, entferne das http(s)://.
du könntest das über die Textbausteine von Shopware lösen.
An die Stelle wo der Link hinkommt einfach ein Snippet nutzen:
..href="{s name="HierEinSnippetName"}shopware...
Im Backend unter Einstellungen > Textbausteine nach dem Namen suchen (im Beispiel HierEinSnippetName) und dort den passenden Link für die jeweilige Sprache setzen.
Gruß
Alexander
vielen Dank für das Howto. Es hat wunderbar funktioniert. Ich möchte anstatt von mailto:store@example.com leiber das Kontaktformular bei betätigen des Schalters öffnen.
Ist richtig. Es scheint zu funktionieren. In Hinblick auf einen Store, der nach und nach in 8 Sprachen abgebildet werden soll, weiß ich nicht ob das Kontaktformular ein der jeweils richtigen Sprache angezeigt wird.
Vielen Dank für die Hilfe
vielen Dank für die netten Worte!
Prima, dass es bei dir geklappt hat.
Wir können gerne zum "Du" wechseln.
Beim Link zum Kontaktformular solltest du darauf achten, dass das Smarty Snippet benutzt wird und nicht der hardgecodete Link ('/kontaktformular').
Können uns den Shop gerne anschauen. Einfach per Mail melden: i@8mylez.com
Gruß
Alexander
Was denkst du?