Stratos Widget

Creado para mostrar campañas

Demo

Descripción

El Stratos Widget se creo para facilitar la interacción con las campañas de ALD Automotive.

Puede ser introducido en cualquier sitio como un Web Component, pasandole propiedades para customizarlo. Dependiendo del identificador del partner, el Stratos Widget devuelves las campañas relacionadas a través del API de ALD Automotive, permite ver el detalle de cada campaña y abrir una aplicación para la contratación de dicha campaña.

Cada partner tiene su "theme" que le proporciona los estilos de diseño (color, tipo de fuente) al widget, además se puede modificar su comportamiento, sus estilos, la forma de presentar la información (si queremos las campañas en linea o en columnas), adicionarle un texto de cabecera, entre otras características.

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="fake-123456789"
        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="fake-123456789"
    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 = 'fake-123456789';
  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 Código proporcionado por ALD Automotive para validar si el cliente puede utilizar el widget.
partner-id Number 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 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}