[Shopware] Social Media Buttons im Footer

Social Media Buttons im Footer hinzufügen mit Hilfe von Font Awesome icons.

Änderungen sollten immer in einem eigenen Theme gemacht werden. Bei Änderungen im Bare oder Responsive Theme können diese bei einem Update überschrieben werden.

Ein eigenes Theme kann mit Hilfe des Theme Manager im Backend erstellt werden.

1. Font Awesome einbinden

Falls noch nicht vorhanden nicht vorhanden folgende Datei erstellen.

themes/Frontend/Name_des_themes/frontend/index/header.tpl

In diese Datei fügen wir zuerst folgendes ein:

{extends file="parent:frontend/index/header.tpl"}

Hiermit erweitern wir den Originalinhalt mit unserem Code.

Und nun fügen wir folgendes ein:

{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}

2. Buttons einfügen

Jetzt benötigen wir folgende Datei.

themes/Frontend/Name_des_themes/frontend/index/footer-navigation.tpl

Dort fügen wir folgendes ein.

{namespace name="frontend/index/menu_footer"}
{extends file="parent:frontend/index/footer-navigation.tpl"}
{block name="frontend_index_footer_column_service_menu"}
    <div class="footer--column column--menu block">
        {block name="frontend_index_footer_column_service_menu_headline"}
            <div class="column--headline">{s name="sFooterSocialMedia"}{/s}</div>
        {/block}

        {block name="frontend_index_footer_column_service_menu_content"}
            <nav class="column--navigation column--content">
                <ul class="em-social-links">
                    <li><a href="https://twitter.com/blub_txt" target="_blank"><i class="fab fa-twitter-square"></i></a></li>
                    <li><a href="https://www.instagram.com/jnstr_/" target="_blank"><i class="fab fa-instagram"></i></a></li>  
                    <li><a href="mailto:admin@hamsterbaum.de" target="_blank"><i class="fas fa-envelope"></i></a></li>   
                </ul>
            </nav>
        {/block}
    </div>
{/block}

Die eingefügten Links sollten natürlich geändert werden.

3. CSS

Wir erstellen folgende Datei.

themes/Frontend/Name_des_themes/frontend/_public/src/less/all.less

Dort fügen wir folgende Zeile ein:

@import "_mixins/social_media_icons";

Nun müssen wir noch diese Datei erstellen.

themes/Frontend/Name_des_themes/frontend/_public/src/less/_mixins/social_media_icons.less

Dort fügen wir folgenden CSS Code ein.

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

4. Textbaustein hinzufügen

Zum Abschluss müssen wir noch einen neuen Textbaustein hinzufügen.
Dies geschieht im Backend/Einstellungen unter Textbausteine.

Textbaustein hinzufügen mit folgenden Werten:

5. Theme neu kompilieren und Cache leeren

Als Letzten muss nun nur noch das Theme neu kompiliert werden, dies geschieht im Theme Manager.
Nach dem leeren des Caches sollten die neuen Social Media Buttons im Footer erscheinen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.