How to Display Customer-Specific Prices

Clerk verwendet einen einzigen Produktkatalog für alle Besucher. Das bedeutet, dass standardmäßig jeder Besucher die gleichen price- und list_price-Werte sieht, die aus Ihrem Shop synchronisiert wurden.

Viele B2B- und mitgliedschaftsbasierte Shops müssen je nach angemeldetem Benutzer unterschiedliche Preise anzeigen. Clerk unterstützt dies durch zwei Ansätze, und die richtige Wahl hängt davon ab, wie Ihre Preisgestaltung funktioniert.

Wann welcher Ansatz verwendet werden sollte #

Beide Ansätze funktionieren in Search, Recommendations und Email auf jeder Plattform.

Individuelle Preise #

Verwenden Sie diesen Ansatz, wenn jeder Kunde völlig individuelle Preise hat, die nicht vorab in den Produktdaten gespeichert werden können, z. B. ausgehandelte B2B-Verträge.

Die Idee ist einfach: Clerk rendert zuerst die Produkte und ersetzt dann den Platzhalterpreis durch den echten Preis, der von Ihrem Server abgerufen wird.

Dafür ist ein serverseitiger Endpunkt in Ihrem Webshop erforderlich, der einen Preis zurückgeben kann, wenn eine Produkt-ID und eine Kunden-ID angegeben werden. Die Implementierung dieses Endpunkts ist spezifisch für Ihre Plattform und muss von einem Entwickler erstellt werden.

Platzhalter im Design #

Fügen Sie zunächst ein Platzhalter-Element in Ihr Design ein, an dem der Preis erscheinen soll:

<div class="clerk-price-container">
  <span class="clerk-price">
    Preis wird geladen...
  </span>
</div>

Der Text „Preis wird geladen…“ wird kurz angezeigt, während der echte Preis abgerufen wird.

Ersetzen durch den echten Preis #

Nachdem Clerk die Produkte gerendert hat, verwenden Sie ein Clerk.js Event, um die Produkte zu durchlaufen, Ihren Server aufzurufen und den Platzhalter durch den tatsächlichen Preis zu ersetzen.

<script>
  var customer_id = INSERT_CUSTOMER_ID;
  Clerk("on", "rendered", function(content, data) {
    for (var i = 0; i < data.product_data.length; i++) {
      var product = data.product_data[i];
      var custom_price = FETCH_PRICE_FROM_SERVER(product.id, customer_id);
      var price_container = document.querySelector(
        "[data-clerk-product-id='" + product.id + "'] .clerk-price"
      );
      price_container.innerText = custom_price;
    }
  });
</script>

Ersetzen Sie INSERT_CUSTOMER_ID durch die Logik Ihrer Plattform, um die ID des eingeloggten Kunden zu bekommen.

Ersetzen Sie FETCH_PRICE_FROM_SERVER durch eine tatsächliche Funktion, die Ihren Backend-Endpunkt aufruft und den Preis zurückgibt. Dies ist typischerweise ein AJAX-/fetch-Aufruf zu einem von Ihnen erstellten Endpunkt.

data-clerk-product-id ist ein Attribut, das Clerk.js jedem gerenderten Produkt automatisch hinzufügt, sodass Sie das richtige Element ansprechen können.

So funktioniert es #

1. Clerk gibt Produkte von der API zurück und rendert sie mit dem Platzhaltertext.

2. Das rendered-Event wird ausgelöst, nachdem das HTML im DOM ist.

3. Ihr Skript durchläuft jedes Produkt, ruft Ihren Preis-Endpunkt auf und ersetzt den Platzhalter durch den echten Preis.

Da die Preise clientseitig nach dem Rendern geladen werden, kann der Platzhalter kurz sichtbar sein. Halten Sie den Platzhaltertext kurz und neutral.

Gruppenpreise #

Verwenden Sie diesen Ansatz, wenn Sie eine begrenzte Anzahl von Kundengruppen mit jeweils identischen Preisen haben, z. B. „Einzelhandel“, „Großhandel“ und „VIP“.

Anstatt die Preise zur Laufzeit abzurufen, geben Sie alle Gruppenpreise direkt in den Produktdaten an. Ein Formatter wählt dann anhand der aktuellen Kundengruppe den richtigen Preis aus.

Dies ist der empfohlene Ansatz, da die Preise sofort angezeigt werden und keine Ladezeit oder zusätzlichen Serveraufrufe erforderlich sind.

1. Preise in die Daten aufnehmen #

Fügen Sie in Ihrem Data Feed ein Attribut mit den Preisen für jede Kundengruppe als JSON-Objekt zu Ihren Produkten hinzu:

{
  "id": 1,
  "name": "Lightsaber (Green)",
  "price": 199.99,
  "customer_group_prices": {
    "retail": 199.99,
    "wholesale": 149.99,
    "vip": 129.99
  }
}

Die Schlüssel in customer_group_prices müssen mit den Gruppenkennungen übereinstimmen, die Sie im nächsten Schritt verwenden möchten.

2. Die Kundengruppe setzen #

Fügen Sie Ihrer Clerk.js-Konfiguration eine globale Variable hinzu, die die Gruppe des aktuellen Kunden enthält. Dieser Wert sollte dynamisch mit der Logik Ihrer Plattform gesetzt werden:

Clerk('config', {
  globals: {
    customer_group: "wholesale"
  }
});

Ersetzen Sie "wholesale" durch Ihre Logik, die die Gruppen-ID des aktuellen Kunden ausgibt. Für Besucher, die nicht eingeloggt sind, können Sie eine Standardgruppe wie "retail" verwenden.

3. Einen Formatter erstellen #

Fügen Sie einen Formatter hinzu, der den Preis für die aktuelle Gruppe auswählt. Dies kann in derselben Clerk.js-Konfiguration passieren:

Clerk('config', {
  globals: {
    customer_group: "wholesale"
  },
  formatters: {
    getPrice: function(prices, customer_group) {
      return prices[customer_group];
    }
  }
});

Der getPrice-Formatter erhält das customer_group_prices-Objekt und die globale Variable customer_group und gibt den entsprechenden Preis zurück.

4. Im Design verwenden #

Verweisen Sie im Design auf den Formatter, um den korrekten Preis anzuzeigen:

<a href="{{ product.url }}">
  <img src="{{ product.image }}" />
  <div class="clerk-product-name">{{ product.name }}</div>
  <div class="clerk-product-price">
    {{ product.customer_group_prices | getPrice customer_group }}
  </div>
</a>

Das Design ruft getPrice mit dem Preisobjekt des Produkts und der globalen Variable customer_group auf und gibt das Ergebnis aus.

Plattform-Beispiele #

Die oben genannten Ansätze funktionieren plattformunabhängig gleich. Lediglich die Art und Weise, wie Sie den eingeloggten Kunden und dessen Gruppe identifizieren, ist unterschiedlich.

Nachfolgend einige Beispiele für gängige Plattformen.

Shopify #

Clerk('config', {
  globals: {
    customer_group: {{ customer.tags | json }}[0] || "default"
  }
});

Shopify hat keine integrierten Kundengruppen, aber Kundentags werden häufig als Ersatz verwendet. Passen Sie die Logik an die Gruppenzuordnung Ihres Shops an.

PrestaShop #

Clerk('config', {
  globals: {
    customer_group: "{$customer->id_default_group}"
  }
});

PrestaShop stellt die Standard-Gruppen-ID des Kunden über Smarty-Variablen im Theme bereit.

WooCommerce #

Clerk('config', {
  globals: {
    customer_group: "<?php echo wp_get_current_user()->roles[0] ?? 'guest'; ?>"
  }
});

WooCommerce verwendet WordPress-Rollen. Falls Sie ein Membership-Plugin verwenden, passen Sie dies an, um die relevante Gruppenkennung auszugeben.

Magento 2 #

Clerk('config', {
  globals: {
    customer_group: "<?php echo $block->getCustomerGroupId(); ?>"
  }
});

Magento stellt die Kundengruppen-ID nativ bereit. Stellen Sie sicher, dass die Gruppen-IDs mit den Schlüsseln in Ihren customer_group_prices-Daten übereinstimmen.