Wie erstellt man Social Media Icons auf der Detailseite in Shopware 5?

social media icons Shopware 5
Shopware, Shopware 5

Um Social Media Icons auf der Detailseite in shopware 5 zu erstellen, gehen Sie wie folgt vor:

Schritt 1: Gehen Sie zum Shopware-Themenverzeichnis Ihrer Website.

Schritt 2: Erstellen Sie eine neue Datei im Themenverzeichnis mit dem Namen „buy_container.tpl“.

Dateistruktur:-

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

social media icons Shopware 5

Hinweis: Das benutzerdefinierte Verzeichnis ist das Thema, das ich bereits erstellt habe.

Schritt 3: In „buy_container.tpl“ schreiben Sie diesen 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}

Schritt 4: Wir müssen die Icons herunterladen und im Verzeichnis „icons“ ablegen.

Dateistruktur:

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

Hinweis: Das Div-Element verfügt über eine On-Click-Funktion, bei der wir die Share-Funktion über die URL der jeweiligen Website aufrufen und unsere aktuelle URL anhängen können. Diese wird dann dem Nutzer zum Teilen vorgeschlagen. Damit es nach etwas aussieht, verwenden wir passende SVG-Dateien.

Schritt 5: Erstellen Sie die Datei „detail.less“ im Verzeichnis _modules.

Dateistruktur:

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

Schritt 6: Schreiben Sie diesen Code in die Datei detail.less.

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

Schritt 7: Erstellen Sie die Datei „all.less“ im less-Verzeichnis und importieren Sie die detail.less-Dateien darin.

Dateistruktur:

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

Und schreiben Sie diesen Code in die Datei all.less

@import "_modules/detail";

Hinweis:- Löschen Sie den Cache und gehen Sie zum Front Store.

Ergebnisse:

Bitte kontaktieren Sie uns unter manish@bay20.com oder rufen Sie uns unter +91-8800519180 an, wenn Sie Unterstützung zu Shopware 5 und Shopware 6 benötigen. Sie können auch die Shopware 5 Entwicklungsseite besuchen, um die von uns angebotenen Dienstleistungen zu überprüfen.