Social Media Icons auf der Detailseite

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;
    }