Wie erstellt man ein individuelles Drucklayout für ein BigCommerce-Produkt?

BigCommerce

Das standardmäßige Druckverhalten des Browsers wurde einfach nicht für den E-Commerce konzipiert. Drücken Sie auf einer typischen BigCommerce-Produktseite die Tastenkombination Strg+P, und Sie erhalten die Kopfzeile, das Navigationsmenü, ein Cookie-Banner und eine Fußzeile mit einem Newsletter-Anmeldeformular – alles zusammen mit dem, was eigentlich jeder sehen möchte: dem Produkt.

Wenn Sie etwas möchten, das so aussieht, als wäre es tatsächlich für den Druck konzipiert worden – also nur das Bild, den Namen und die Beschreibung, übersichtlich angeordnet –, müssen Sie das selbst erstellen. Hier ist eine Vorgehensweise, die dafür gut funktioniert: Markieren Sie die Elemente, die Sie behalten möchten, klonen Sie sie in einen eigenen Container, blenden Sie den Rest der Seite aus, drucken Sie, und setzen Sie anschließend alles wieder ein.

Wähle aus, was du willst, nicht was du nicht willst

Der übliche Instinkt ist, Dinge nacheinander auszublenden: die Kopfzeile ausblenden, die Navigation ausblenden, das Newsletter-Popup ausblenden, alles andere ausblenden, was die Seite überladen macht. Diese Liste wird mit dem Wachstum der Website immer länger, und man vergisst leicht, sechs Monate später etwas Neues hinzuzufügen. Drehe den Spieß stattdessen um. Versehe die Elemente, die du tatsächlich drucken möchtest, mit einer Klasse und erstelle die Druckausgabe daraus.

<figure class="custom-print">
  <img src="product-image.jpg" alt="Product" />
</figure>
<div class="custom-print">
  <h1>Product Name</h1>
  <p>Product description goes here.</p>
</div>

Alles, was diese Klasse nicht hat, schafft es nicht auf die gedruckte Seite. Man führt keine Liste mehr mit auszuschließenden Elementen, sondern entscheidet, was dazugehört, und alles andere fällt von selbst weg.

Kopiere die Elemente, um das Drucklayout von der Live-Seite zu trennen

Hier liegt der Schlüssel zur Zuverlässigkeit dieser Methode. Anstatt den Großteil der Seite auszublenden und darauf zu hoffen, dass sich die verbleibenden Teile für den Druck von selbst gut anordnen, werden die markierten Elemente in einen brandneuen Container kopiert, der außerhalb der normalen Struktur der Seite liegt. Diese Kopie wird gestylt und gedruckt. Die eigentliche Seite darunter bleibt unverändert.

let $printClone = $('<div class="print-clone"></div>');
$('.custom-print').each(function () {
    $printClone.append($(this).clone());
});

$('body').append($printClone);

Produktseiten weisen in der Regel eine komplexe Layoutlogik auf, die den Inhalt umgibt – Raster, „sticky“-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ängen, wird meist zu einem aussichtslosen Kampf gegen die Spezifität. Ein separater Container umgeht all das. Es ist eine leere Seite, die Sie ganz nach Ihren Vorstellungen gestalten können.

Den restlichen Seiteninhalt ausblenden

Der Klon kümmert sich darum, was angezeigt wird. Du musst dich jedoch weiterhin um das kümmern, was auf der Live-Seite zurückbleibt: Kopfzeile, Cookie-Banner, Werbeleiste und dergleichen:

let hiddenSelectors = ['.body', '#consent-manager-update-banner', '.nanobar', 'header'];

hiddenSelectors.forEach(sel => $(sel).hide());
pageYOffsetBeforePrint = window.scrollY;
window.scrollTo(0, 0);

Halten Sie diese Liste kurz. Da die Druckansicht immer nur die Elemente enthält, die mit „custom-print“ getaggt sind, müssen Sie nicht jedes mögliche Element auf der Seite aufspüren. Das Zurückblättern zum Seitenanfang vor dem Drucken ist wichtiger, als es zunächst 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 „Drucken“ klickt, erhält daher möglicherweise eine Seite, die mitten im Inhalt beginnt.

Das ursprüngliche Seitenlayout nach dem Drucken anzeigen

Sobald der Druckauftrag abgeschlossen ist, wird alles wieder rückgängig gemacht:

function cleanupAfterPrint() {
    hiddenSelectors.forEach(sel => $(sel).show());
    window.scrollTo(0, pageYOffsetBeforePrint);
    $('.print-clone').remove();
}

Binden Sie die Funktion an die Druckereignisse des Browsers, nicht nur an Ihre Schaltfläche

Es ist verlockend, die gesamte Konfigurationslogik direkt in den Klick-Handler der Druck-Schaltfläche zu integrieren. Tun Sie das nicht. Kunden können den Druckvorgang auch über die Tastenkombination oder das Menü des Browsers auslösen und so Ihre Schaltfläche komplett umgehen. Wenn die Konfiguration nur beim Klicken auf die Schaltfläche ausgeführt wird, würde beim Drucken über Strg+P die rohe, unformatierte Seite angezeigt werden.

Der Browser stellt Ihnen genau für diesen Zweck zwei Ereignisse zur Verfügung: „beforeprint“, unmittelbar bevor sich der Dialog öffnet, und „afterprint“, sobald er sich schließt.

$(window).on('beforeprint', prepareForPrint);
$(window).on('afterprint', cleanupAfterPrint);

$('.print-button').on('click', function () {
    window.print();
});

Die Schaltfläche selbst ist letztendlich fast bedeutungslos. Sie ruft lediglich die native Druckfunktion des Browsers auf. Die eigentliche Einrichtung und das Aufräumen erfolgen über die Druckereignisse, sodass es funktioniert, egal wie der Druckdialog ausgelöst wird.

Die eigentliche Gestaltungsarbeit erfolgt in CSS

Sobald der Klon vorhanden ist und der Rest der Seite ausgeblendet ist, erfolgt die Gestaltung einfach über reguläres CSS, das auf den Druckbereich beschränkt ist:

@media print {
  .print-clone {
    display: block;
  }

  .print-clone figure.custom-print {
    text-align: center;
    margin-bottom: 20px;
  }
}

Da Sie einen isolierten Container gestalten, anstatt die bestehenden Regeln der Live-Website zu überschreiben, ist dies letztlich wesentlich weniger mühsam, als zu versuchen, Druckstile in ein Layout zu zwängen, das nie mit Blick auf den Druck erstellt wurde.

Fazit

Ehrlich gesagt brauchen die meisten Produktseiten einfach keinen Druckbutton, und viele Shops verzichten gänzlich darauf. Aber für diejenigen, bei denen dies doch der Fall ist – wie beispielsweise bei Beleuchtungskatalogen, technischen Datenblättern oder allem, was ein Kunde einem Handwerker geben oder an die Wand heften möchte –, sagt ein Druckausgabe, die tatsächlich professionell gestaltet aussieht, viel über den Shop aus. Es ist zwar nur eine kleine Funktion, aber genau diese Art von Detail unterscheidet einen sorgfältig aufgebauten Shop von einem, der nur schnell zusammengewürfelt wurde.

Bitte kontaktieren Sie uns unter wargis@bay20.com/manish@bay20.com oder rufen Sie uns unter +91-9582784309 oder +91-8800519180 an, wenn Sie Unterstützung im Zusammenhang mit Bigcommerce benötigen. Sie können auch unsere Website besuchen, um sich über unsere Dienstleistungen zu informieren.