Personaliza el orden en que se muestran los métodos de pago en tu checkout y configura el nombre con que se muestra VentiPay en tu checkout para mostrar las alternativas que ofrece a tus clientes.
La configuración tiene 2 partes. Ambas son esenciales para que quede correctamente configurado.
Parte 1: Instructivo VTEX
Ingresa a la cuenta de Administrador de VTEX de tu tienda.
Abre este instructivo de VTEX y sigue los pasos descritos.
Luego vuelve a este instructivo y continúa con la Parte 2.
Parte 2: Configura el código
Ingresa a la cuenta de Administrador de VTEX de tu tienda.
Entra a la sección Settings > Storefront > Checkout.
Haz click en el botón azul de Settings.
Haz click en "Code" en la barra superior.
Selecciona el archivo checkout6-custom.js para modificarlo.
Agrega el siguiente código:
El código a continuación dejará por default a VentiPay como primera opción de pago en tu checkout. Si quieres cambiarlo de posición debes editar la segunda línea del código, donde dice POSITION = 0.
// eslint-disable-next-line func-names (function () { /** * Config (you CAN modify this) */ const POSITION = 0; // 0-index (0 is the first position) const LABEL = 'VentiPay | Cuotas con Débito'; const CHECK_MAX_CYCLES = 15; // It's 1 check per second /** * Setup (you SHOULD NOT modify this) */ let CHECK_CYCLES_COUNT = 0; /** * Functions */ const updatePaymentMethodsList = function () { if (typeof POSITION === 'number' && POSITION >= 0) { // Making sure the wanted position is a valid one const containerElement = document.querySelector('.payment-group-list-btn'); // Get the list container const paymentElements = document.querySelectorAll('.payment-group-list-btn > a'); // Get all the payment methods from the list if (containerElement && paymentElements && paymentElements.length > 0) { // Making sure the payment methods list is a valid one let foundIndex; // We'll set the index of the VentiPay button, if found on the list let foundElement; paymentElements.forEach((paymentElement, paymentElementIndex) => { // We cycle the list looking for VentiPay's button if ((paymentElement.getAttribute('data-name') || '').toString().toLowerCase() === 'ventipay') { // Found it! foundIndex = paymentElementIndex; foundElement = paymentElement; } }); if (foundIndex >= 0) { // If we found the button const orderedPayments = Array.from(paymentElements); // Convert the NodeList into an array so we can work it orderedPayments.splice(foundIndex, 1); // Remove VentiPay from the list orderedPayments.splice(POSITION, 0, foundElement); // Add VentiPay in the desired position containerElement.innerHTML = ''; // Clear the container's HTML orderedPayments.forEach((orderedPayment) => { containerElement.appendChild(orderedPayment); // Adds the elements back to the container }); } } } const ventiPayElement = document.querySelector('.payment-group-list-btn > a[data-name="Ventipay"]'); if (ventiPayElement) { const ventiPayTextElement = ventiPayElement.querySelector('span.payment-group-item-text'); if (ventiPayTextElement) { ventiPayTextElement.innerHTML = LABEL; } } }; const isThePaymentMethodsListReady = function () { const paymentElements = document.querySelectorAll('.payment-group-list-btn > a'); return (paymentElements && paymentElements.length > 0); }; const CHECK_INTERVAL = setInterval(() => { if ((CHECK_CYCLES_COUNT > CHECK_MAX_CYCLES)) { clearInterval(CHECK_INTERVAL); return; } if (isThePaymentMethodsListReady()) { clearInterval(CHECK_INTERVAL); updatePaymentMethodsList(); return; } CHECK_CYCLES_COUNT += 1; }, 1000); }());Haz click en “Save”.
¡Y listo! Ya reordenaste tu checkout y editaste el nombre de VentiPay.