Individuelle Erweiterungen für Onepage Checkout und Warenkorb [FÜR ENTWICKLER]

Geändert am Fr, 9 Okt um 3:20 NACHMITTAGS

#onepage #checkout #entwickler #erweitern

INHALTSVERZEICHNIS

A. Überblick
B. So funktioniert die Template-Erweiterung
1. Unterstützte Vorlagen und Ablageorte
2. Smarty-Blöcke als Ankerpunkte
3. Bestehenden Inhalt beibehalten oder ersetzen
- Beispiel: Hinweis in der Bestellübersicht ergänzen
- Beispiel: Inhalt im Warenkorb nach den Summen ergänzen
4. Was sich damit anpassen lässt
5. Hinweise für Pflege und Tests

A. Überblick

Das Plugin bietet an ausgewählten Stellen im Checkout und im seitlichen Warenkorb feste Erweiterungspunkte. Darüber können eigene Inhalte ergänzt oder vorhandene Bereiche angepasst werden.

Typische Beispiele sind zusätzliche Hinweise, Vertrauenssiegel, individuelle Produktinformationen oder eine angepasste Darstellung.

B. So funktioniert die Template-Erweiterung

Das Plugin lädt seine Vorlagen aus dem Plugin-Verzeichnis. Für ausgewählte Vorlagen prüft es zusätzlich, ob im aktuell verwendeten Shop-Template eine passende Erweiterungsdatei vorhanden ist. Wenn ja, wird diese Datei verwendet.

Die Erweiterungsdatei erbt von der Plugin-Vorlage.

Darin können einzelne Smarty-Blöcke ergänzt oder ersetzt werden. Der Plugin-Code selbst muss dafür nicht verändert werden. Das hält Anpassungen getrennt von Plugin-Dateien und erleichtert ihre Pflege bei Plugin-Updates.

1. Unterstützte Vorlagen und Ablageorte

Die Erweiterungsdateien gehören in das Verzeichnis des aktiven Shop-Templates. Ersetze <AktivesTemplate> im folgenden Beispiel durch den tatsächlichen Verzeichnisnamen deines aktiven Templates, zum Beispiel NOVA.

Bereich	Plugin-Vorlage	Eigene Erweiterungsdatei
Checkout-Aufbau	`checkout/index.tpl`	`templates/<AktivesTemplate>/checkout/ws5_onepagecheckout/index.tpl`
Kundendatenbereich	`checkout/opc_account_panel.tpl`	`templates/<AktivesTemplate>/checkout/ws5_onepagecheckout/opc_account_panel.tpl`
Adressübersicht	`checkout/opc_address_summary_card.tpl`	`templates/<AktivesTemplate>/checkout/ws5_onepagecheckout/opc_address_summary_card.tpl`
Versand- und Zahlungsbereich	`checkout/opc_shipping_panel.tpl`	`templates/<AktivesTemplate>/checkout/ws5_onepagecheckout/opc_shipping_panel.tpl`
Zusammenfassung von Versand und Zahlung	`checkout/opc_shipping_summary_card.tpl`	`templates/<AktivesTemplate>/checkout/ws5_onepagecheckout/opc_shipping_summary_card.tpl`
Bestellübersicht	`checkout/opc_summary.tpl`	`templates/<AktivesTemplate>/checkout/ws5_onepagecheckout/opc_summary.tpl`
Rahmen der Bestellübersicht	`checkout/opc_summary_panel.tpl`	`templates/<AktivesTemplate>/checkout/ws5_onepagecheckout/opc_summary_panel.tpl`
Bestellabschluss	`checkout/opc_confirmation_actions.tpl`	`templates/<AktivesTemplate>/checkout/ws5_onepagecheckout/opc_confirmation_actions.tpl`
Auswahl von Versand- und Zahlungsart	`checkout/step3_shipping_options.tpl`	`templates/<AktivesTemplate>/checkout/ws5_onepagecheckout/step3_shipping_options.tpl`
Seitlicher Warenkorb	`basket/cart_dropdown.tpl`	`templates/<AktivesTemplate>/basket/ws5_onepagecheckout/cart_dropdown.tpl`

Für ein NOVA-Template lautet der Pfad der Warenkorb-Erweiterung zum Beispiel templates/NOVA/basket/ws5_onepagecheckout/cart_dropdown.tpl.

2. Smarty-Blöcke als Ankerpunkte

Ein Erweiterungspunkt ist ein benannter Smarty-Block. Die Erweiterungsdatei verwendet denselben Blocknamen, um genau an dieser Stelle Inhalt einzufügen oder den vorhandenen Inhalt zu ändern. Die Blocknamen müssen exakt übernommen werden.

Checkout-Aufbau

In checkout/index.tpl stehen diese Anker für Inhalte rund um die zentralen Checkout-Bereiche bereit:

Blockname	Position
`checkout-index-content`	Umfasst den Checkout-Inhalt insgesamt
`ws5-onepagecheckout-layout-before-main`	Vor dem Hauptbereich des Checkouts
`ws5-onepagecheckout-layout-between-account-shipping`	Zwischen Kundendaten und Versand-/Zahlungsbereich
`ws5-onepagecheckout-layout-between-shipping-summary`	Zwischen Versand-/Zahlungsbereich und Bestellübersicht
`ws5-onepagecheckout-layout-before-summary`	Direkt vor der Bestellübersicht
`ws5-onepagecheckout-layout-after-summary`	Direkt nach der Bestellübersicht

Kundendaten und Adressen

In checkout/opc_account_panel.tpl:

ws5-onepagecheckout-account-before und ws5-onepagecheckout-account-after: vor bzw. nach dem Kundendatenbereich.
ws5-onepagecheckout-account-before-form und ws5-onepagecheckout-account-after-form: vor bzw. nach dem Formular zum Bearbeiten von Adressen.
ws5-onepagecheckout-account-before-header und ws5-onepagecheckout-account-after-header: vor bzw. nach der kompakten Überschrift.
ws5-onepagecheckout-account-before-address und ws5-onepagecheckout-account-after-address: vor bzw. nach der Adressübersicht.

In checkout/opc_address_summary_card.tpl:

ws5-onepagecheckout-address-before und ws5-onepagecheckout-address-after: vor bzw. nach der gesamten Adresskarte.
ws5-onepagecheckout-address-before-billing und ws5-onepagecheckout-address-after-billing: rund um die Rechnungsadresse.
ws5-onepagecheckout-address-before-delivery und ws5-onepagecheckout-address-after-delivery: rund um die Lieferadresse.

Versand und Zahlung

In checkout/opc_shipping_panel.tpl:

ws5-onepagecheckout-shipping-before und ws5-onepagecheckout-shipping-after: vor bzw. nach dem gesamten Bereich.
ws5-onepagecheckout-shipping-before-header und ws5-onepagecheckout-shipping-after-header: rund um die Überschrift in der Zusammenfassung.
ws5-onepagecheckout-shipping-before-summary und ws5-onepagecheckout-shipping-after-summary: rund um die Zusammenfassung der gewählten Versand- und Zahlungsart.
ws5-onepagecheckout-shipping-before-options und ws5-onepagecheckout-shipping-after-options: rund um die Auswahl von Versand- und Zahlungsart.

In checkout/opc_shipping_summary_card.tpl gibt es zusätzlich ws5-onepagecheckout-shipping-summary-before und ws5-onepagecheckout-shipping-summary-after für die gesamte Karte. Die Blöcke ws5-onepagecheckout-shipping-summary-before-method, ws5-onepagecheckout-shipping-summary-after-method, ws5-onepagecheckout-shipping-summary-before-payment und ws5-onepagecheckout-shipping-summary-after-payment liegen rund um Versandart und Zahlungsart.

In checkout/step3_shipping_options.tpl befinden sich die Blöcke checkout-step3-shipping-options-heading, checkout-step3-shipping-options-alert und checkout-step3-shipping-options-shipping-type-submit. Sie eignen sich für Anpassungen an Überschrift, Hinweisen und Aktionsbereich der Auswahl.

Bestellübersicht

In checkout/opc_summary_panel.tpl kannst du mit den folgenden Blöcken Inhalte um die Bestellübersicht herum platzieren:

ws5-onepagecheckout-summary-panel-before und ws5-onepagecheckout-summary-panel-after
ws5-onepagecheckout-summary-panel-before-mobile-toggle und ws5-onepagecheckout-summary-panel-after-mobile-toggle

In checkout/opc_summary.tpl stehen diese Anker bereit:

ws5-onepagecheckout-summary-before-coupon, ws5-onepagecheckout-summary-coupon und ws5-onepagecheckout-summary-after-coupon rund um den Couponbereich.
ws5-onepagecheckout-summary-before-comment und ws5-onepagecheckout-summary-after-comment vor bzw. nach dem Kommentarfeld.
ws5-onepagecheckout-summary-before-credit und ws5-onepagecheckout-summary-after-credit rund um den Guthabenbereich.
ws5-onepagecheckout-summary-before-header und ws5-onepagecheckout-summary-after-header rund um die Überschrift.
ws5-onepagecheckout-summary-before-order-items und ws5-onepagecheckout-summary-after-order-items rund um die Bestellpositionen.

Coupon und Kommentar in früheren Checkout-Schritten

Mit dem aktuellen Plugin-Stand können Coupon- und Kommentarfeld auch bereits im Kundendatenbereich sowie bei Versand und Zahlung angezeigt werden.

Die bestehenden Anker in checkout/opc_summary.tpl bleiben gültig und beziehen sich auf die Felder in dieser Vorlage, insbesondere beim Bestellabschluss.

In den früheren Checkout-Schritten werden die Felder zusätzlich in checkout/opc_summary_panel.tpl eingebunden. Dafür gibt es derzeit keine eigenen Smarty-Blöcke. Die ws5-onepagecheckout-summary-panel-*-Anker betreffen den allgemeinen Bereich der Bestellübersicht, nicht gezielt Coupon- oder Kommentarfeld. Die internen Dateien opc_coupon_option.tpl und opc_comment_option.tpl sind keine separat anpassbaren Vorlagen des oben beschriebenen Erweiterungswegs.

Das Element data-ws5_opc_summary-edit-anchor ist eine interne Marke, mit der das Plugin die Felder auf kleineren Bildschirmen verschiebt. Es ist kein Smarty-Block. Eine gezielte Anpassung der Feldstruktur in den früheren Checkout-Schritten erfordert daher eine weitergehende individuelle Entwicklung.

Bestellabschluss

In checkout/opc_confirmation_actions.tpl kannst du Inhalte rund um die abschließenden Hinweise und Aktionen ergänzen:

ws5-onepagecheckout-confirmation-before-legal und ws5-onepagecheckout-confirmation-after-legal
ws5-onepagecheckout-confirmation-before-checkboxes und ws5-onepagecheckout-confirmation-after-checkboxes
ws5-onepagecheckout-confirmation-before-submit und ws5-onepagecheckout-confirmation-after-submit

Diese Bereiche liegen im Formular zum Bestellabschluss. Zusätzliche Inhalte dürfen die Pflichtangaben und den Bestellabschluss nicht beeinträchtigen.

Seitlicher Warenkorb

In basket/cart_dropdown.tpl gruppieren sich die Anker nach Position im Warenkorb:

Gesamter Inhalt: ws5-onepagecheckout-cart-before-content und ws5-onepagecheckout-cart-after-content.
Coupon: ws5-onepagecheckout-cart-before-coupon, basket-cart-dropdown-coupon und ws5-onepagecheckout-cart-after-coupon.
Artikel: ws5-onepagecheckout-cart-before-items, basket-cart-dropdown-cart-items-content, basket-cart-dropdown-cart-items, basket-cart-dropdown-cart-items-table, basket-cart-dropdown-cart-item und ws5-onepagecheckout-cart-after-items.
Einzelner Artikel: ws5-onepagecheckout-cart-item-before und ws5-onepagecheckout-cart-item-after. Für Artikelbild, Artikellink und Preis gibt es außerdem basket-cart-dropdown-cart-item-item-image, basket-cart-dropdown-cart-item-item-link und basket-cart-dropdown-cart-item-item-price.
Summen: ws5-onepagecheckout-cart-before-totals, basket-cart-dropdown-total und ws5-onepagecheckout-cart-after-totals.
Aktionsschaltflächen: ws5-onepagecheckout-cart-before-actions, basket-cart-dropdown-buttons und ws5-onepagecheckout-cart-after-actions.
Leerer Warenkorb: basket-cart-dropdown-hint-empty, ws5-onepagecheckout-cart-empty-before und ws5-onepagecheckout-cart-empty-after.

3. Bestehenden Inhalt beibehalten oder ersetzen

Die Erweiterungsdatei beginnt mit einer Referenz auf die Plugin-Vorlage. Ein Block mit demselben Namen überschreibt anschließend den passenden Block.

Beispiel: Hinweis in der Bestellübersicht ergänzen

Datei: templates/NOVA/checkout/ws5_onepagecheckout/opc_summary.tpl

{extends file='[plugin_ws5_onepagecheckout]checkout/opc_summary.tpl'}

{block name='ws5-onepagecheckout-summary-before-header'}
    <p class="my-checkout-note">Dein persönlicher Hinweistext</p>
    {$smarty.block.parent}
{/block}

Der Hinweis wird an der Stelle des Blocks ausgegeben. $smarty.block.parent fügt zusätzlich den ursprünglichen Blockinhalt ein. Bei einem leeren Ankerblock gibt es meist keinen ursprünglichen Inhalt, den du übernehmen musst.

Beispiel: Inhalt im Warenkorb nach den Summen ergänzen

Datei: templates/NOVA/basket/ws5_onepagecheckout/cart_dropdown.tpl

{extends file='[plugin_ws5_onepagecheckout]basket/cart_dropdown.tpl'}

{block name='ws5-onepagecheckout-cart-after-totals'}
    <p class="my-cart-note">Zusätzlicher Hinweis zum Warenkorb</p>
    {$smarty.block.parent}
{/block}

Wenn du $smarty.block.parent bei einem Block mit bestehendem Inhalt weglässt, wird dieser Inhalt durch deine eigene Ausgabe ersetzt. Prüfe deshalb vorher, ob du ergänzen oder vollständig ersetzen möchtest.

4. Was sich damit anpassen lässt

Über die Anker kannst du zum Beispiel:

eigene Hinweise, Vertrauens- oder Serviceinformationen einfügen;
vorhandene Überschriften, Coupons, Kommentare oder Produktbereiche anders darstellen;
zusätzliche Informationen neben Kundendaten, Versand-/Zahlungsart oder Artikeln anzeigen;
Bereiche ergänzen, ausblenden oder gezielt durch eine eigene Ausgabe ersetzen;
Inhalte im Warenkorb vor oder nach Artikeln, Summen und Schaltflächen ergänzen.

5. Hinweise für Pflege und Tests

Ändere nicht direkt die Originaldateien im Plugin-Verzeichnis. Plugin-Updates können solche Änderungen überschreiben.
Lege die Erweiterungsdatei im Verzeichnis des aktiven Shop-Templates und mit dem passenden Dateinamen ab.
Nutze nur die oben aufgeführten unterstützten Vorlagen für diesen Erweiterungsweg.
Bewahre bei Ergänzungen den ursprünglichen Inhalt mit $smarty.block.parent, sofern er weiterhin gebraucht wird.
Prüfe die Anpassung auf Desktop und Smartphone sowie bei verschiedenen Warenkorb- und Checkout-Situationen.
Teste insbesondere Adressänderung, Versand- und Zahlungsart, Pflicht-Checkboxen, Coupon und verbindlichen Bestellabschluss.
Nach einem Plugin- oder Template-Update solltest du die Erweiterungen erneut prüfen, da sich Vorlagen oder Blocknamen ändern können.

Tags: