How to Display Customer-Specific Prices

Clerk utiliza un único catálogo de productos para todos los visitantes. Esto significa que, por defecto, cada visitante ve los mismos valores de price y list_price sincronizados desde tu tienda.

Muchas tiendas B2B y basadas en membresía necesitan mostrar diferentes precios dependiendo de quién haya iniciado sesión. Clerk admite esto a través de dos enfoques, y la elección correcta depende de cómo funciona tu sistema de precios.

Cuándo usar cada uno #

Ambos enfoques funcionan con Search, Recommendations y Email, en cualquier plataforma.

Precios individuales #

Usa este enfoque cuando cada cliente tiene precios completamente únicos que no pueden almacenarse previamente en los datos del producto, por ejemplo, contratos B2B negociados.

La idea es simple: permite que Clerk muestre los productos primero, luego reemplaza el precio temporal con el precio real obtenido de tu servidor.

Esto requiere un endpoint del lado del servidor en tu tienda online que pueda devolver un precio al proporcionarse un ID de producto y un ID de cliente. La implementación de ese endpoint es específica de tu plataforma y debe ser creada por un desarrollador.

Marcador de posición en el diseño #

Comienza agregando un elemento de marcador de posición en tu Design donde aparecerá el precio:

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

El texto “Loading price…” se muestra brevemente mientras se obtiene el precio real.

Reemplazo por el precio real #

Después de que Clerk renderiza los productos, usa un Clerk.js Event para recorrer los productos, llamar a tu servidor y reemplazar el marcador de posición con el precio real.

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

Reemplaza INSERT_CUSTOMER_ID con tu lógica de plataforma para obtener el ID del cliente con sesión iniciada.

Reemplaza FETCH_PRICE_FROM_SERVER con una función real que llame a tu backend y devuelva el precio. Esto normalmente es una llamada AJAX/fetch a un endpoint que crees.

data-clerk-product-id es un atributo que Clerk.js añade automáticamente a cada producto renderizado, así puedes apuntar al elemento correcto.

Cómo funciona #

1. Clerk devuelve productos desde la API y los muestra con el texto temporal.

2. El evento rendered se dispara después de que el HTML esté en el DOM.

3. Tu script recorre cada producto, llama a tu endpoint de precios y reemplaza el marcador de posición por el precio real.

Debido a que los precios se obtienen del lado del cliente después de renderizar, puede haber un breve momento donde el marcador de posición sea visible. Mantén el texto del marcador de posición breve y neutral.

Precios por grupo #

Usa este enfoque cuando tengas un número limitado de grupos de clientes que comparten el mismo precio, por ejemplo “Retail”, “Wholesale” y “VIP”.

En vez de obtener precios en tiempo real, incluyes todos los precios de grupo directamente en los datos del producto. Un Formatter luego selecciona el precio adecuado en función del grupo del cliente con sesión iniciada.

Este es el enfoque recomendado siempre que sea posible, porque los precios se muestran al instante, sin estado de carga y sin llamadas extra al servidor.

1. Incluye los precios en los datos #

Agrega un atributo a tus productos en el Data Feed que contenga un precio para cada grupo de clientes, como un objeto JSON:

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

Las claves en customer_group_prices deben coincidir con los identificadores de grupo que usarás en el siguiente paso.

2. Configura el grupo del cliente #

Agrega una variable global a la configuración de Clerk.js que contenga el grupo actual del cliente. Este valor debe establecerse dinámicamente usando la lógica de tu plataforma:

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

Reemplaza "wholesale" con la lógica de tu plataforma para mostrar el ID de grupo del cliente actual. Para los visitantes que no hayan iniciado sesión, puedes usar un grupo predeterminado como "retail".

3. Crea un formatter #

Agrega un Formatter que busque el precio para el grupo actual. Esto puede agregarse en la misma configuración de Clerk.js:

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

El formatter getPrice recibe el objeto customer_group_prices y la variable global customer_group, y devuelve el precio correspondiente.

4. Uso en el diseño #

Referencia el formatter en tu Design para mostrar el precio correcto:

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

El Design llama a getPrice con el objeto de precios del producto y la variable global customer_group, y muestra el resultado.

Ejemplos de plataforma #

Los enfoques anteriores funcionan igual sin importar la plataforma. La única parte que cambia es cómo identificas al cliente con sesión iniciada y su grupo.

A continuación hay ejemplos para las plataformas más comunes.

Shopify #

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

Shopify no tiene grupos de clientes incorporados, pero las etiquetas de clientes suelen usarse como sustituto. Ajusta la lógica para coincidir con la manera en que tu tienda identifica los grupos.

PrestaShop #

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

PrestaShop proporciona el ID de grupo predeterminado del cliente mediante variables de Smarty en el tema.

WooCommerce #

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

WooCommerce utiliza los roles de WordPress. Si usas un plugin de membresía, adapta esto para mostrar el identificador de grupo relevante.

Magento 2 #

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

Magento proporciona el ID de grupo del cliente de forma nativa. Asegúrate de que los IDs de grupo coincidan con las claves en los datos de tu customer_group_prices.