{"id":33,"date":"2021-10-17T17:34:22","date_gmt":"2021-10-17T15:34:22","guid":{"rendered":"https:\/\/sumedia.myddns.me\/sumedia\/sumedia-webdesign\/www.sumedia-webdesign.de\/blog\/?p=33"},"modified":"2024-12-02T07:50:51","modified_gmt":"2024-12-02T06:50:51","slug":"shopware-6-produktbild-badge-produktkennzeichnung","status":"publish","type":"post","link":"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/","title":{"rendered":"Shopware 6 Produktbild \u2013 Badge\/Produktkennzeichnung"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Zielsetzung<\/h2>\n\n\n\n<p>Am Produktbild, dem Shopware 6 Produktbild, sollen Badges angezeigt werden die Aussagen \u00fcber das Produkt vermitteln sollen. In diesem speziellen Fall geht es um Auszeichnungen bei den Produkten eines Weinguts. Auszeichnungen der Kammer sollen so direkt dem Kunden ersichtlich sein.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Problemstellung<\/h2>\n\n\n\n<p>Wir haben verschiedene Produktbilder f\u00fcr ein Produkt und wollen jeweils f\u00fcr jedes Bild entsprechende Badges setzen. Au\u00dferdem ist zu gew\u00e4hrleisten, dass die Badges mit der Zoom-Funktion f\u00fcr das Shopware 6 Produktbild keine ungewollten Seiteneffekte erzeugen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">L\u00f6sungsweg<\/h2>\n\n\n\n<p>Um die Zielsetzung zu erreichen sind folgende Schritte notwendig<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Im Frontend muss f\u00fcr jedes einzelne Shopware 6 Produktbild entschieden werden ob es einen entsprechenden Badge erhalten soll. Dazu muss differenziert werden ob es Badges gibt und welches Bild davon betroffen ist.<\/li>\n\n\n\n<li>Das Template zur Ausgabe verarbeitet diese Conditions und zeigt dementsprechend Badges am Produktbild an.<\/li>\n<\/ul>\n\n\n\n<p>Um das Beispiel an dieser Stelle nicht ausufern zu lassen, werden wir die Frontendlogik f\u00fcr das definieren der Badges einfach festlegen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Voraussetzungen<\/h2>\n\n\n\n<p>Es wird vorausgesetzt, dass gewusst wird <a href=\"https:\/\/www.shopware.com\/en\/news\/the-plugin-system-how-to-extend-shopware-6-with-plugins\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">w<\/a><a href=\"https:\/\/www.shopware.com\/en\/news\/the-plugin-system-how-to-extend-shopware-6-with-plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">ie ein Plugin angelegt wird<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Umsetzung<\/h2>\n\n\n\n<p>Als erstes der vollst\u00e4ndige Verzeichnisbaum des fertigen Produkts:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"759\" src=\"https:\/\/sumedia.myddns.me\/sumedia\/sumedia-webdesign\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/dirtree-1.png\" alt=\"\" class=\"wp-image-35\" srcset=\"https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/dirtree-1.png 550w, https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/dirtree-1-217x300.png 217w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<p>Bevor wir Badges im Frontend anzeigen k\u00f6nnen, m\u00fcssen wir einen Event Subscriber zur Verf\u00fcgung stellen, der die MediaEntity um die zus\u00e4tzlichen Informationen zu dem Shopware 6 Produktbild erweitert.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">src\/Subscriber\/ProductLoadedSubscriber.php<\/pre>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\n&lt;?php declare(strict_types=1);\n\nnamespace Weinklang\\ProductImageBadge\\Subscriber;\n\nuse Shopware\\Core\\Content\\Media\\MediaEntity;\nuse Shopware\\Core\\Content\\Product\\ProductEvents;\nuse Shopware\\Core\\Content\\Product\\SalesChannel\\SalesChannelProductEntity;\nuse Shopware\\Core\\Framework\\DataAbstractionLayer\\Event\\EntityLoadedEvent;\nuse Shopware\\Core\\Framework\\Struct\\ArrayStruct;\nuse Symfony\\Component\\EventDispatcher\\EventSubscriberInterface;\n\nclass ProductLoadedSubscriber implements EventSubscriberInterface\n{\n    public static function getSubscribedEvents(): array\n    {\n        return &#x5B;\n            ProductEvents::PRODUCT_LOADED_EVENT =&gt; &#039;onProductLoaded&#039;\n        ];\n    }\n\n    public function onProductLoaded(EntityLoadedEvent $productEntityEvent): void\n    {\n        \/\/ don&#039;t break the admin\n        $source = $productEntityEvent-&gt;getContext()-&gt;getSource();\n        if (method_exists($source, &#039;isAdmin&#039;) &amp;&amp; $source-&gt;isAdmin()) {\n            return;\n        }\n\n        \/** @var SalesChannelProductEntity $product *\/\n        foreach ($productEntityEvent-&gt;getEntities() as $product) {\n            $media = $product-&gt;getMedia();\n            if (null === $media) {\n                \/\/ the product listing works with the cover and has no loaded media\n                $productMediaEntity = $product-&gt;getCover();\n                $mediaEntity = $productMediaEntity-&gt;getMedia();\n                $this-&gt;addProductImageBadges($mediaEntity);\n            } else {\n                \/\/ the product details has loaded media\n                $productMediaCollection = $product-&gt;getMedia();\n                foreach ($productMediaCollection as $productMediaEntity) {\n                    $mediaEntity = $productMediaEntity-&gt;getMedia();\n                    $this-&gt;addProductImageBadges($mediaEntity);\n                }\n            }\n        }\n    }\n\n    private function addProductImageBadges(MediaEntity $mediaEntity): void\n    {\n        \/\/ we fake the badges in this blog post\n        $index = rand(0, 1);\n        $badges = &#x5B;\n            &#039;images\/goldene-kammerpreismuenze.png&#039;,\n            &#039;images\/silberne-kammerpreismuenze.png&#039;\n        ];\n        unset($badges&#x5B;$index]);\n\n        \/\/ extend the media entity to contain the badges informations\n        $mediaEntity-&gt;addExtension(&#039;product_image_badges&#039;, new ArrayStruct(&#x5B;&#039;badges&#039; =&gt; $badges]));\n    }\n}\n\n<\/pre><\/div>\n\n\n<p>Um diesen Event Subscriber beim Laden des Produkts auszuf\u00fchren, m\u00fcssen wir den Service definieren und mitteilen, dass es sich hierbei um einen Event Subscriber handelt.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">src\/Resources\/config\/services.xml<\/pre>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;?xml version=&quot;1.0&quot; ?&gt;\n\n&lt;container xmlns=&quot;http:\/\/symfony.com\/schema\/dic\/services&quot;\n           xmlns:xsi=&quot;http:\/\/www.w3.org\/2001\/XMLSchema-instance&quot;\n           xsi:schemaLocation=&quot;http:\/\/symfony.com\/schema\/dic\/services http:\/\/symfony.com\/schema\/dic\/services\/services-1.0.xsd&quot;&gt;\n    &lt;services&gt;\n\n        &lt;service id=&quot;Weinklang\\ProductImageBadge\\Subscriber\\ProductLoadedSubscriber&quot;&gt;\n            &lt;tag name=&quot;kernel.event_subscriber&quot; \/&gt;\n        &lt;\/service&gt;\n\n    &lt;\/services&gt;\n&lt;\/container&gt;\n<\/pre><\/div>\n\n\n<p>Jetzt werden alle Badgedaten geladen und k\u00f6nnen in das Frontend integriert werden. Zun\u00e4chst einmal m\u00f6chte ich die Bilder f\u00fcr die Badges zur Verf\u00fcgung stellen. Das Verzeichnis <em>\/src\/Resources\/public<\/em> wird bei einem Plugin dazu verwendet um Assets in das \u00f6ffentliche Verzeichnis zu kopieren, in diesem Falle nach <em>\/bundles\/weinklangproductimagebadge\/assets\/images\/\u2026<\/em>, diese m\u00fcssen dann \u00f6ffentlich zug\u00e4nglich gemacht werden mit:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>bin\/console assets:install<\/code><\/pre>\n\n\n\n<p>Jetzt k\u00f6nnen wir beginnen das erste Template zu \u00fcberschreiben. Um Templates als Plugin zu \u00fcberschreiben wird der Dateipfad wie einem Theme verwendet, <em>\/src\/Resources\/views\/storefront<\/em> und dann das entsprechende zu \u00fcberschreibende Template. Um das korrekte Template zu finden suchen wir in <em>\/vendor\/shopware\/storefront\/Resources\/views\/storefront<\/em>.<\/p>\n\n\n\n<p>Wir fangen mit dem Produktlisting an und erg\u00e4nzen unsere Badges am Bild. Hierbei ist zu beachten, dass im Produktlisting nur das Cover geladen wird, keine anderen Product Media Entities.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/src\/Resources\/views\/storefront\/component\/product\/card\/badges.html.twig<\/pre>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n{% sw_extends &#039;@Storefront\/storefront\/component\/product\/card\/badges.html.twig&#039; %}\n\n{% block component_product_badges %}\n    {{ parent() }}\n    &lt;div class=&quot;product-image-badges&quot;&gt;\n        {% for badge in product.cover.media.extensions.product_image_badges.badges %}\n            {% set image = asset(&#039;bundles\/weinklangproductimagebadge\/assets\/&#039; ~ badge) %}\n            &lt;span class=&quot;product-image-badge&quot;&gt;&lt;img src=&quot;{{ image }}&quot; \/&gt;&lt;\/span&gt;\n        {% endfor %}\n    &lt;\/div&gt;\n{% endblock %}\n<\/pre><\/div>\n\n\n<p>Sobald der sp\u00e4ter noch hinzugef\u00fcgt Stylesheet eingesetzt wird erhalten wir folgendes Gesamtbild. Hinzugekommen sind am Shopware 6 Produktbild die Kreisf\u00f6rmigen Kammerpreism\u00fcnzen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"894\" src=\"https:\/\/sumedia.myddns.me\/sumedia\/sumedia-webdesign\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/productlist-1024x894.png\" alt=\"\" class=\"wp-image-36\" srcset=\"https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/productlist-1024x894.png 1024w, https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/productlist-300x262.png 300w, https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/productlist-768x670.png 768w, https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/productlist.png 1330w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Das selbe wollen wir jetzt f\u00fcr die Produktdetailseite implementieren. Hier verh\u00e4lt es sich etwas anders. Hier werden alle Bilder geladen und wir nutzen nicht das Cover, da jedes Bild seine eigenen Badges haben kann.<\/p>\n\n\n\n<p>Der Folgende Code ist etwas umfangreicher, da wir ein ganzes Segment \u00fcberschreiben m\u00fcssen und zwischen mehreren und einem einzelnen Bild differenzieren.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/src\/Resources\/views\/storefront\/element\/cms-element-image-gallery.html.twig<\/pre>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n{% sw_extends &#039;@Storefront\/storefront\/element\/cms-element-image-gallery.html.twig&#039; %}\n\n{% block element_image_gallery_inner_item %}\n    &lt;div class=&quot;gallery-slider-item-container&quot;&gt;\n        &lt;div class=&quot;gallery-slider-item is-{{ displayMode }} js-magnifier-container&quot;{% if minHeight and  (displayMode == &quot;cover&quot; or displayMode == &quot;contain&quot; ) %} style=&quot;min-height: {{ minHeight }}&quot;{% endif %}&gt;\n            {% block product_image_badges %}\n                &lt;div class=&quot;product-image-badges&quot;&gt;\n                    {% for badge in image.extensions.product_image_badges.badges %}\n                        {% set image = asset(&#039;bundles\/weinklangproductimagebadge\/assets\/&#039; ~ badge) %}\n                        &lt;span class=&quot;product-image-badge&quot;&gt;&lt;img src=&quot;{{ image }}&quot; \/&gt;&lt;\/span&gt;\n                    {% endfor %}\n                &lt;\/div&gt;\n            {% endblock %}\n            {% set attributes = {\n                &#039;class&#039;: &#039;img-fluid gallery-slider-image magnifier-image js-magnifier-image&#039;,\n                &#039;alt&#039;: (image.translated.alt ?: fallbackImageTitle),\n                &#039;title&#039;: (image.translated.title ?: fallbackImageTitle),\n                &#039;data-full-image&#039;: image.url\n            } %}\n\n            {% if displayMode == &#039;cover&#039; or displayMode == &#039;contain&#039; %}\n                {% set attributes = attributes|merge({ &#039;data-object-fit&#039;: displayMode }) %}\n            {% endif %}\n\n            {% if isProduct %}\n                {% set attributes = attributes|merge({ &#039;itemprop&#039;: &#039;image&#039; }) %}\n            {% endif %}\n\n            {% sw_thumbnails &#039;gallery-slider-image-thumbnails&#039; with {\n                media: image\n            } %}\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n{% endblock %}\n\n{% block element_image_gallery_inner_single %}\n    &lt;div class=&quot;gallery-slider-single-image is-{{ displayMode }} js-magnifier-container&quot;{% if minHeight %} style=&quot;min-height: {{ minHeight }}&quot;{% endif %}&gt;\n        {% block product_image_badges_single %}\n            &lt;div class=&quot;product-image-badges&quot;&gt;\n                {% for productMediaEntity in page.product.media %}\n                    {% for badge in productMediaEntity.media.extensions.product_image_badges.badges %}\n                        {% set image = asset(&#039;bundles\/weinklangproductimagebadge\/assets\/&#039; ~ badge) %}\n                        &lt;span class=&quot;product-image-badge&quot;&gt;&lt;img src=&quot;{{ image }}&quot; \/&gt;&lt;\/span&gt;\n                    {% endfor %}\n                {% endfor %}\n            &lt;\/div&gt;\n        {% endblock %}\n        {% if imageCount &gt; 0 %}\n            {% set attributes = {\n                &#039;class&#039;: &#039;img-fluid gallery-slider-image magnifier-image js-magnifier-image&#039;,\n                &#039;alt&#039;: (mediaItems|first.translated.alt ?: fallbackImageTitle),\n                &#039;title&#039;: (mediaItems|first.translated.title ?: fallbackImageTitle),\n                &#039;data-full-image&#039;: mediaItems|first.url\n            } %}\n\n            {% if displayMode == &#039;cover&#039; or displayMode == &#039;contain&#039; %}\n                {% set attributes = attributes|merge({ &#039;data-object-fit&#039;: displayMode }) %}\n            {% endif %}\n\n            {% if isProduct %}\n                {% set attributes = attributes|merge({ &#039;itemprop&#039;: &#039;image&#039; }) %}\n            {% endif %}\n\n            {% sw_thumbnails &#039;gallery-slider-image-thumbnails&#039; with {\n                media: mediaItems|first,\n            } %}\n        {% else %}\n            {% sw_icon &#039;placeholder&#039; style {\n                &#039;size&#039;: &#039;fluid&#039;\n            } %}\n        {% endif %}\n    &lt;\/div&gt;\n{% endblock %}\n<\/pre><\/div>\n\n\n<p>Hinzugef\u00fcgt wurden lediglich die Bl\u00f6cke<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>{% block product_image_badges %}<\/li>\n\n\n\n<li>{% block product_image_badges_single %}<\/li>\n<\/ul>\n\n\n\n<p>Damit das ganze auch entsprechend funktioniert und nach was aussieht brauchen wir noch ein wenig CSS mit dem wird die Bilder positionieren. Diese SCSS Datei wird f\u00fcr Plugins in das Verzeichnis <em>\/src\/Resources\/app\/storefront\/src\/scss<\/em> abgespeichert. Shopware sucht an dieser Stelle nach den SCSS Dateien.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/src\/Resources\/app\/storefront\/src\/scss\/base.scss<\/pre>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.gallery-slider-item-container {\n  position: relative;\n}\n\n.product-image-badges {\n  position:absolute;\n  top:10px;\n  right:10px;\n  z-index: 1000;\n}\n<\/pre><\/div>\n\n\n<p>Und am Ende sieht dies dann so aus:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"759\" src=\"https:\/\/sumedia.myddns.me\/sumedia\/sumedia-webdesign\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/productdetails-1024x759.png\" alt=\"\" class=\"wp-image-37\" srcset=\"https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/productdetails-1024x759.png 1024w, https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/productdetails-300x222.png 300w, https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/productdetails-768x569.png 768w, https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/productdetails.png 1310w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ja, die Position ist noch nicht so optimal und sollte n\u00e4her am Bild sein, dass ist n\u00e4mlich wesentlich kleiner, aber sollte f\u00fcr hier erstmal gen\u00fcgen. Wenn man die Seite weiterbl\u00e4ttert, erh\u00e4lt man ein anderes Badge am Shopware 6 Produktbild.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"558\" src=\"https:\/\/sumedia.myddns.me\/sumedia\/sumedia-webdesign\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/productdetails2-1024x558.png\" alt=\"\" class=\"wp-image-38\" srcset=\"https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/productdetails2-1024x558.png 1024w, https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/productdetails2-300x163.png 300w, https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/productdetails2-768x418.png 768w, https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/productdetails2.png 1423w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zielsetzung Am Produktbild, dem Shopware 6 Produktbild, sollen Badges angezeigt werden die Aussagen \u00fcber das Produkt vermitteln sollen. In diesem speziellen Fall geht es um Auszeichnungen bei den Produkten eines &hellip; <\/p>\n","protected":false},"author":2,"featured_media":151,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-33","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopware"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Shopware 6 Produktbild \u2013 Badge\/Produktkennzeichnung - S.U. Media<\/title>\n<meta name=\"description\" content=\"Am Produktbild, dem Shopware 6 Produktbild, sollen Badges angezeigt werden die Aussagen \u00fcber das Produkt vermitteln sollen. In diesem speziellen Fall geht es um Auszeichnungen bei den Produkten eines Weinguts. Auszeichnungen der Kammer sollen so direkt dem Kunden ersichtlich sein.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Shopware 6 Produktbild \u2013 Badge\/Produktkennzeichnung - S.U. Media\" \/>\n<meta property=\"og:description\" content=\"Am Produktbild, dem Shopware 6 Produktbild, sollen Badges angezeigt werden die Aussagen \u00fcber das Produkt vermitteln sollen. In diesem speziellen Fall geht es um Auszeichnungen bei den Produkten eines Weinguts. Auszeichnungen der Kammer sollen so direkt dem Kunden ersichtlich sein.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/\" \/>\n<meta property=\"og:site_name\" content=\"S.U. Media\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/sumediawebdesignrheinhessen\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-17T15:34:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-02T06:50:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2021\/10\/shopping-online-home-concept-cartons-shopping-cart-laptop-keyboard.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sven Ullmann\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SumediaWeb\" \/>\n<meta name=\"twitter:site\" content=\"@SumediaWeb\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sven Ullmann\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/\"},\"author\":{\"name\":\"Sven Ullmann\",\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/#\/schema\/person\/9f1d5cc1dd4dc671a6b4489798b598ae\"},\"headline\":\"Shopware 6 Produktbild \u2013 Badge\/Produktkennzeichnung\",\"datePublished\":\"2021-10-17T15:34:22+00:00\",\"dateModified\":\"2024-12-02T06:50:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/\"},\"wordCount\":587,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2021\/10\/shopping-online-home-concept-cartons-shopping-cart-laptop-keyboard.jpg\",\"articleSection\":[\"Shopware\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/\",\"url\":\"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/\",\"name\":\"Shopware 6 Produktbild \u2013 Badge\/Produktkennzeichnung - S.U. Media\",\"isPartOf\":{\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2021\/10\/shopping-online-home-concept-cartons-shopping-cart-laptop-keyboard.jpg\",\"datePublished\":\"2021-10-17T15:34:22+00:00\",\"dateModified\":\"2024-12-02T06:50:51+00:00\",\"description\":\"Am Produktbild, dem Shopware 6 Produktbild, sollen Badges angezeigt werden die Aussagen \u00fcber das Produkt vermitteln sollen. In diesem speziellen Fall geht es um Auszeichnungen bei den Produkten eines Weinguts. Auszeichnungen der Kammer sollen so direkt dem Kunden ersichtlich sein.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#primaryimage\",\"url\":\"https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2021\/10\/shopping-online-home-concept-cartons-shopping-cart-laptop-keyboard.jpg\",\"contentUrl\":\"https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2021\/10\/shopping-online-home-concept-cartons-shopping-cart-laptop-keyboard.jpg\",\"width\":1000,\"height\":667,\"caption\":\"shopping online at home concept.Cartons in a shopping cart on a laptop keyboard.online shopping is a form of electronic commerce that allows consumers to directly buy goods from a seller over internet\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.sumedia-webdesign.de\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Shopware 6 Produktbild \u2013 Badge\/Produktkennzeichnung\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/#website\",\"url\":\"https:\/\/www.sumedia-webdesign.de\/blog\/\",\"name\":\"Sumedia Blog\",\"description\":\"Ihr Erfolg, mein Ziel.\",\"publisher\":{\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sumedia-webdesign.de\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/#organization\",\"name\":\"Sumedia Blog\",\"url\":\"https:\/\/www.sumedia-webdesign.de\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sumedia.myddns.me\/sumedia\/sumedia-webdesign\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/logo-darkbg.png\",\"contentUrl\":\"https:\/\/sumedia.myddns.me\/sumedia\/sumedia-webdesign\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/logo-darkbg.png\",\"width\":370,\"height\":147,\"caption\":\"Sumedia Blog\"},\"image\":{\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/sumediawebdesignrheinhessen\",\"https:\/\/x.com\/SumediaWeb\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.sumedia-webdesign.de\/blog\/#\/schema\/person\/9f1d5cc1dd4dc671a6b4489798b598ae\",\"name\":\"Sven Ullmann\",\"sameAs\":[\"https:\/\/www.sumedia-webdesign.de\"],\"url\":\"https:\/\/www.sumedia-webdesign.de\/blog\/author\/sven-ullmann\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Shopware 6 Produktbild \u2013 Badge\/Produktkennzeichnung - S.U. Media","description":"Am Produktbild, dem Shopware 6 Produktbild, sollen Badges angezeigt werden die Aussagen \u00fcber das Produkt vermitteln sollen. In diesem speziellen Fall geht es um Auszeichnungen bei den Produkten eines Weinguts. Auszeichnungen der Kammer sollen so direkt dem Kunden ersichtlich sein.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/","og_locale":"de_DE","og_type":"article","og_title":"Shopware 6 Produktbild \u2013 Badge\/Produktkennzeichnung - S.U. Media","og_description":"Am Produktbild, dem Shopware 6 Produktbild, sollen Badges angezeigt werden die Aussagen \u00fcber das Produkt vermitteln sollen. In diesem speziellen Fall geht es um Auszeichnungen bei den Produkten eines Weinguts. Auszeichnungen der Kammer sollen so direkt dem Kunden ersichtlich sein.","og_url":"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/","og_site_name":"S.U. Media","article_publisher":"https:\/\/www.facebook.com\/sumediawebdesignrheinhessen","article_published_time":"2021-10-17T15:34:22+00:00","article_modified_time":"2024-12-02T06:50:51+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2021\/10\/shopping-online-home-concept-cartons-shopping-cart-laptop-keyboard.jpg","type":"image\/jpeg"}],"author":"Sven Ullmann","twitter_card":"summary_large_image","twitter_creator":"@SumediaWeb","twitter_site":"@SumediaWeb","twitter_misc":{"Verfasst von":"Sven Ullmann","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#article","isPartOf":{"@id":"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/"},"author":{"name":"Sven Ullmann","@id":"https:\/\/www.sumedia-webdesign.de\/blog\/#\/schema\/person\/9f1d5cc1dd4dc671a6b4489798b598ae"},"headline":"Shopware 6 Produktbild \u2013 Badge\/Produktkennzeichnung","datePublished":"2021-10-17T15:34:22+00:00","dateModified":"2024-12-02T06:50:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/"},"wordCount":587,"commentCount":2,"publisher":{"@id":"https:\/\/www.sumedia-webdesign.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#primaryimage"},"thumbnailUrl":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2021\/10\/shopping-online-home-concept-cartons-shopping-cart-laptop-keyboard.jpg","articleSection":["Shopware"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/","url":"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/","name":"Shopware 6 Produktbild \u2013 Badge\/Produktkennzeichnung - S.U. Media","isPartOf":{"@id":"https:\/\/www.sumedia-webdesign.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#primaryimage"},"image":{"@id":"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#primaryimage"},"thumbnailUrl":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2021\/10\/shopping-online-home-concept-cartons-shopping-cart-laptop-keyboard.jpg","datePublished":"2021-10-17T15:34:22+00:00","dateModified":"2024-12-02T06:50:51+00:00","description":"Am Produktbild, dem Shopware 6 Produktbild, sollen Badges angezeigt werden die Aussagen \u00fcber das Produkt vermitteln sollen. In diesem speziellen Fall geht es um Auszeichnungen bei den Produkten eines Weinguts. Auszeichnungen der Kammer sollen so direkt dem Kunden ersichtlich sein.","breadcrumb":{"@id":"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#primaryimage","url":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2021\/10\/shopping-online-home-concept-cartons-shopping-cart-laptop-keyboard.jpg","contentUrl":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2021\/10\/shopping-online-home-concept-cartons-shopping-cart-laptop-keyboard.jpg","width":1000,"height":667,"caption":"shopping online at home concept.Cartons in a shopping cart on a laptop keyboard.online shopping is a form of electronic commerce that allows consumers to directly buy goods from a seller over internet"},{"@type":"BreadcrumbList","@id":"https:\/\/www.sumedia-webdesign.de\/blog\/shopware\/shopware-6-produktbild-badge-produktkennzeichnung\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.sumedia-webdesign.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Shopware 6 Produktbild \u2013 Badge\/Produktkennzeichnung"}]},{"@type":"WebSite","@id":"https:\/\/www.sumedia-webdesign.de\/blog\/#website","url":"https:\/\/www.sumedia-webdesign.de\/blog\/","name":"Sumedia Blog","description":"Ihr Erfolg, mein Ziel.","publisher":{"@id":"https:\/\/www.sumedia-webdesign.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sumedia-webdesign.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.sumedia-webdesign.de\/blog\/#organization","name":"Sumedia Blog","url":"https:\/\/www.sumedia-webdesign.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.sumedia-webdesign.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sumedia.myddns.me\/sumedia\/sumedia-webdesign\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/logo-darkbg.png","contentUrl":"https:\/\/sumedia.myddns.me\/sumedia\/sumedia-webdesign\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2024\/12\/logo-darkbg.png","width":370,"height":147,"caption":"Sumedia Blog"},"image":{"@id":"https:\/\/www.sumedia-webdesign.de\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/sumediawebdesignrheinhessen","https:\/\/x.com\/SumediaWeb"]},{"@type":"Person","@id":"https:\/\/www.sumedia-webdesign.de\/blog\/#\/schema\/person\/9f1d5cc1dd4dc671a6b4489798b598ae","name":"Sven Ullmann","sameAs":["https:\/\/www.sumedia-webdesign.de"],"url":"https:\/\/www.sumedia-webdesign.de\/blog\/author\/sven-ullmann\/"}]}},"jetpack_featured_media_url":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-content\/uploads\/2021\/10\/shopping-online-home-concept-cartons-shopping-cart-laptop-keyboard.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-json\/wp\/v2\/posts\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":1,"href":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":152,"href":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-json\/wp\/v2\/posts\/33\/revisions\/152"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-json\/wp\/v2\/media\/151"}],"wp:attachment":[{"href":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sumedia-webdesign.de\/blog\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}