Social Media Icons auf der Detailseite

Social Media Icons auf der Detailseite

Ewald Gering 10. April 2018 2

In diesem Blogbeitrag zeigen wir dir wie du Social Media Icons auf der Detailseite einblenden kannst damit deine Kunden diese auf den jeweiligen Plattformen teilen können.

Das ganze machen wir in einem eigenem Theme. Falls du noch keins hast, kannst du hier nachschauen wie du eins anlegen kannst: Theme in Shopware 5 anlegen

Info: Dieses Tutorial bezieht sich auf die aktuelle Shopware Version 5.4.2 und muss eventuell auf älteren Versionen anders angepasst werden.

Wie sieht das ganze aus wenn es fertig ist? In etwa so: 

Bildschirmfoto 2018 04 06 um 16.49.32

Wie das Theme angepasst wird.

Die Template Datei buy_container.tpl müssen wir in diesem Verzeichnis anlegen:

"themes/Frontend/DEINTHEME/frontend/detail/content"

In dieser Datei wollen wir den folgenden Block erweitern: 'frontend_detail_index_buy_container_base_info'

Wie gewohnt erweitern wir die Originale Datei mit dem extends Befehl:

{extends file="parent:frontend/detail/content/buy_container.tpl"}

Anschliessend erweitern wir explizit den oben genannten Block mit unseren Icons.

Info: Die 8mylez.com Adresse in den Links solltest du noch anpassen ;)

{block name='frontend_detail_index_buy_container_base_info'}

{$smarty.block.parent} <div class="detail-forms detail--share"> <ul class="share-buttons"> <li> <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2F8mylez.com&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"> <img alt="Share on Facebook" src="{link file='frontend/_public/src/images/social_flat_rounded_rects_svg/Facebook.svg'}"> </a> </li> <li> <a href="https://twitter.com/intent/tweet?source=http%3A%2F%2F8mylez.com&text=:%20http%3A%2F%2F8mylez.com" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + ':%20' + encodeURIComponent(document.URL)); return false;"> <img alt="Tweet" src="{link file='frontend/_public/src/images/social_flat_rounded_rects_svg/Twitter.svg'}"> </a> </li> <li> <a href="https://plus.google.com/share?url=http%3A%2F%2F8mylez.com" target="_blank" title="Share on Google+" onclick="window.open('https://plus.google.com/share?url=' + encodeURIComponent(document.URL)); return false;"> <img alt="Share on Google+" src="{link file='frontend/_public/src/images/social_flat_rounded_rects_svg/Google+.svg'}"> </a> </li> <li> <a href="http://www.tumblr.com/share?v=3&u=http%3A%2F%2F8mylez.com&t=&s=" target="_blank" title="Post to Tumblr" onclick="window.open('http://www.tumblr.com/share?v=3&u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.title)); return false;"> <img alt="Post to Tumblr" src="{link file='frontend/_public/src/images/social_flat_rounded_rects_svg/Tumblr.svg'}"> </a> </li> </ul> </div> {/block}

Hier sieht man, dass das Div Element eine onclick Funktion hat in der wir die Teilen-Funktion über die URL der jeweiligen Website nutzen und unsere aktuelle URL anhängen. Diese wird dann dem Nutzer vorgeschlagen zu teilen.

Damit das auch nach etwas aussieht nutzen wir passende SVG Dateien.

Less Anpassungen

Da das ganze noch nicht wirklich schön und in unserem Fall auch sehr riesig aussieht passen wir die Icons noch an.

Dazu passen oder legen wir eine neue Datei namens 'detail.less' in dem _modules Ordner an. Diese Less Datei muss natürlich noch in der all.less eingebunden werden. Je nachdem wie ihr eure Struktur aufgebaut habt sollte diese dann in eine modules.less inkludiert werden.


    
    ul.share-buttons{
      list-style: none;
      padding: 0;
    }
    
    ul.share-buttons li{
      display: inline;
    }
    
    ul.share-buttons .sr-only {
      position: absolute;
      clip: rect(1px 1px 1px 1px);
      clip: rect(1px, 1px, 1px, 1px);
      padding: 0;
      border: 0;
      height: 1px;
      width: 1px;
      overflow: hidden;
    }
    
    ul.share-buttons img{
      width: 32px;
      float: left;
      padding-right: 5px;
    }

Geschafft

Jetzt kann jeder Kunde auf jeder Detailseite deine coolen Produkte auf seiner Facebook, Twitter Seite usw. teilen um mehr Leute auf deine Produkte aufmerksam zu machen.

2 Kommentare

  • Hallo!
    Ist diese Variante der Einbindung DSGVO konform oder brauchts da noch einen extra Hinweis?
    Wie geht das für Whatsapp, Instagram oder Messenger?
  • Hey Sel4,

    da wir keine Daten abgreifen, sondern nur Links erstellen die weiterleiten, gibt es keine Probleme mit der DSGVO. Im Idealfall besprichst du das aber mit deinem Datenschutzbeauftragten :)

    Mit Whatsapp, Instagram oder Messenger haben wir uns noch nicht befasst, sobald das kommt, werden wir diesen Blogpost updaten!

    Gruß
    Alexander

Was denkst du?

SEO für Shopware!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen für gute Rankings in den Suchmaschinen.
Zum Store

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Freitextfelder im Shopware Frontend ausgeben
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Logo Größe mit Less für Shopware 5 anpassen
Shopware Theme: Eigenes Listing Layout erstellen
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Wie du schnell und einfach Google Shopping für Shopware einrichtest
Social Media Icon mit Link im Footer
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Plugin Themes überschreiben und anpassen
© 2017 by 8mylez. Powered by Goltfisch GmbH.