{"id":8972,"date":"2021-07-28T12:05:49","date_gmt":"2021-07-28T12:05:49","guid":{"rendered":"https:\/\/www.bay20.com\/?p=8972"},"modified":"2025-05-21T16:11:27","modified_gmt":"2025-05-21T10:26:27","slug":"anleitung-zum-erstellen-von-social-media-symbolen-auf-der-detailseite-in-shopware-5","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/anleitung-zum-erstellen-von-social-media-symbolen-auf-der-detailseite-in-shopware-5\/","title":{"rendered":"Wie erstellt man Social Media Icons auf der Detailseite in Shopware 5?"},"content":{"rendered":"\n

Um Social Media Icons auf der Detailseite in shopware 5<\/a> zu erstellen, gehen Sie wie folgt vor:<\/p>\n\n\n\n

Schritt 1:<\/strong> Gehen Sie zum Shopware-Themenverzeichnis Ihrer Website.<\/p>\n\n\n\n

Schritt 2:<\/strong><\/strong> Erstellen Sie eine neue Datei im Themenverzeichnis mit dem Namen \u201ebuy_container.tpl\u201c.<\/strong><\/strong><\/p>\n\n\n\n

Dateistruktur:-<\/strong><\/p>\n\n\n\n

themes>Frontend>Custom>frontend>detail>content>buy_container.tpl<\/strong>.<\/strong><\/p>\n\n\n\n

\"social<\/figure>\n\n\n\n

Hinweis: <\/strong>Das benutzerdefinierte<\/strong> Verzeichnis ist das Thema, das ich bereits erstellt habe.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Schritt 3: <\/strong>In \u201ebuy_container.tpl\u201c<\/strong> schreiben Sie diesen Code.<\/p>\n\n\n\n

{extends file=\"parent:frontend\/detail\/content\/buy_container.tpl\"}\n\n{block name='frontend_detail_index_buy_container_base_info'}\n\n {$smarty.block.parent}\n   <div class=\"detail-forms detail--share\">\n        <ul class=\"share-buttons\">\n          <li>\n            <a href=\"https:\/\/www.facebook.com\/\"\n            title=\"Share on Facebook\" target=\"_blank\" onclick=\"window.open('https:\/\/www.facebook.com\/sharer\/sharer.php?u=' +\n            encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;\">\n            <img alt=\"Share on Facebook\"\n            src=\"{link file='frontend\/_public\/src\/img\/icons\/Facebook.svg'}\">\n            <\/a>\n          <\/li>\n\n          <li>\n            <a href=\"https:\/\/twitter.com\/intent\/tweet?source=http%3A%2F%2F8mylez.com&text=:%20http%3A%2F%2F8mylez.com\"\n            target=\"_blank\" title=\"Tweet\" onclick=\"window.open('https:\/\/twitter.com\/intent\/tweet?text=' +\n            encodeURIComponent(document.title) + ':%20' + encodeURIComponent(document.URL)); return false;\">\n            <img alt=\"Tweet\"\n            src=\"{link file='frontend\/_public\/src\/img\/icons\/Twitter.svg'}\">\n            <\/a>\n          <\/li>\n\n          <li>\n            <a href=\"https:\/\/www.instagram.com\/\"\n            target=\"_blank\" title=\"Share on instagram\" onclick=\"window.open('https:\/\/www.instagram.com\/sharer.php?u=' +\n            encodeURIComponent(document.URL)); return false;\">\n            <img alt=\"Share on Instagram\"\n            src=\"{link file='frontend\/_public\/src\/img\/icons\/Instagram.svg'}\">\n            <\/a>\n          <\/li>\n\n          <li>\n            <a href=\"https:\/\/www.snapchat.com\/\"\n            target=\"_blank\" title=\"Share on SnapChat\" onclick=\"window.open('http:\/\/www.snapchat.com\/' +\n            encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.title)); return false;\">\n            <img alt=\"Share on SnapChat\"\n            src=\"{link file='frontend\/_public\/src\/img\/icons\/Snapchat.svg'}\">\n            <\/a>\n          <\/li>\n        <\/ul>\n      <\/div>\n{\/block}<\/code><\/pre>\n\n\n\n
Schritt 4: <\/strong>Wir m\u00fcssen die Icons herunterladen und im Verzeichnis \u201eicons\u201c ablegen.<\/p>\n\n\n\n
Dateistruktur:<\/strong><\/p>\n\n\n\n
themes>Frontend>Custom>frontend>_public>src>img>icons.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Hinweis:<\/strong> Das Div-Element verf\u00fcgt \u00fcber eine On-Click-Funktion, bei der wir die Share-Funktion \u00fcber die URL der jeweiligen Website aufrufen und unsere aktuelle URL anh\u00e4ngen k\u00f6nnen. Diese wird dann dem Nutzer zum Teilen vorgeschlagen. Damit es nach etwas aussieht, verwenden wir passende SVG-Dateien.<\/p>\n\n\n\n
Schritt 5: <\/strong>Erstellen Sie die Datei \u201edetail.less\u201c<\/strong> im Verzeichnis _modules<\/strong>.<\/p>\n\n\n\n
Dateistruktur:<\/strong><\/p>\n\n\n\n
themes>Frontend>Custom>frontend>_public>src>less>_modules>detail.less<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 6: <\/strong>Schreiben Sie diesen Code in die Datei detail.less<\/strong>.<\/p>\n\n\n\n
    ul.share-buttons{\n     list-style: none;\n    padding: 0;\n   }\n\n   ul.share-buttons li{\n     display: inline;\n   }\n\n   ul.share-buttons .sr-only {\n     position: absolute;\n     clip: rect(1px 1px 1px 1px);\n    clip: rect(1px, 1px, 1px, 1px);\n    padding: 0;\n     border: 0;\n     height: 1px;\n    width: 1px;\n     overflow: hidden;\n   }\n\n   ul.share-buttons img{\n     width: 40px;\n     float: left;\n     padding-right: 5px;\n   }<\/code><\/pre>\n\n\n\n
Schritt 7: <\/strong>Erstellen Sie die Datei \u201eall.less\u201c<\/strong> im less<\/strong>-Verzeichnis und importieren Sie die detail.less<\/strong>-Dateien darin.<\/p>\n\n\n\n
Dateistruktur:<\/strong><\/p>\n\n\n\n
themes>Frontend>Custom>frontend>_public>src>less>all.less<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Und schreiben Sie diesen Code in die Datei all.less<\/strong><\/p>\n\n\n\n
@import \"_modules\/detail\";<\/code><\/pre>\n\n\n\n
Hinweis:-<\/strong> L\u00f6schen Sie den Cache und gehen Sie zum Front Store.<\/p>\n\n\n\n
Ergebnisse:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Bitte kontaktieren Sie uns unter manish@bay20.com<\/a><\/strong> oder rufen Sie uns unter +91-8800519180<\/a> an, wenn Sie Unterst\u00fctzung zu Shopware 5 und Shopware 6 ben\u00f6tigen. Sie k\u00f6nnen auch die Shopware 5 Entwicklungsseite<\/strong><\/a><\/strong> besuchen, um die von uns angebotenen Dienstleistungen zu \u00fcberpr\u00fcfen.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
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 \u201ebuy_container.tpl\u201c. Dateistruktur:- themes>Frontend>Custom>frontend>detail>content>buy_container.tpl. Hinweis: Das benutzerdefinierte Verzeichnis ist das Thema, das ich bereits erstellt habe. Schritt 3: In […]<\/p>\n","protected":false},"author":74,"featured_media":8990,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[78,116],"tags":[],"class_list":["post-8972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopware","category-shopware-5"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/8972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=8972"}],"version-history":[{"count":18,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/8972\/revisions"}],"predecessor-version":[{"id":17276,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/8972\/revisions\/17276"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/8990"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=8972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=8972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=8972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}