ALD Automotive | Stratos Widget

Guía de desarrollo

Para crear un ejemplo del Stratos Widget puede crear un fichero .html con el siguiente código y abrirlo en el browser.

            
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8" />
      <title>Stratos Widget</title>

      <link href="https://widgets.aldautomotive.es/static/css/ald-widget-1.0.0.min.css" rel="stylesheet">
    </head>
    <body>
      <noscript>
        <strong>
          We're sorry but Stratos Widget doesn't work properly without JavaScript
          enabled. Please enable it to continue.
        </strong>
      </noscript>

      <ald-widget
        client-token="c2ee3643-e07e-4024-a20b-e01607368629"
        partner-id="57559"
        card-button-text="Consulta condiciones"
        buttons-without-border
        buttons-without-border-radius
        show-card-button-icon
        inline
      />

      <script src="https://widgets.aldautomotive.es/static/js/ald-widget-1.0.0.min.js"></script>
    </body>
  </html>

Guía paso a paso

1 - Adicionar los estilos del widget, incluyendo la siguiente linea dentro de la sección <head> del HTML.

              
  <link href="https://widgets.aldautomotive.es/static/css/ald-widget-1.0.0.min.css" rel="stylesheet">

2 - El archivo de script del widget debe estar vinculado en su página. Agregue la siguiente línea en algún lugar de la sección <body> de su archivo HTML.

                
  <script src="https://widgets.aldautomotive.es/static/js/ald-widget-1.0.0.min.js"></script>

3 - Ahora puede adicionar el widget, agregando el elemento <ald-widget/> con los parámetros client-token y partner-id proporcionados por ALD Automotive y que son obligatorios, dentro de la sección <body> de su archivo HTML. Puede customizar el widget adicionando alguno de los elementos que aparecen en la lista de parámetros.

                  
  <ald-widget client-token="ALD-CLIENT-TOKEN" partner-id="ALD-PARTNER-ID"/>

Parámetros

Los parámetros al widget se le pueden pasar de dos maneras, como se muestra en los siguientes ejemplos:

                  
  // La primera es directamente en el elemento ald-widget en el HTML
  <ald-widget
    client-token="c2ee3643-e07e-4024-a20b-e01607368629"
    partner-id="57559"
    header-text="Ejemplo de widget"
    card-button-text="Consulta condiciones"
    theme="ald-orange"
    number-columns="4"
    buttons-without-border
    buttons-without-border-radius
    show-card-button-icon
    inline
  />

                  
  // La segunda con JavaScript, convirtiendo los parámetros en formato camelCase
  const aldWidget = document.querySelector('ald-widget');

  // Establecer valor del parámetro
  aldWidget.clientToken = 'c2ee3643-e07e-4024-a20b-e01607368629';
  aldWidget.partnerId = 57559;
  aldWidget.headerText = 'Ejemplo de widget';
  aldWidget.cardButtonText = 'Consulta condiciones';

  // Leer valor del parámetro
  console.info('[parámetro][client-token]', aldWidget.clientToken);
  console.info('[parámetro][partner-id]', aldWidget.partnerId);
  console.info('[parámetro][header-text]', aldWidget.headerText);
  console.info('[parámetro][card-button-text]', aldWidget.cardButtonText);

Veamos la lista de todos los parámetros disponibles:

Parámetro	Tipo	Defecto	Obligatorio	Descripción
client-token	String		Sí	Código proporcionado por ALD Automotive para validar si el cliente puede utilizar el widget.
partner-id	Number		Sí	Identificador del Partner proporcionado por ALD Automotive, el widget muestra las campañas asociadas a dicho identificador.
parameters-contract-url	String		No	Parámetros extras que se pasan a la url de contratación B2C en formato query string. Ejemplo para pasar docNum (Número de documento) y polNum (Número de póliza) como parámetros en la contratación, los valores pueden ser en base64: docNum=MTExMTExMTFI&polNum=NDE4ODE1Mw==
header-text	String		No	Texto que aparece en la cabecera del widget. Si no existe, no se muestra nada.
theme	String		No	Estilo (color, tipo de fuente) asociado al widget. Si este parámetro tiene valor entonces el valor del 'theme' que devuelve el API se sobrescribe y siempre se utiliza el parámetro del widget. Preguntar al equipo de ALD Automotive los posibles valores. Algunos ejemplos de posibles valores: 'ald-orange' o 'ald-azulynegro'
closed-detail	Boolean	false	No	Si el parámetro existe entonces el detalle de la campaña aparece colapsado sino expandido.
inline	Boolean	false	No	Si el parámetro existe entonces todas las campañas del widget se muestran en una única linea.
number-columns	Number	3	No	Número de campañas que se mostraran en cada linea. Si el parámetro inline existe, entonces el número de columnas no surte efecto.
buttons-without-border	Boolean	false	No	Si el parámetro existe entonces los botones se muestran sin bordes.
buttons-without-border-radius	Boolean	false	No	Si el parámetro existe entonces los botones se muestran sin las esquinas redondeadas.
card-button-text	String	'Ver coche'	No	Texto del botón de la tarjeta de la lista de campañas.
back-button-text	String	'Volver'	No	Texto del botón secundario para la acción de volver en el detalle de la campaña.
contract-button-text	String	'Contratar'	No	Texto del botón primario para la acción de contratar en el detalle de la campaña.
show-card-button-icon	Boolean	false	No	Si el parámetro existe se muestran el icon (double angle right) en el botón de la tarjeta de la lista de campañas.
show-back-button-icon	Boolean	false	No	Si el parámetro existe se muestran el icon (double angle left) en el botón secundario para la acción de volver en el detalle de la campaña.
show-contract-button-icon	Boolean	false	No	Si el parámetro existe se muestran el icon (double angle right) en el botón primario para la acción de contratar en el detalle de la campaña.
buttons-size	String	'normal'	No	Tamaño de la fuente de los botones, los valores permitidos son: 'small', 'medium', 'normal', 'large' Los tamaños por tipo son: small=10px, medium=12px normal=14px, large=18px
card-buttons-align	String	'center'	No	Alineación horizontal del botón de la tarjeta de la lista de campañas, los valores permitidos son: 'left', 'center', 'right'.
detail-buttons-align	String	'center'	No	Alineación horizontal de los botones del detalle de la campaña, los valores permitidos son: 'left', 'center', 'right'.
show-collapse-and-expand-detail-button	Boolean	false	No	Si el parámetro existe se muestran el botón que permite expandir o colapsar el detalle de la campaña.
show-break-line-detail	Boolean	false	No	Si el parámetro existe se muestran la linea de separación del detalle de la campaña.
cards-without-border	Boolean	false	No	Si el parámetro existe se muestran las tarjetas de la lista de campañas sin bordes.
cards-with-border-radius	Boolean	false	No	Si el parámetro existe se muestran las tarjetas con las esquinas redondeadas.

Eventos

El Stratos Widget tiene eventos útiles que puedes escuchar. Los eventos se pueden escuchar de la siguiente manera:

                  
  const aldWidget = document.querySelector('ald-widget');
  // Listening to element's event
  aldWidget.addEventListener('nombre-evento', function(event) {
    console.info('[evento][nombre-evento]', event.detail[0]);
  });

Puede abrir en el browser la herramienta de desarrollo y en la consola observar como funcionan los eventos del widget que aparece en la sección Demo.

Veamos la lista de eventos disponibles:

Nombre del evento Descripción

click-selected-campaign

Nombre del evento	Descripción
click-selected-campaign	Este evento se dispara cuando un cliente hace click en una campaña botón Ver coche y pasa al detalle. El evento devuelve un objeto con un campo del tipo lista llamado detail donde debemos seleccionar el primer elemento de la lista, que incluye el identificador de la campaña seleccionada, marca y modelo del vehículo. `// Ejemplo de respuesta {campaignId: 27499122, make: 'AUDI', model: 'A3'}`
click-detail-campaign	Este evento se dispara si el cliente, una vez en el detalle de la campaña pulsa alguno de los botones que mostramos Contratar o Volver. El evento devuelve un objeto con un campo del tipo lista llamado detail donde debemos seleccionar el primer elemento de la lista, que incluye el identificador de la campaña y el tipo de botón en el cual se realizo el click, los posibles valores de type son contract o back. `// Ejemplo de respuesta {type: 'back', campaignId: 27499122} // Otro ejemplo de respuesta {type: 'contract', campaignId: 27499122}`

Este evento se dispara cuando un cliente hace click en una campaña botón Ver coche y pasa al detalle. El evento devuelve un objeto con un campo del tipo lista llamado detail donde debemos seleccionar el primer elemento de la lista, que incluye el identificador de la campaña seleccionada, marca y modelo del vehículo.

                          
  // Ejemplo de respuesta
  {campaignId: 27499122, make: 'AUDI', model: 'A3'}

click-detail-campaign

Este evento se dispara si el cliente, una vez en el detalle de la campaña pulsa alguno de los botones que mostramos Contratar o Volver. El evento devuelve un objeto con un campo del tipo lista llamado detail donde debemos seleccionar el primer elemento de la lista, que incluye el identificador de la campaña y el tipo de botón en el cual se realizo el click, los posibles valores de type son contract o back.

                          
  // Ejemplo de respuesta
  {type: 'back', campaignId: 27499122}
  // Otro ejemplo de respuesta
  {type: 'contract', campaignId: 27499122}