Mein erster onlineshop
mit shopware 5
In diesem Beitrag zeigen wir dir, wie du die Facebook Box ganz einfach in deinen Shopware Shop Footer integrieren kannst.
Wir wollen der Welt zeigen, dass unser Shop von anderen gemocht wird. Unsere Facebook Page haben wir schon erstellt.
Natürlich haben wir einen Facebook Link eingebaut, wie hier: Social Media Icon mit Link im Footer
Jetzt sieht das auf unserem Shop aber keiner. Und auf den Facebook Link klickt auch niemand. Eine Box mit den Likes und evtl. News Feed wäre klasse.
Aber wie geht das?
Zuerst brauchen wir den richtigen Code für unser Plugin. Diesen Code bekommt ihr in der Entwickler Dokumentation von Facebook.
Bei Facebook Page URL tragt ihr eure Facebook Page ein: z.B. https://www.facebook.com/eightmylez
Ihr könnt sofort sehen ob ihr eure Seite gefunden wurde. An der Vorschau könnt ihr jetzt auch etwas rumspielen und die Funktionen auswählen die euch zusagen. Wir haben uns für 315px als Breite entschieden und zeigen keine Facebook Posts an.
Wenn ihr eure Box soweit eingestellt habt, klickt ihr auf Get code und es erscheint eine Box mit zwei Anweisungen.
Um die Facebook Geschichten überhaupt nutzen zu können, müssen wir eine Datei einbinden, sodass der Code verfügbar wird in unserem Shop. Das ist gar nicht so schwer wie es sich anhört. Denn wir fügen etwas javascript Code ein, welcher die benötigte Datei von Facebook bei uns integriert.
Dazu legen wir in der Datei
themes/Frontend/MEINTHEME/frontend/indexdie Datei index.tpl an.
Diese Datei befüllen wir mit folgendem Code:
{extends file="parent:frontend/index/index.tpl"}
{block name='frontend_index_after_body'}
{$smarty.block.parent}
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.5&appId=562882437145097";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
{/block}Der Code sorgt dafür, dass die richtige Datei von Facebook in euren Shop eingebunden wird und ihr die Facebook Box anzeigen könnt.
Wir finden im Footer macht sich die Facebook Box am besten. Ihr könnt selbstverständlich selbst entscheiden wo diese platziert wird. Einfach bei dem richtigen Block anhängen. Im Footer ist aktuell noch unser Newsletter Feld drin, welches wir austauschen.
Dazu müssen wir nur den zweiten Code an die richtige Stelle einfügen. Wir öffnen im Ordner
themes/Frontend/MEINTHEME/frontend/index/die Datei footer-navigation.tpl und fügen folgenden Code ein:
{extends file="parent:frontend/index/footer-navigation.tpl"}
{block name="frontend_index_footer_column_newsletter"}
<div class="footer--column is--last block">
<div class="column--headline">Finde uns auf Facebook</div>
<div class="column--content">
<div class="fb-page" data-href="https://www.facebook.com/eightmylez" data-width="315" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/eightmylez"><a href="https://www.facebook.com/eightmylez">8mylez</a></blockquote></div></div>
</div>
</div>
{/block}
Dieser Code ist die Facebook Box mit unseren eingegeben Werten.
Cache leeren und Theme kompilieren nicht vergessen. So sollte es fertig aussehen:
Facebook Box ist drin. Sieht toll aus. Alle leben und sind unverletzt. Einfach toll!
Viel Spaß bei eurer eigenen Facebook Box.
So passt du den Hintergrund des Footer in Shopware an!
Du möchtest das "Realisiert mit Shopware" entfernen? Wir zeigen dir wie: Realisiert mit Shopware entfernen
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
Einen großen DANK für das Tutorial.
Ich habe versucht die Facebook Box in eine Einkaufswelt "Code Element" einzubauen. Dies ist mir leider nicht gelungen, es wird immer nur der Linkbalken angezeigt.
Gibt es hier eine Lösung dafür?
Vielleicht kann mir jemand helfen!
Gruß Martin
vielen Dank!
Hast du den Javascript Part richtig eingebunden? Gibt es in der Konsole der Developer Tools eine Fehlermeldung?
Gruß
Alexander
Es hat soweit auch alles funktioniert. Nur im mobile footer funktioniert die Accordion funktion nun nicht mehr ( das kleine plus auf der rechten).
Kann man dies eventuell noch anpassen ?
Liebe Grüße
Christoph
du kannst den Fehler beheben indem du das Div mit dem Facebook Kram in ein Div mit der Klasse "column--content" packst. Ich habe den Blog post angepasst. So sollte es funktionieren.
Gruß
Alexander
Unter dem Footer steht der Satz
* Alle Preise inkl. gesetzl. Mehrwertsteuer zzgl. Versandkosten und ggf. Nachnahmegebühren, wenn nicht anders beschrieben
und zwar mittig auf der Seite.
Nach Einbinden des Facebook steht der Satz nun recht unterhalb der Box Informationen und Finden Sie uns auf Facebook, er ist auf zwei Zeilen aufgeteilt und dabei noch schlecht umbrochen
Wie kann ich das ändern?
Über eine Idee wäre ich dankbar
Grüße
scheinbar ist da noch etwas schief gegangen beim Einbinden des Smarty Blocks. Am besten schaust du nochmal deine Anpassungen durch ob da möglicherweise zu viel Code geändert wurde.
Ansonsten kann ich dir unser kleines Support Paket für solche Fälle empfehlen: https://store.8mylez.com/support-ticket-4h?c=11
Gruß
Alexander
ich habs in die index.tpl gemacht, muss aber in die header.tpl !
jetzt funktionierts :-)
alles klar! Danke für den Hinweis. Ich werde es prüfen und den Beitrag aktualisieren.
Gruß
Alexander
Einbinden klappt, aber ich kriege nur ein Link-Balken angezeigt
(Shopware 5.2.15)
Code sieht jetzt so (von mir bearbeitet) aus:
{block name="frontend_index_footer_column_newsletter"}
{block name="frontend_index_footer_column_newsletter_headline"}
{s name="sFooterNewsletterHead"}{/s}
{/block}
< blockquote cite="https://www.facebook.com/FliesenWerkzeug/">< a href="https://www.facebook.com/FliesenWerkzeug/" rel="nofollow">FliesenWerkzeug< /a>< /blockquote>
{/block}
es sieht so aus, als haettest du das Facebook SDK nicht integriert. Das muss wie oben beschrieben eingebunden werden, sonst wird die Facebook Box nicht geladen.
Gruß
Alexander
Danke erstmal für das super Tutorial!
Sobald ich den Facebook SDK Code integrieren will ist meine Seite nicht mehr erreichbar. Also irgendwas stimmt damit nicht.
Könntet ihr mir evtl. helfen?
Liebe Grüße
Sandro
vielen Dank für das positive Feedback!
Kannst du mir FTP Zugang zu deinem Shop per Mail schicken? Dann kann ich mir das Ganze anschauen.
Gruß
Alexander
ich weiß nicht, ob ich hier richtig bin, aber irgendwie bin ich hier auf dieser Seite gelandet... mein Facebook-account hat nicht den button "abonnieren" und unter den Einstellen-Abonnenten gibt es nicht die Option "abonnieren aktivieren" sondern nur etwas von einem code, den ich kopieren soll. Wie bekomme ich es hin, dass bei meinem Freunden auch die Option abonnieren meiner Seite erscheint????
LG,
Karen
kannst du mir einen Screenshot zuschicken? Dann kann ich mir das genauer anschauen.
Gruß
Alexander
vielen Dank für deinen Input!
Bevor ihr Geschichte mit Facebook und Co. benutzt, sollte euch klar sein, dass diese auch im Datenschutz aufgeführt sind.
Am besten ist es wenn ihr euch mit einem Rechtsanwalt abstimmt. Der Händlerbund ist dafür auch sehr gut geeignet.
Gruß
Alexander
ich komme hier nicht ganz weiter, weil
1. themes/Frontend/MEINTHEME/frontend/index als Ordner nicht exisitert und
2. somit darin wohl keine Datei footer-navigation.tpl liegen kann.
Ich arbeite mit einer lokalem SW5.1.3 Version und bin süchtig nach diesen Beiträgen. Bitte mehr! :)
lg,
Philipp
vielen Dank!
ich vermute, dass du kein eigenes Theme vorher angelegt hast. Probier mal https://www.8mylez.com/blog/shopware-5-theme-erstellen/ oder unser erstes https://www.8mylez.com/blog/video-wie-du-dein-erstes-shopware-5-theme-anlegst-und-anpasst-teil-1/ aus.
Das sollte funktionieren :)
Gruß
Alexander
Was denkst du?