Das Tag einbinden

Öffnen

Diese Seite zeigt, wie Sie das Script-Tag von punchout.dev in Ihren Shop einbauen und was Sie außerdem einstellen müssen, damit Browser und punchout.dev es akzeptieren.

Das Tag

Das Portal zeigt das Tag im Tab Einbindung des Shops unter Script-Tag. Es sieht so aus:

<script async src="https://js.punchout.dev/pob.js" data-shop-id="pob_live_…"></script>

Teil	Bedeutung
`src`	Das Script, ausgeliefert von `js.punchout.dev`. Der Tab Einbindung zeigt es als Snippet-URL.
`async`	Das Script hält das Rendern der Seite nie auf.
`data-shop-id`	Ihre Shop-ID, `pob_live_` plus 22 Zeichen. Sie ist öffentlich: Sie benennt den Shop und berechtigt zu nichts.

Ohne data-shop-id bleibt das Tag wirkungslos.

Binden Sie das Tag auf jeder Seite des Shops ein, am besten im Layout-Template vor </body>. Ein Punchout landet auf Ihrer Landing-Seite, und der Einkäufer klickt sich von dort zum Warenkorb. Auf jeder Seite dieses Wegs muss das Tag vorhanden sein.

Wo das Tag hingehört

Die drei Shop-Plugins geben das Tag selbst aus. Ist ein Plugin installiert, fügen Sie das Tag nicht zusätzlich ein, sonst steht es auf jeder Seite zweimal. Der Tab Einbindung bietet den Plugin-Download und die Installationsschritte an, wenn unter Allgemein → Shopsystem Shopware, WooCommerce oder Magento eingestellt ist.

Ohne Plugin hängt die richtige Stelle von Ihrem Theme ab. Die folgenden Hinweise beschreiben, wo Shops auf der Plattform das Tag üblicherweise einfügen. punchout.dev hat sie nicht für Ihr Theme geprüft.

Shopware

Laden Sie im Tab Einbindung das Plugin herunter und laden Sie es in Shopware unter Erweiterungen hoch.
Aktivieren Sie es und tragen Sie in seiner Konfiguration die Shop-ID und die Snippet-URL ein.

Das Plugin markiert außerdem den Warenkorb für die Warenkorb-Erkennung und übernimmt den Auto-Login, siehe Shopware 6. Ohne Plugin setzen Shops das Tag meist in den Footer des Storefront-Themes oder binden es über einen Tag-Manager ein.

WooCommerce

Laden Sie im Tab Einbindung das Plugin herunter. Öffnen Sie in WordPress Plugins, fügen Sie mit Plugin hochladen ein neues Plugin hinzu und aktivieren Sie es.
Tragen Sie unter WooCommerce → punchout.dev die Shop-ID, die Snippet-URL und die Public-Key-Zeilen ein.

Mehr dazu unter WooCommerce. Ohne Plugin steht das Tag häufig in der footer.php des Themes oder in einem Script-Feld, das manche Themes im Customizer anbieten.

Magento

Laden Sie im Tab Einbindung das Modul herunter und entpacken Sie es nach app/code. Das Archiv enthält bereits PunchoutDev/Bridge.
Führen Sie die folgenden Befehle aus und tragen Sie danach unter Stores → Configuration → punchout.dev die Shop-ID, die Snippet-URL und die Public-Key-Zeilen ein.

bin/magento module:enable PunchoutDev_Bridge
bin/magento setup:upgrade
bin/magento cache:flush

Mehr zum Modul unter Magento 2. Ohne Modul setzen Shops das Tag meist in die Footer-Scripts der Design-Konfiguration unter Content → Design → Configuration.

Jeder andere Shop

Kopieren Sie das Tag in das Layout-Template des Shops oder binden Sie es über einen Tag-Manager ein. Bei Shopify gehört es üblicherweise in die theme.liquid des Themes (Onlineshop → Themes → Code bearbeiten). Lassen Sie danach punchout.dev Ihren Warenkorb per Setup-Link finden (Warenkorb-Erkennung), oder markieren Sie ihn selbst, indem Sie dem Element mit den Positionen das Attribut data-punchout-cart geben. Wollen Sie mehr als das Tag einbauen, etwa einen Auto-Login, lesen Sie Eigene Integration.

Erlaubte Origins

punchout.dev arbeitet nur auf den Origins, die für den Shop eingetragen sind. Die Liste pflegen Sie im Tab Allgemein unter Erlaubte Origins.

Regel	Detail
Format	`https://shop.example`: Schema, Host und Port, kein Pfad, keine Query
Abgleich	Exakt. `https://www.shop.example` und `https://shop.example` sind zwei Origins. Tragen Sie beide ein, wenn beide den Shop ausliefern
Anzahl	1 bis 5 Origins
Im Produktivbetrieb	`https` und ein öffentlicher Hostname
Erster Eintrag	Dort landen Punchout-Launches und Setup-Links

Auf einer Seite, deren Origin nicht eingetragen ist, läuft kein Punchout, und das Tag bleibt still.

Warenkorb-URL-Muster

Unter Tab Allgemein → Erweiterte Einstellungen → Warenkorb-URL-Muster tragen Sie bis zu 10 reguläre Ausdrücke ein, etwa ^/checkout/cart. punchout.dev vergleicht sie mit Pfad und Query der Seite und unterscheidet dabei nicht zwischen Groß- und Kleinschreibung.

Die Muster wirken nur, solange der Shop weder den Plugin-Marker noch einen Container-Selector hat (Warenkorb-Erkennung). Dann legen sie fest, auf welchen Seiten das Panel den Warenkorb liest:

Mit Mustern gelten nur Seiten als Warenkorb, deren Adresse auf eines davon passt.
Ohne Muster erkennt das Panel Warenkorbseiten selbst, an den üblichen Warenkorb-Adressen und am Inhalt der Seite.

Ihre Muster bestimmen auch, welche Seiten für die Warnung „Der Warenkorb wird nicht mehr gefunden“ im Tab Nutzung als Warenkorbseiten zählen. Sobald der Warenkorb markiert oder erkannt ist, schränken die Muster nicht mehr ein, wo der Warenkorb gelesen wird.

Content-Security-Policy

Sendet Ihr Shop einen Content-Security-Policy-Header, muss dieser vier Quellen freigeben. Sonst blockiert der Browser das Panel oder die Übergabe. Der Tab Einbindung zeigt die vier Zeilen für Ihren Shop unter Content-Security-Policy:

script-src https://js.punchout.dev
connect-src https://api.punchout.dev
style-src 'unsafe-inline'
form-action https://procurement.customer.example:*

Direktive	Warum
`script-src`	Das Panel lädt von `js.punchout.dev`.
`connect-src`	Das Panel kommuniziert mit `api.punchout.dev`.
`style-src 'unsafe-inline'`	Die Styles des Panels sind inline.
`form-action`	Der Warenkorb wird von der Shopseite aus an das Einkaufssystem übergeben. Eine strenge `form-action`-Regel blockiert das ohne sichtbare Fehlermeldung.

Das Portal bildet die Zeile form-action aus Tab Allgemein → Erlaubte Rücksprung-Hosts, mit einer Quelle https://<host>:* je Host. Der Port ist offen (:*), weil punchout.dev nur Hostnamen vergleicht und SAP-Systeme oft auf anderen Ports als 443 antworten. Solange Erlaubte Rücksprung-Hosts leer ist, zeigt das Portal den Platzhalter https://buyer-system.example. Ersetzen Sie ihn durch die Hosts der Einkaufssysteme Ihrer Kunden.

Ergänzen Sie diese Quellen in den Direktiven, die Ihre Policy schon hat. Ersetzen Sie Ihre Policy nicht durch diese Zeilen.

Prüfen, ob das Tag läuft

Ein gewöhnlicher Seitenaufruf zeigt nichts, weil das Tag ohne Punchout oder Setup-Link still bleibt. Zuverlässig prüfen Sie es mit dem nächsten Schritt: Erzeugen Sie einen Setup-Link und lassen Sie Ihren Warenkorb erkennen (Warenkorb-Erkennung). Eine erfolgreiche Erkennung beweist, dass das Tag auf Ihrer Warenkorbseite läuft.

Der Checklisten-Schritt Snippet eingebunden im Tab Einrichtung wird nach der ersten erfolgreichen Warenkorb-Erkennung per Setup-Link oder nach dem ersten Punchout-Launch des Shops grün. Ein gehosteter Launch per OCI, cXML oder IDS Connect zählt ebenfalls und erreicht punchout.dev, bevor sich Ihr Shop öffnet. Ein grüner Schritt allein beweist deshalb nicht, dass das Tag installiert ist. Prüfen am Schritt lädt ihn neu, und der Tab Warenkorb zeigt den Zeitpunkt unter Snippet zuerst gesehen.

Was das Tag bei einem normalen Besuch tut

Nichts. Ohne Punchout oder Setup-Link zeigt das Tag kein Panel und sendet nichts über das Netz.

Aktiv wird es nur in zwei Fällen:

Ein Punchout. Ein Einkaufssystem hat den Shop aufgerufen. Das Tag zeigt das Panel, liest den Warenkorb, sobald der Einkäufer die Warenkorbseite öffnet, und übergibt ihn auf Klick des Einkäufers. Ein Punchout dauert höchstens vier Stunden.
Setup-Modus. Sie haben einen Setup-Link geöffnet. Siehe Warenkorb-Erkennung.

Für den Datenschutz gilt:

Das Tag liest keine Cookies des Shops.
Es sendet nichts ohne laufenden Punchout oder Setup-Link.
Es setzt nie ein Geheimnis in eine URL und entfernt die Launch-Parameter aus der Adressleiste.
Es übergibt den Warenkorb nur an eine http- oder https-Adresse.

Mehr unter Sicherheit und Datenschutz.

/impressum /datenschutz /agb

punchout.dev · hello@punchout.dev