@createyourtemplate/shop-module-bonusprogram

Bonusprogramm für den PlentyONE Shop (PWA)

Nuxt-Modul für den PlentyONE Shop. Es zeigt die Inhalte des plentymarkets-Plugins BonusProgram im Shop an: Punktestand, Kampagnen mit Gutschein-Einlösung sowie die erreichbaren Punkte am Artikel und im Warenkorb.

Voraussetzungen

• PlentyONE Shop (plentyshop-pwa) ab v2.16.0
• Node 20 oder neuer
• Plugin BonusProgram ab Version 1.0.32, im Plugin-Set des Mandanten aktiv

Ob das Plugin erreichbar ist, zeigt ein Aufruf im Browser:

https://IHRE-SHOP-DOMAIN/rest/bonus/program/factor-rules

Antwortet die Adresse mit JSON, passt alles. Bei einem 404 ist das Plugin nicht aktiv oder zu alt.

Installation

1. Paket installieren

Im Wurzelverzeichnis des Shop-Repositories:

npm install @createyourtemplate/shop-module-bonusprogram

2. Modul eintragen

In apps/web/nuxt.config.ts das Modul in die Liste modules aufnehmen. Es muss vor @nuxtjs/i18n und @nuxtjs/tailwindcss stehen:

export default defineNuxtConfig({
  modules: [
    // …
    '@createyourtemplate/shop-module-bonusprogram',
    '@nuxtjs/i18n',
    '@nuxtjs/tailwindcss',
    // …
  ],
});

3. Shop neu starten

Dev-Server neu starten bzw. den Shop neu bauen und bereitstellen. Weitere Einstellungen, etwa an der Middleware, sind nicht erforderlich.

Blocks im Editor

Nach dem Neustart stehen vier Blocks im Editor unter „Block hinzufügen“ bereit:

BonusItemPoints zeigt die Punkte für eine Einheit des Artikels, unabhängig von der gewählten Menge.

Punkte im Warenkorb

Der Warenkorb lässt sich nicht über den Editor bestücken. Die Komponente BonusBasketPoints wird deshalb im Code platziert. Sie ist global registriert und zeigt nichts an, solange keine Punkte erreichbar sind.

Variante A: über eine Rendering-Area (empfohlen, übersteht Shop-Updates besser)

Eine Area in apps/web/shop-core.config.ts ergänzen:

export default defineShopCoreConfig({
  renderingAreas: ['checkout.afterBuyButton', 'cart.empty', 'cart.afterTotals'] as const,
});

An der gewünschten Stelle im Template ausgeben:

<ModuleComponentRendering area="cart.afterTotals" />

Und die Komponente einhängen, z. B. in apps/web/app/plugins/bonusprogram.ts:

export default defineNuxtPlugin(() => {
  const { addComponent } = useModuleRendering('cart.afterTotals');
  addComponent('BonusBasketPoints');
});

Variante B: direkt im Template

Kürzer, aber die Änderung liegt in einer Datei, die bei Shop-Updates kollidieren kann:

<!-- apps/web/app/pages/cart.vue, unterhalb der Summe -->
<BonusBasketPoints />

Mit :show-factor-hint="false" lässt sich der Hinweis auf den Punkte-Faktor abschalten.

Aktualisieren

npm update @createyourtemplate/shop-module-bonusprogram

Danach den Shop neu bauen.

Fehlerbehebung

Die Blocks erscheinen nicht im Editor. Prüfen Sie, ob das Modul in der nuxt.config.ts eingetragen ist und der Shop danach neu gestartet bzw. neu gebaut wurde.

Texte erscheinen als Schlüssel (bonusprogram.…) oder die Blocks sind ungestaltet. Das Modul steht in der nuxt.config.ts hinter @nuxtjs/i18n oder @nuxtjs/tailwindcss. Den Eintrag davor verschieben.

Die Blocks bleiben leer. Rufen Sie https://IHRE-SHOP-DOMAIN/rest/bonus/program/factor-rules auf. Bei einem 404 ist das Plugin im Plugin-Set des Mandanten nicht aktiv oder die letzte Bereitstellung des Plugin-Sets ist fehlgeschlagen.

Punktestand und Gutscheine fehlen, die Kampagnen sind aber sichtbar. Diese Angaben sieht nur ein angemeldeter Kunde. Bei Plugin-Versionen vor 1.0.32 bleiben sie auch nach der Anmeldung leer.

Am Artikel steht immer der einfache Punktewert. Ohne Faktor-Regeln gilt überall Faktor 1. Die Regeln werden im plentymarkets-Backend in den Einstellungen des Bonusprogramms gepflegt.