En este tutorial vamos a agregar en la tienda la visualización de la funcionalidad de múltiples pagos personalizados, que permite diferenciar diferentes formas de pago como “Depósito Bancario”, “Transferencia”, “A convenir / Efectivo” y “Pix” con descuentos independientes.
En caso que no tengas los componentes de "popup" (CSS, JS, HTML), te recomendamos que directamente hagas el tutorial que explica como implementar el popup de medios de pago (en lugar de sólo actualizarlo)
HTML
1. Lo primero que vamos a hacer es llamar al componente de medios de pago que trae las últimas actualizaciones.
Donde tengamos nuestro código de medios de pagos viejo o desactualizado vamos a agregar el componente para el detalle de pagos con el siguiente código.
{{ component('payments/payments-details',
{
text_classes: {
text_accent: "label label-accent ml-1",
subtitles: "mb-3",
text_big: "font-big",
text_small: "font-small",
align_right: "text-right"
},
spacing_classes: {
top_1x: "mt-1",
top_2x: "mt-2",
top_3x: "mt-3",
right_1x: "mr-1",
right_2x: "mr-2",
right_3x: "mr-3",
bottom_1x: "mb-1",
bottom_2x: "mb-2",
bottom_3x: "mb-3",
left_3x: "ml-3",
},
container_classes : {
payment_method: "card p-3"
}
})
}}Los parámetros que acepta el componente de payments-details son principalmente clases para CSS
Clases de textos:
- text_classes.text_accent: Usado para las partes de acento como los descuentos
- text_classes.subtitles: Usado para los subtítulos dentro del popup
- text_classes.text_big: Usado para los textos grandes que siguen siendo más chicos que un título
- text_classes.text_small: Usado para textos pequeños
Clases de espaciado:
- spacing_classes.top_1x: Usado para los márgenes hacia arriba en 1x
- spacing_classes.right_1x: Usado para los márgenes a la derecha en 1x
- spacing_classes.right_2x: Usado para los márgenes a la derecha en 2x
- spacing_classes.right_3x: Usado para los márgenes a la derecha en 3x
- spacing_classes.bottom_1x: Usado para los márgenes hacia abajo en 1x
- spacing_classes.bottom_2x: Usado para los márgenes hacia abajo en 2x
- spacing_classes.bottom_3x: Usado para los márgenes hacia abajo en 3x
- spacing_classes.left_3x: Usado para los márgenes a la izquierda en 3x
Este componente ya trae dentro la información de todos los medios de pago y sus descuentos
Activación
Una vez aplicados todos los cambios en tu código, vas a poder activar la funcionalidad para que tus clientes puedan ver los nuevos medios de pago personalizados ingresando al siguiente link, reemplazando donde dice “tutienda.mitiendanube.com” por la URL de tu tienda:
https://tutienda.mitiendanube.com/admin/themes/?activate-new-payments-info=true
Recordá que tenés que estar logueado en el Administrador Nube para realizar la activación.