Mostrar precios de grupos de clientes con Clerk.io

Un ejemplo de cómo mostrar precios individuales a diferentes clientes.

La configuración de los precios de los grupos de clientes consta de 2 pasos:

  1. Ejecuta una sincronización completa entre Clerk.io y BigCommerce.

  2. Proporcionar un contexto de precios al mostrar el contenido en la página.

1. Ejecutar una sincronización completa

Cuando se ejecuta una sincronización completa entre Clerk.io y BigCommerce, Clerk.io almacenará los precios de los diferentes grupos de clientes y las reglas de precios que están activas para la tienda.

Estas reglas se almacenarán por separado para cada producto y se utilizarán cuando se muestre el producto en el sitio web. Estas reglas sólo se actualizarán cuando se ejecute una sincronización completa.

2. Proporcionar un contexto de precios

Al mostrar el producto en el sitio web, es necesario proporcionar un contexto de precio a Clerk.io. Esto se puede hacer proporcionando el ID de grupo de clientes del cliente actual o proporcionando su dirección de correo electrónico o ID de cliente.

El contexto del precio puede ser proporcionado en los atributos html para el anchortag del propio contenido, o puede ser proporcionado como parte de la llamada Clerk(‘config’, …).

A continuación se muestran algunos ejemplos de cómo se vería este código si se proporcionara en la propia etiqueta de anclaje.

<span
  class="clerk"
  data-template="@content-1"
  data-price_context='{"customer":{"email": "support@clerk.io"}}'
></span>

<span
  class="clerk"
  data-template="@content-2"
  data-price_context='{"customer":{"id": 12345}}'
></span>

<span
  class="clerk"
  data-template="@content-3"
  data-price_context='{"qualifiers":{"customer_group_id": 0}}'
></span>

He aquí un ejemplo de cómo se vería si se proporcionara como parte de la llamada Clerk(‘config’, …).

Clerk('config', {
  price_context: {
    customer: {
      email: "support@clerk.io"
    }
  }
})

El enfoque anterior puede combinarse con otros valores predeterminados que se establecen al cargar la página.

Clerk('config', {
  key: 'YOUR_PUBLIC_KEY',
  language: 'english',
  price_context: {
    customer: {
      email: "support@clerk.io"
    }
  }
})

Para inyectar dinámicamente este contenido, debe utilizar las variables disponibles en su tema stencil, en lugar de codificar la entrada a una dirección de correo electrónico o ID de usuario determinados.

Puede encontrar cómo imprimir las distintas variables de cliente en el tema a continuación: Objeto Cliente BigCommerce

He aquí un ejemplo de cómo podría utilizar el objeto de cliente en su tema para establecer dinámicamente el contexto de precio.

<span
  class="clerk"
  data-template="@content-1"
  data-price_context='{"customer":{"email": "{{ customer.email }}"} }'
></span>