Social Media Icons auf der Detailseite

Social Media Icons auf der Detailseite

Ewald Gering 10. April 2018 0

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.

Hol dir unseren kostenlosen Shopware E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

Noch keine Kommentare vorhanden.

Was denkst du?

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Plugin Theme anpassen
Shopware Shop DSGVO konform gestalten - Alles auf einen Blick
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Staging Umgebung – Was ist das und warum brauchst du eine?
Shopware Logo aus dem Footer entfernen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
© 2017 by 8mylez. Powered by Goltfisch GmbH.