How to create Social media icons on the detail page in shopware 5?

social media icons Shopware 5
Shopware, Shopware 5

To create Social media icons on the detail page in shopware 5 follow the following steps:

Step 1: Go to shopware theme directory of your website.

Step 2: Create a new file in theme directory called “buy_container.tpl“

File Structure:–

themes>Frontend>Custom>frontend>detail>content>buy_container.tpl.

social media icons Shopware 5

Note: Custom directory is theme which I created already.

Step 3: In “buy_container.tpl” write this code.

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

{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/"
            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/img/icons/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/img/icons/Twitter.svg'}">
            </a>
          </li>

          <li>
            <a href="https://www.instagram.com/"
            target="_blank" title="Share on instagram" onclick="window.open('https://www.instagram.com/sharer.php?u=' +
            encodeURIComponent(document.URL)); return false;">
            <img alt="Share on Instagram"
            src="{link file='frontend/_public/src/img/icons/Instagram.svg'}">
            </a>
          </li>

          <li>
            <a href="https://www.snapchat.com/"
            target="_blank" title="Share on SnapChat" onclick="window.open('http://www.snapchat.com/' +
            encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.title)); return false;">
            <img alt="Share on SnapChat"
            src="{link file='frontend/_public/src/img/icons/Snapchat.svg'}">
            </a>
          </li>
        </ul>
      </div>
{/block}

Step 4: We have to download the icons and place them into “icons” directory.

File Structure:

themes>Frontend>Custom>frontend>_public>src>img>icons.

Note:– The Div element has an on click function in which we can the share function via the URL of the respective website and attach our current URL. This is then suggested to the user to share. So that it looks like something, we use suitable SVG files.

Step 5: Create “detail.less” file in _modules directory.

File Structure:

themes>Frontend>Custom>frontend>_public>src>less>_modules>detail.less

Step 6: Write this code in detail.less file.

    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: 40px;
     float: left;
     padding-right: 5px;
   }

Step 7: Create “all.less” file in less directory and import detail.less files in it.

File Structure:

themes>Frontend>Custom>frontend>_public>src>less>all.less

And write this code on all.less file

@import "_modules/detail";

Note:- Clear the cache and go to the front store.

Results:

Please contact us at manish@bay20.com or call us at +91-8800519180 for any support related to shopware 5 and shopware 6. You can also visit the Shopware 5 development page to check the services we offer.