Anpassung des Newsletter Feld im Shopware Footer

Ausgangssituation

Newsletter Feld im Shopware Footer entfernen oder anpassen - Ausgangsstellung

Da nicht jedes Unternehmen Newsletter verschickt oder den Shopware Footer mit anderen Informationen ausstatten möchte, bietet der Shopware Standard leider keine Möglichkeit, dass Newsletter Feld anzupassen, zu ersetzen oder auszublenden. Wir zeigen Ihnen wie Sie den Newsletter Block in Ihrem Shopware Footer in nur wenigen Schritten einfach und unkompliziert anpassen, entfernen oder ersetzen können. Zusätzlich erhalten Sie weitere Informationen zur Shopware Theme-Entwicklung.

Vorwort

Für die Umsetzung dieser Anpassung empfehlen wir Ihnen im Vorfeld unser Tutorial "So starten Sie in die Theme-Entwicklung". Die folgende Umsetzung wird in einem eigenen Shopware Theme erstellt und keineswegs in das Shopware Bare oder Responsive Theme integriert. Alle Umsetzungen führen Sie immer in einer separeten Testumgebung durch, nicht in Ihrem Live-Shop und beachten die Kompatibilität der angegebenen Shopware Version. Wir übernehmen keine Haftung für unsere Tutorials, stehen Ihnen für Fragen immer zur Verfügung. Nach jeder Anpassung ist das löschen des Caches sowie das kompilieren des Shopware Themes zu empfehlen. In Ihrem Shopware Backend im Menüpunkt "Einstellungen" wählen Sie dazu "Caches / Performance", navigieren zum Tab "Cache", klicken den Button "Alle auswählen" und daraufhin den blauen Button "Leeren" - bestätigen Sie daraufhin das geöffnete Fenster mit Klick auf den blauen Button "Themes kompilieren".

Umsetzung

Nachdem Sie Ihr eigenes Shopware Theme erstellt haben, suchen Sie im Pfad themes/Frontend/Bare/frontend/index nach folgender Datei footer-navigation.tpl. In der besagten Datei footer-navigation.tpl finden Sie den Block {block name='frontend_index_footer_column_newsletter'}. Dieser Block beinhaltet Ihren Shopware Newsletter, welchen Sie nun in zwei unterschiedlichen Varianten anpassen können.

Erstellen Sie die Datei footer-navigation.tpl in Ihrem eigenen Shopware Theme unter folgenden Pfad: themes/Frontend/IhrEigenesTheme/frontend/index

Im nächsten Schritt muss die neue Datei footer-navigation.tpl die vorhandenen Blöcke, Variablen und Informationen aus dem Shopware Bare Theme vererben. Dazu integrieren Sie folgenden Code an den Anfang der neu erstellten Datei:

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

Quellcode

Wir bieten Ihnen die Auswahl von zwei unterschiedlichen Varianten für die Anpassung Ihres Shopware Newsletter Block im Footer. Sie können jederzeit in nur wenigen Minuten zwischen den zwei unterschiedlichen Varianten variieren.


1. Variante: Newsletter Block im Shopware Footer ausblenden

Damit Ihr Newsletter Block im Shopware Footer vollständig ausgeblendet wird, müssen Sie lediglich folgenden Block {block name='frontend_index_footer_column_newsletter'} wie folgt kopieren und in Ihre Datei footer-navigation.tpl integrieren:

{block name='frontend_index_footer_column_newsletter'}{/block}

Quellcode

Ihre neu erstellte Datei footer-navigation.tpl sollte nun wie folgt aussehen:

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

{block name='frontend_index_footer_column_newsletter'}{/block}

Quellcode

Ergebnis: Newsletter Block im Shopware Footer ausblenden

Ergebnis: Newsletter Block im Shopware Footer ausblenden

Optimierung des Ergebnis der 1. Variante

Nachdem Sie den Newsletter Block ausgeblendet haben, besitzt Ihr Shopware Footer nun einen erheblichen Freiraum. Wie Sie die Darstellung dieses Freiraum anpassen können, erklären wir Ihnen im folgenden Abschnitt.

Zu Beginn erstellen Sie die Datei footer.less im folgenden Pfad: themes/Frontend/IhrEigenesTheme/frontend/_public/less/_modules und integrieren folgenden Quellcode in Ihre all.less im folgenden Pfad: themes/Frontend/IhrEigenesTheme/frontend/_public/less

@import "_modules/footer";

Quellcode

Rufen Sie nun die Datei footer.less im folgenden Pfad: themes/Frontend/IhrEigenesTheme/frontend/_public/less/_modules auf und integrieren folgenden Quellcode:

@media screen and (min-width: @tabletViewportWidth){
.footer-main{
.footer--column{
width: 33.33%;
text-align: center;
}
}
}

Quellcode

Nachdem Sie die Anpassung in Ihre footer.less integriert haben, sollte Ihr Shopware Footer wie folgt dargestellt werden:

Optimierung des Ergebnis der 1. Variante: Newsletter Block im Shopware Footer ausblenden


2. Variante: Logo in den Newsletter Block im Shopware Footer integrieren

Viele Unternehmen nutzen den Shopware Footer um wichtige Informationen, Icons oder Logos darzustellen. In unserer 2. Variante integrieren Sie ein beliebiges Bild anstelle des Newsletter Blocks. Dazu integrieren Sie folgenden Quellcode in von Ihnen erstellte {block name='frontend_index_footer_column_newsletter'} wie folgt kopieren und in Ihre Datei footer-navigation.tpl integrieren:

{block name="frontend_index_footer_column_newsletter"} <div class="footer--column is--last block">
{block name="frontend_index_footer_column_logo_headline"}
<div class="column--headline">{s name="sFooterLogoHeadline"}Die Strategen{/s}<a/div>
{/block}
{block name="frontend_index_footer_column_logo_content"}
<div class="column--content">
<p class="column--desc">
{s name="sFooterLogoDescription"}Zertifizierte E-Commerce Agentur und langjähriger Shopware Partner{/s}
</p>
<aimg src="{link file='frontend/_public/src/img/die-strategen.png'}" class="footer--image" alt="Die Strategen - Zertifizierte E-Commerce Agentur und langjähriger Shopware Partner">
</div>
{/block}
</div>
{/block}

Quellcode

Ihre neu erstellte Datei für die 2. Variante footer-navigation.tpl sollte nun wie folgt aussehen:

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

{block name="frontend_index_footer_column_newsletter"} <div class="footer--column is--last block">
{block name="frontend_index_footer_column_logo_headline"}
<div class="column--headline">{s name="sFooterLogoHeadline"}Die Strategen{/s}<a/div>
{/block}
{block name="frontend_index_footer_column_logo_content"}
<div class="column--content">
<p class="column--desc">
{s name="sFooterLogoDescription"}Zertifizierte E-Commerce Agentur und langjähriger Shopware Partner{/s}
</p>
<aimg src="{link file='frontend/_public/src/img/die-strategen.png'}" class="footer--image" alt="Die Strategen - Zertifizierte E-Commerce Agentur und langjähriger Shopware Partner">
</div>
{/block}
</div>
{/block}

Quellcode

Im vorherigen Quellcode finden Sie den Link zum hinterlegten Bild, welchen Sie entsprechend Ihres gewünschten Logos anpassen müssen. Im Beispiel ist das Bild unter folgenden Pfad: themes/Frontend/IhrEigenesTheme/frontend/_public/src/img/die-strategen.png abgelegt. Sollten Sie noch keinen Ordner für die Images in Ihrem Theme angelegt haben, integrieren Sie den Ordner in den folgenden Pfad: themes/Frontend/IhrEigenesTheme/frontend/_public/src/

Ergebnis: Logo in den Newsletter Block im Shopware Footer integrieren

Ergebnis: Logo in den Newsletter Block im Shopware Footer integrieren

Sie haben Fragen?

Nehmen Sie mit unseren Spezialisten Kontakt auf