MG2 - 2.3 - INTEGRACIÓN VISUAL

Personalización de los widgets

Cada uno de los métodos de pago de SeQura incluye un widget para informar del servicio en la página de pago.

1. Para colocarlos ir a Content → Widgets 
   
   
   
   
2. Una vez en el apartado Widgets hacer clic en el botón Add Widget, situado en la parte superior derecha.
   
   

En "Compra primero, paga después":

• En "Type" elegir "Invoice teaser" y en "Design Theme" elegir el theme activo de la tienda.
  
  
  
  
• En "Widget Title" poner un título, en "Assign to Store Views" elegir la tienda en el que se mostrará y en "Sort Order" el orden.
  
  
  
  
• En la misma página, pulsar en "Add Layout Update", lo habitual será elegir "All product types" en la opción de "Display on" el Container que se elija no tiene demasiada relevancia.
  
  
  
  
• Pulsar en "Save" para guardar la configuración y poder acceder a "Widget Options".
  
• En "Widget Options" se debe poner en Price CSS Sel. el selector CSS del elemento que contiene el precio. El widget lo usará para compararlo con el rango de precios que se haya establecido en el método de pago para mostrarlo o no.
  En Place CSS Sel. se debe poner el selector CSS del elemento tras el que se añadirá el widget, si se deja vacío el widget quedará en el Container que se haya elegido. Pulsar "Save" para guardar los cambios.
  
  

En "Pago fraccionado":

• En "Type" elegir "Partpayments teaser" y en "Design Theme" elegir el theme activo de la tienda.
  
  
  
  
• En "Widget Title" poner un título, en "Assign to Store Views" elegir la tienda en el que se mostrará y en "Sort Order" el orden.
  
  
  
  
• En la misma página, pulsar en "Add Layout Update", lo habitual será elegir "All product types" en la opción de "Display on" el Container que se elija no tiene demasiada relevancia.
  
  
  
  
• Pulsar en "Save" para guardar la configuración y poder acceder a "Widget Options".
• En "Widget Options" en Price CSS Sel. se debe poner el selector CSS del elemento que contiene el precio, el widget lo usará para calcular las mensualidades correspondientes a ese importe. En Place CSS Sel. se debe poner el selector CSS del elemento tras el que se añadirá el widget, si se deja vacío el widget quedará en el Container que se haya elegido. Pulsar "Save" para guardar los cambios.
  
  
  
  
  
  

En el campo "Theme" se puede elegir entre dos principales visualizaciones del simulador de cuotas (el resto son variantes de estas mismas):

• Text

• Banner

En "Divide en 3":

• En "Type" elegir "Splitpayments teaser" y en "Design Theme" elegir el theme activo de la tienda. En el resto de opciones replicar lo mismo que en Paga fraccionado.

Todos los widgets pueden personalizarse indicando los parámetros en formato .json dentro del campo "Widget's params". En nuestro configurador de widgets se puede escoger el diseño que más se ajuste a la web.

Los parámetros que se pueden configurar son:

• type (text, banner o legacy)

• size (S, M o L)

• font-color (#rrggbb)

• background-color (#rrggbb)

• alignment (left, center o right)

• branding (white, black o default)

• starting-text (only o as-low-as)

• amount-font-size (13, 15, 17)

• amount-font-color (#rrggbb)

• amount-font-bold (true o false)

• link-font-color (#rrggbb)

• link-underline (true o false)

• border-color (#rrggbb)

• no-costs-claim (free o without-cost)

Si se deja el campo "Theme" en blanco, los parámetros que se activarán por defecto son {"type":"text", "size":"M", "alignment":"center", "font-color":"#353735"}.