Social Media Icon mit Link im Footer

Social Media Icon mit Link im Footer

Alexander Wolf 01. Oktober 2015 13

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.

Shopware Service Hotline Footer

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://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.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://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.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:

{extends file="parent:frontend/index/footer-navigation.tpl"}

{block name="frontend_index_footer_column_service_hotline_content"}
{$smarty.block.parent}
    <style>
        .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-official{
            color: #3b5998;
        }
        .em-social-links li a i.fa-twitter-square{
            color: #55acee;
        }
    </style>
    <ul class="em-social-links">
        <li><a href="https://www.facebook.com/eightmylez?fref=ts" target="_blank"><i class="fa fa-facebook-official"></i></a></li>
        <li><a href="https://twitter.com/Eightmylez" target="_blank"><i class="fa fa-twitter-square"></i></a></li>
        <li><a href="mailto:i@8mylez.com" target="_blank"><i class="fa fa-envelope"></i></a></li>
    </ul>
{/block}

Wie auch bei der header.tpl wollen wir von der Elterndatei erben, was wir auch mit Zeile 1 machen.

Danach kommt etwas CSS Code um die Icons zu stylen.

Hätten wir auch auslagern können, aber der Einfachheit halber habe ich es direkt reingeschrieben.

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.

5. Theme kompilieren und freuen

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

Sieht doch super aus!

Social Media Icons im Shopware Footer

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

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

13 Kommentare

  • Danke für die Anregung..., jedoch funktioniert das so nicht ganz, da die Icons dann bei der mobilen Ansicht immer schon im "nicht aufgeklappten Zustand" der footer--column column--hotline is--first block zu sehen sind, wie schon der erste Kommentator festgestellt hat! Schrteibt man diese dann noch in das div column--content, so erscheinen Sie dann in der mobilen Ansicht nicht mehr, zumindest bei mir, hehe. :)

    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!
  • Irgendwie ist mein Code verschwunden...
  • Hallo Joschi,

    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
  • Hallo 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
  • Hallo, klappt wunderbar, ich hab nur ein Problem.
    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 ?
  • Hallo Daniel,

    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
  • Hallo 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)://.
  • Hallo Karl,

    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
  • Sehr geehrter Herr Wolf,

    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
  • Hallo Karl,

    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?

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Theme: Eigenes Listing Layout erstellen
Logo Größe anpassen mit Less für Shopware 5
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Staging Umgebung – Was ist das und warum brauchst du eine?
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
Wie Cronjobs bei Shopware funktionieren und wie du sie richtig einstellst
© 2017 by 8mylez. Powered by Goltfisch GmbH.