Social Media Icon mit Link im Footer

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:

1. Im Theme
2. Als Plugin

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:

1. Theme erstellen
2. Dateien erstellen
3. Font Awesome einbinden
4. Icons mit Verlinkung einbauen
5. Theme kompilieren, freuen und wild auf dem Tisch tanzen

1. Theme erstellen

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).

2. Dateien erstellen

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.tpl

Der Code für die Datei kommt im übernächsten Schritt.

3. Font Awesome einbinden

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.tpl

Da 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.tpl

In 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.

4. Icons mit Verlinkung einbauen

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.less

Theoretisch 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.less

und 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;
}

5. Theme kompilieren und freuen

Zum Schluss wie immer den Cache leeren und das Theme kompilieren.

Sieht doch super aus!

Abschluss

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.

Hinweis

Ihr könnt natürlich alle icons von Font Awesome integrieren.

Seid kreativ und baut euch alles mögliche mit den Icons.

Weitere Links

• Font Awesome: Getting Started
• Hintergrundfarbe in Shopware ändern
• Realisiert mit Shopware entfernen
• Shopware Rechnung anpassen
• Shopware Favicon
• Shopware Merkzettel deaktivieren