{"id":17752,"date":"2026-08-04T23:05:55","date_gmt":"2026-08-04T17:20:55","guid":{"rendered":"https:\/\/www.bay20.com\/de\/?p=17752"},"modified":"2026-08-04T23:21:42","modified_gmt":"2026-08-04T17:36:42","slug":"wie-erstellt-man-ein-individuelles-drucklayout-fuer-ein-bigcommerce-produkt","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/wie-erstellt-man-ein-individuelles-drucklayout-fuer-ein-bigcommerce-produkt\/","title":{"rendered":"Wie erstellt man ein individuelles Drucklayout f\u00fcr ein BigCommerce-Produkt?"},"content":{"rendered":"\n
Das standardm\u00e4\u00dfige Druckverhalten des Browsers wurde einfach nicht f\u00fcr den E-Commerce konzipiert. Dr\u00fccken Sie auf einer typischen BigCommerce-Produktseite die Tastenkombination Strg+P, und Sie erhalten die Kopfzeile, das Navigationsmen\u00fc, ein Cookie-Banner und eine Fu\u00dfzeile mit einem Newsletter-Anmeldeformular \u2013 alles zusammen mit dem, was eigentlich jeder sehen m\u00f6chte: dem Produkt.<\/p>\n\n\n\n
Wenn Sie etwas m\u00f6chten, das so aussieht, als w\u00e4re es tats\u00e4chlich f\u00fcr den Druck konzipiert worden \u2013 also nur das Bild, den Namen und die Beschreibung, \u00fcbersichtlich angeordnet \u2013, m\u00fcssen Sie das selbst erstellen. Hier ist eine Vorgehensweise, die daf\u00fcr gut funktioniert: Markieren Sie die Elemente, die Sie behalten m\u00f6chten, klonen Sie sie in einen eigenen Container, blenden Sie den Rest der Seite aus, drucken Sie, und setzen Sie anschlie\u00dfend alles wieder ein.<\/p>\n\n\n\n
W\u00e4hle aus, was du willst, nicht was du nicht willst<\/strong><\/h2>\n\n\n\n
Der \u00fcbliche Instinkt ist, Dinge nacheinander auszublenden: die Kopfzeile ausblenden, die Navigation ausblenden, das Newsletter-Popup ausblenden, alles andere ausblenden, was die Seite \u00fcberladen macht. Diese Liste wird mit dem Wachstum der Website immer l\u00e4nger, und man vergisst leicht, sechs Monate sp\u00e4ter etwas Neues hinzuzuf\u00fcgen. Drehe den Spie\u00df stattdessen um. Versehe die Elemente, die du tats\u00e4chlich drucken m\u00f6chtest, mit einer Klasse und erstelle die Druckausgabe daraus.<\/p>\n\n\n\n
Alles, was diese Klasse nicht hat, schafft es nicht auf die gedruckte Seite. Man f\u00fchrt keine Liste mehr mit auszuschlie\u00dfenden Elementen, sondern entscheidet, was dazugeh\u00f6rt, und alles andere f\u00e4llt von selbst weg.<\/p>\n\n\n\n
Kopiere die Elemente, um das Drucklayout von der Live-Seite zu trennen<\/strong><\/h2>\n\n\n\n
Hier liegt der Schl\u00fcssel zur Zuverl\u00e4ssigkeit dieser Methode. Anstatt den Gro\u00dfteil der Seite auszublenden und darauf zu hoffen, dass sich die verbleibenden Teile f\u00fcr den Druck von selbst gut anordnen, werden die markierten Elemente in einen brandneuen Container kopiert, der au\u00dferhalb der normalen Struktur der Seite liegt. Diese Kopie wird gestylt und gedruckt. Die eigentliche Seite darunter bleibt unver\u00e4ndert.<\/p>\n\n\n\n
let $printClone = $('<div class=\"print-clone\"><\/div>');\n$('.custom-print').each(function () {\n $printClone.append($(this).clone());\n});\n\n$('body').append($printClone);<\/code><\/pre>\n\n\n\n
Produktseiten weisen in der Regel eine komplexe Layoutlogik auf, die den Inhalt umgibt \u2013 Raster, \u201esticky\u201c-Elemente und Flexbox-Container, die bis zu drei Ebenen tief gestapelt sind. Der Versuch, diese bestehende Struktur mit @media-print-Regeln in ein Drucklayout zu zw\u00e4ngen, wird meist zu einem aussichtslosen Kampf gegen die Spezifit\u00e4t. Ein separater Container umgeht all das. Es ist eine leere Seite, die Sie ganz nach Ihren Vorstellungen gestalten k\u00f6nnen.<\/p>\n\n\n\n
Den restlichen Seiteninhalt ausblenden<\/strong><\/h2>\n\n\n\n
Der Klon k\u00fcmmert sich darum, was angezeigt wird. Du musst dich jedoch weiterhin um das k\u00fcmmern, was auf der Live-Seite zur\u00fcckbleibt: Kopfzeile, Cookie-Banner, Werbeleiste und dergleichen:<\/p>\n\n\n\n
Halten Sie diese Liste kurz. Da die Druckansicht immer nur die Elemente enth\u00e4lt, die mit \u201ecustom-print\u201c getaggt sind, m\u00fcssen Sie nicht jedes m\u00f6gliche Element auf der Seite aufsp\u00fcren. Das Zur\u00fcckbl\u00e4ttern zum Seitenanfang vor dem Drucken ist wichtiger, als es zun\u00e4chst den Anschein hat. Einige Browser starten den Druckauftrag an der Stelle, an der die Seite gerade gescrollt wurde. Ein Kunde, der bis zur Mitte der Seite gescrollt hat, bevor er auf \u201eDrucken\u201c klickt, erh\u00e4lt daher m\u00f6glicherweise eine Seite, die mitten im Inhalt beginnt.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Das urspr\u00fcngliche Seitenlayout nach dem Drucken anzeigen<\/strong><\/h2>\n\n\n\n
Sobald der Druckauftrag abgeschlossen ist, wird alles wieder r\u00fcckg\u00e4ngig gemacht:<\/p>\n\n\n\n
function cleanupAfterPrint() {\n hiddenSelectors.forEach(sel => $(sel).show());\n window.scrollTo(0, pageYOffsetBeforePrint);\n $('.print-clone').remove();\n}<\/code><\/pre>\n\n\n\n
Binden Sie die Funktion an die Druckereignisse des Browsers, nicht nur an Ihre Schaltfl\u00e4che<\/strong><\/h2>\n\n\n\n
Es ist verlockend, die gesamte Konfigurationslogik direkt in den Klick-Handler der Druck-Schaltfl\u00e4che zu integrieren. Tun Sie das nicht. Kunden k\u00f6nnen den Druckvorgang auch \u00fcber die Tastenkombination oder das Men\u00fc des Browsers ausl\u00f6sen und so Ihre Schaltfl\u00e4che komplett umgehen. Wenn die Konfiguration nur beim Klicken auf die Schaltfl\u00e4che ausgef\u00fchrt wird, w\u00fcrde beim Drucken \u00fcber Strg+P die rohe, unformatierte Seite angezeigt werden.<\/p>\n\n\n\n
Der Browser stellt Ihnen genau f\u00fcr diesen Zweck zwei Ereignisse zur Verf\u00fcgung: \u201ebeforeprint\u201c, unmittelbar bevor sich der Dialog \u00f6ffnet, und \u201eafterprint\u201c, sobald er sich schlie\u00dft.<\/p>\n\n\n\n
$(window).on('beforeprint', prepareForPrint);\n$(window).on('afterprint', cleanupAfterPrint);\n\n$('.print-button').on('click', function () {\n window.print();\n});<\/code><\/pre>\n\n\n\n
Die Schaltfl\u00e4che selbst ist letztendlich fast bedeutungslos. Sie ruft lediglich die native Druckfunktion des Browsers auf. Die eigentliche Einrichtung und das Aufr\u00e4umen erfolgen \u00fcber die Druckereignisse, sodass es funktioniert, egal wie der Druckdialog ausgel\u00f6st wird.<\/p>\n\n\n\n
Die eigentliche Gestaltungsarbeit erfolgt in CSS<\/strong><\/h2>\n\n\n\n
Sobald der Klon vorhanden ist und der Rest der Seite ausgeblendet ist, erfolgt die Gestaltung einfach \u00fcber regul\u00e4res CSS, das auf den Druckbereich beschr\u00e4nkt ist:<\/p>\n\n\n\n
Da Sie einen isolierten Container gestalten, anstatt die bestehenden Regeln der Live-Website zu \u00fcberschreiben, ist dies letztlich wesentlich weniger m\u00fchsam, als zu versuchen, Druckstile in ein Layout zu zw\u00e4ngen, das nie mit Blick auf den Druck erstellt wurde.<\/p>\n\n\n\n
Fazit<\/strong><\/h2>\n\n\n\n
Ehrlich gesagt brauchen die meisten Produktseiten einfach keinen Druckbutton, und viele Shops verzichten g\u00e4nzlich darauf. Aber f\u00fcr diejenigen, bei denen dies doch der Fall ist \u2013 wie beispielsweise bei Beleuchtungskatalogen, technischen Datenbl\u00e4ttern oder allem, was ein Kunde einem Handwerker geben oder an die Wand heften m\u00f6chte \u2013, sagt ein Druckausgabe, die tats\u00e4chlich professionell gestaltet aussieht, viel \u00fcber den Shop aus. Es ist zwar nur eine kleine Funktion, aber genau diese Art von Detail unterscheidet einen sorgf\u00e4ltig aufgebauten Shop von einem, der nur schnell zusammengew\u00fcrfelt wurde.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/Screenshot-2026-07-22-175421-980x460.png\")
<\/figure>\n\n\n\n