MG - 2.3 - INTEGRACIÓN VISUAL

Owned by Sergio Calatrava Albacete
Last updated: Jul 26, 2022
2 min read

Importante

Existen diversas formas de personalizar este plugin sin necesidad de modificarlo. Evitar hacer cambios al plugin que se entrega facilitará en un futuro realizar cualquier actualización del mismo.

Personalización de estilos CSS

Desde el CSS de la plantilla se pueden aplicar reglas CSS adicionales a los elementos que añade el módulo de SeQura si fuese necesario.


Personalización de las plantilla .phtml

El en directorio app/design/frontend/base/default/templates/sequrapayment se encuentran las plantillas que usan el módulo, tanto para el proceso de checkout como para los bloques de información que se pueden incluir en la página de detalle del producto.

Solo es necesario cambiar estas plantillas en caso de que se quiera modificar el formato html en si. Cuando el cambio que se busca no sea posible hacerlo mediante reglas en el CSS es necesario copiar el .phtml que interese desde 

app/design/frontend/base/default/templates/sequrapayment/XX/XXXX.phtml

a 

app/design/frontend/PAQUETE/PLANTILLA/templates/sequrapayment/XX/XXXX.phtml

y hacer los cambios en esta copia.


Proceso de Checkout

  1. /app/design/frontend/base/default/template/sequrapayment/form/info.phtml : El contenido mostrado en la selección de método de pago, para la opción de "Compra ahora, paga después".
  2. /app/design/frontend/base/default/template/sequrapayment/form/part_payment.phtml : El contenido mostrado en la selección de método de pago, para la opción "Pago fraccionado".
  3. /app/design/frontend/base/default/template/sequrapayment/form/identification.phtml : El contenido de la página que solicita los datos adicionales que sean necesarios para aceptar el pago


Añadir Banners de producto

El plugin provee la capacidad de insertar banners promocionales del método en cada uno de las páginas de producto. Por defecto, estos banners están ocultos. Para utilizarlos habría que añadirlos al .phtml que se use para generar la página de detalle del producto, normalmente app/design/frontend/PAQUETE/PLNATILLA/templates/catalog/product/view.phtml alguna de las líneas:


Banner de Compra ahora, paga después
<?php echo $this->getChildHtml('product.info.teaser');?>

o bien

Banner de Pago fraccionado
<?php echo $this->getChildHtml('product.info.partpaymentteaser');?>

Los phtml a personalizar en estos casos serían: app/design/frontend/base/default/template/sequrapayment/info/teaser.phtml en el primer caso de "Compra ahora, paga después"

y 

en el segundo caso app/design/frontend/base/default/template/sequrapayment/info/partpayment_teaser.phtml si queremos mostrar el banner de "Pago fraccionado".

Personalización de los widgets

En Sistema → Configuración → Ventas → Métodos de pago se puede definir la posición en la que se van a pintar mediante "CSS selector". El diseño se puede escoger mediante "Widget's params",  de cada modalidad de pago, introduciendo uno de los themes predefinidos: "text", "banner" o "legacy": 

  • Text

  • Banner

Estos 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 "Widget's params" en blanco, los parámetros que se activarán por defecto son {"type":"text", "size":"M", "alignment":"center", "font-color":"#353735"}.


Material visual (sliders, logos y textos):

Si se quiere crear un banner o slider personalizado, se pueden utilizar las imágenes contenidas en Marketing toolkit. Dichas imágenes están tanto en formato PNG como en SVG para que puedan ser editadas y adaptadas al estilo de cada página.

En ese mismo enlace se pueden encontrar también un tutorial de los elementos visuales disponibles de nuestros métodos de pago.



Paso anterior | Paso siguiente