How to Display Customer-Specific Prices

Clerk utilizza un unico catalogo prodotti per tutti i visitatori. Questo significa che, per impostazione predefinita, ogni visitatore vede gli stessi valori di price e list_price sincronizzati dal tuo store.

Molti negozi B2B e basati su abbonamento devono mostrare prezzi diversi a seconda di chi è loggato. Clerk supporta questa esigenza tramite due approcci, e la scelta giusta dipende da come funziona la tua struttura prezzi.

Quando usare quale #

Entrambi gli approcci funzionano su Search, Recommendations ed Email, su qualsiasi piattaforma.

Prezzi individuali #

Usa questo approccio quando ogni cliente ha prezzi completamente unici che non possono essere pre-memorizzati nei dati del prodotto, ad esempio contratti B2B negoziati.

L’idea è semplice: lascia che Clerk mostri i prodotti per primo, poi sostituisci il prezzo segnaposto con il prezzo reale recuperato dal tuo server.

Questo richiede un endpoint server-side sul tuo webshop che possa restituire un prezzo dato un product ID e un customer ID. L’implementazione di quell’endpoint è specifica per la tua piattaforma e deve essere sviluppata da un programmatore.

Segnaposto grafico #

Inizia aggiungendo un elemento segnaposto nel tuo Design dove apparirà il prezzo:

<div class="clerk-price-container">
  <span class="clerk-price">
    Caricamento prezzo...
  </span>
</div>

Il testo “Caricamento prezzo…” viene mostrato brevemente mentre il prezzo reale viene recuperato.

Sostituzione con prezzo reale #

Dopo che Clerk visualizza i prodotti, usa un Clerk.js Event per scorrere i prodotti, chiamare il tuo server, e sostituire il segnaposto con il prezzo effettivo.

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

Sostituisci INSERT_CUSTOMER_ID con la logica della tua piattaforma per ottenere l’ID del cliente loggato.

Sostituisci FETCH_PRICE_FROM_SERVER con una funzione reale che chiama il tuo backend e restituisce il prezzo. In genere si tratta di una chiamata AJAX/fetch verso un endpoint che costruisci tu.

data-clerk-product-id è un attributo aggiunto automaticamente da Clerk.js a ogni prodotto renderizzato, così puoi individuare l’elemento giusto.

Come funziona #

1. Clerk restituisce i prodotti tramite l’API e li visualizza con il testo segnaposto.

2. L’evento rendered viene lanciato dopo che l’HTML è nel DOM.

3. Il tuo script scorre ciascun prodotto, chiama l’endpoint dei prezzi e sostituisce il segnaposto con il prezzo reale.

Poiché i prezzi vengono recuperati lato client dopo il rendering, potrebbe esserci un breve intervallo in cui è visibile il segnaposto. Mantieni il testo del segnaposto breve e neutro.

Prezzi di gruppo #

Usa questo approccio quando hai un numero limitato di gruppi di clienti che condividono ciascuno lo stesso prezzo, ad esempio “Retail”, “Wholesale” e “VIP”.

Invece di recuperare i prezzi al momento del rendering, includi tutti i prezzi dei gruppi direttamente nei dati del prodotto. Un Formatter sceglierà poi il prezzo giusto in base al gruppo del cliente loggato.

Questo è l’approccio consigliato quando possibile, poiché i prezzi vengono mostrati istantaneamente senza stato di caricamento né chiamate extra al server.

1. Includi i prezzi nei dati #

Aggiungi un attributo ai tuoi prodotti nel Data Feed che contenga un prezzo per ciascun gruppo clienti, come oggetto JSON:

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

Le chiavi in customer_group_prices devono corrispondere agli identificatori di gruppo che userai nel prossimo passaggio.

2. Imposta il gruppo cliente #

Aggiungi una variabile globale alla configurazione di Clerk.js che memorizzi il gruppo dell’attuale cliente. Questo valore deve essere impostato dinamicamente tramite la logica della tua piattaforma:

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

Sostituisci "wholesale" con la logica della tua piattaforma per mostrare l’ID del gruppo attuale. Per i visitatori non loggati puoi ripiegare su un gruppo predefinito come "retail".

3. Crea un formatter #

Aggiungi un Formatter che recuperi il prezzo per il gruppo attuale. Puoi aggiungerlo nella stessa configurazione di Clerk.js:

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

Il formatter getPrice riceve l’oggetto customer_group_prices e il globale customer_group, poi restituisce il prezzo corrispondente.

4. Usalo nel Design #

Richiama il formatter nel tuo Design per mostrare il prezzo corretto:

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

Il Design chiama getPrice passando l’oggetto dei prezzi del prodotto e la variabile globale customer_group, e visualizza il risultato.

Esempi per piattaforma #

Gli approcci sopra funzionano allo stesso modo su qualsiasi piattaforma. L’unica parte che cambia è come identifichi il cliente loggato e il suo gruppo.

Qui sotto trovi degli esempi per le piattaforme più comuni.

Shopify #

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

Shopify non prevede gruppi clienti integrati, ma spesso vengono usati i tag clienti come alternativa. Adatta la logica a come il tuo shop identifica i gruppi.

PrestaShop #

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

PrestaShop fornisce l’ID del gruppo predefinito del cliente tramite variabili Smarty nel tema.

WooCommerce #

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

WooCommerce usa i ruoli di WordPress. Se utilizzi un plugin membership, adatta questo codice per restituire l’identificatore di gruppo rilevante.

Magento 2 #

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

Magento fornisce nativamente l’ID del gruppo cliente. Assicurati che gli ID dei gruppi corrispondano alle chiavi nei dati customer_group_prices.