So verwenden Sie das Overlay von checkoutpage.co

Ich möchte das Checkoutpage.co-Overlay so verwenden:

https://checkoutpage.co/knowledge/sell-your-products-in-a-modal-on-your-site/

Auf meiner spezifischen Seite steht, dass ich diesen Code verwenden soll:

<script type="text/javascript" src="https://checkoutpage.co/js/overlay.js" defer></script>

Anschließend füge ich dies hinzu (ich möchte es in einem Topic einfügen):

<button class="cp-button" data-seller="5dd5bbcd1954eb0015e6ff53" data-checkout="rencontre-dans-les-laurentides">Jetzt kaufen</button>

Ist das innerhalb von Discourse möglich?

Danke

Ich bin mir sicher, dass Sie eine Theme-Komponente erstellen müssen, mit der Sie Code zu einem Thema hinzufügen können. Suchen Sie nach “theme howto”.

Ich habe ein wenig daran herumgefummelt und eine Theme-Komponente dafür erstellt, da ich großes Potenzial darin sehe.

Nach der Installation kannst du in Beiträgen so etwas wie Folgendes verwenden, und es wird automatisch in einen Button umgewandelt.

[wrap=checkout data-seller=5aaa701149321a00145c99b9 data-checkout=ux-animation-tool-license]Button-Text[/wrap]

Wenn auf diesen Button geklickt wird, wird das Modal basierend auf den von dir hinzugefügten Informationen wie der Verkäufer-ID und den Checkout-Daten angezeigt.

Ich habe eine Demo dafür im Theme-Creator erstellt.

https://theme-creator.discourse.org/theme/Johani/discourse-checkout

Bei uns scheint alles zu funktionieren, aber ich habe noch nichts gekauft, da ich die Checkout-Seite vorher nicht verwendet habe. Könntest du es ausprobieren, @FrancoisD? Du magst es ja, Dinge zu kaufen/verkaufen, und mir dann Rückmeldung geben?

Sobald wir bestätigt haben, dass alles funktioniert, werde ich dies in die Kategorie „Themes“ verschieben.

Ich habe zudem einige Kommentare im Code hinterlassen, um zu erklären, wie das zusammengesetzt wurde.

Entschuldigung, @Johani, ich war während der Feiertage nicht da!

Es ist perfekt, vielen Dank für deine Zeit.

Hey @Johani, hattest du Zeit, es als Theme zu erstellen? :slightly_smiling_face: