Social Media Icons auf der Detailseite

Social Media Icons auf der Detailseite

Ewald Gering 10. April 2018 3

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 eigenen 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"}

Anschließend 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.

Wenn Du den Rest Deiner Detailseite auch noch anpassen möchtest, ist dieser Blogbeitrag etwas für Dich: Shopware Artikel Template anpassen

3 Kommentare

  • Hallo,

    wird es in Richtung Instagram, WhatsApp noch was kommen? Was auch interessant wäre, wäre die Mail und Druckfunktion an der Stelle einzubauen.

    Grüße
  • 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?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

Ü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


Unsere Partner
© 2023 by 8mylez GmbH //  Impressum + Datenschutz