How to Display Customer-Specific Prices

Clerk bruger et enkelt produktkatalog for alle besøgende. Dette betyder, at som standard ser hver besøgende de samme price og list_price værdier synkroniseret fra din butik.

Mange B2B- og medlemskabsbaserede butikker har behov for at vise forskellige priser afhængigt af, hvem der er logget ind. Clerk understøtter dette gennem to tilgange, og det rigtige valg afhænger af, hvordan din prissætning fungerer.

Hvornår skal du bruge hvad #

Begge tilgange fungerer på tværs af Search, Recommendations og Email, på alle platforme.

Individuelle priser #

Brug denne tilgang, når hver kunde har helt unikke priser, som ikke kan lagres på forhånd i produktdataene, for eksempel forhandlede B2B-kontrakter.

Idéen er simpel: lad Clerk vise produkterne først og erstat derefter den midlertidige pris med den reelle pris hentet fra din server.

Dette kræver et server-side-endpoint på din webshop, der kan returnere en pris, når den får et produkt-ID og et kunde-ID. Implementeringen af dette endpoint er specifik for din platform og skal laves af en udvikler.

Design-placeholder #

Start med at tilføje et placeholder-element i dit Design, hvor prisen skal vises:

<div class="clerk-price-container">
  <span class="clerk-price">
    Indlæser pris...
  </span>
</div>

Teksten “Indlæser pris…” vises kortvarigt, mens den reelle pris hentes.

Erstat med reel pris #

Når Clerk har vist produkterne, brug et Clerk.js Event til at loope gennem produkterne, kalde din server og erstatte placeholderen med den faktiske pris.

<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>

Erstat INSERT_CUSTOMER_ID med din platforms logik til at finde den indloggede kundes ID.

Erstat FETCH_PRICE_FROM_SERVER med en reel funktion, der henter prisen fra dit backend. Dette er typisk et AJAX/fetch-kald til et endpoint, du selv bygger.

data-clerk-product-id er et attribut, som Clerk.js automatisk tilføjer til hvert vist produkt, så du kan ramme det rigtige element.

Sådan fungerer det #

1. Clerk returnerer produkter fra API’et og viser dem med placeholder-teksten.

2. rendered-eventet affyres, når HTML’en er i DOM’en.

3. Dit script looper gennem hvert produkt, kalder dit pris-endpoint og erstatter placeholderen med den reelle pris.

Da priserne hentes på klientsiden efter rendering, kan der være et kort øjeblik, hvor placeholderen er synlig. Hold placeholder-teksten kort og neutral.

Gruppepriser #

Brug denne tilgang, når du har et begrænset antal kundegrupper, som hver deler samme prissætning, f.eks. “Retail”, “Wholesale” og “VIP”.

I stedet for at hente priser under visning, inkluderer du alle gruppepriser direkte i produktdataene. En Formatter vælger så den rette pris baseret på den indloggede kundes gruppe.

Dette er den anbefalede metode, når det er muligt, da priser vises øjeblikkeligt uden loading-tilstand og uden ekstra serverkald.

1. Inkluder priser i dataene #

Tilføj et attribut til dine produkter i Data Feed, der indeholder en pris for hver kundegruppe som et JSON-objekt:

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

Nøglerne i customer_group_prices skal matche de gruppeidentifikatorer, du vil bruge i næste trin.

2. Angiv kundegruppen #

Tilføj en global variabel til din Clerk.js-konfiguration, der indeholder den nuværende kundes gruppe. Denne værdi skal sættes dynamisk via din platforms logik:

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

Erstat "wholesale" med din platforms logik til at udskrive den aktuelle kundes gruppe-ID. For besøgende, der ikke er logget ind, kan du falde tilbage til en standardgruppe som "retail".

3. Opret en formatter #

Tilføj en Formatter, der finder prisen for den aktuelle gruppe. Dette kan tilføjes i samme Clerk.js-konfiguration:

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

Formatteren getPrice modtager customer_group_prices-objektet og den globale customer_group, og returnerer så den tilsvarende pris.

4. Brug i Design #

Reference formatteren i dit Design for at vise den korrekte pris:

<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>

Designet kalder getPrice med produktets pris-objekt og den globale customer_group-variabel, og viser resultatet.

Plattforms-eksempler #

Tilgangene ovenfor fungerer på samme måde uanset platform. Den eneste forskel er, hvordan du identificerer den indloggede kunde og deres gruppe.

Herunder er eksempler for almindelige platforme.

Shopify #

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

Shopify har ikke indbyggede kundegrupper, men kundetags bruges ofte som erstatning. Tilpas logikken, så den matcher, hvordan din butik identificerer grupper.

PrestaShop #

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

PrestaShop giver mulighed for at hente kundens standardgruppe-ID via Smarty-variabler i temaet.

WooCommerce #

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

WooCommerce bruger WordPress-roller. Hvis du bruger et medlemskabsplugin, kan du tilpasse dette til at returnere den relevante gruppeidentifikator.

Magento 2 #

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

Magento giver kundens gruppe-ID direkte. Sørg for, at gruppe-ID’erne matcher nøglerne i dine customer_group_prices-data.