Configurar template en el SmartCheckout

Configuración de Checkout

5 min de lectura

El portal es usado para renderizar las pantallas de Checkout (carrito, datos personales, dirección, forma de pago) y OrderPlaced (Pantalla de confirmación de compra). En este artículo se presentará cómo registrar y configurar los recursos del Portal.

El módulo Checkout en Admin, muestra los sitios que están registrados para su cuenta. A través de él, también es posible crear un nuevo sitio, editar y configurar información sobre sitios existentes.

Cada sitio registrado corresponde a un multidominio (si la cuenta tiene multidominios contratados). Para cuentas que no utilizan multidominios, no es necesario registrar más de un sitio en este módulo. Obtenga más información en Crear multitienda/multidominio.

Crear un nuevo sitio web

En el Admin VTEX, accede a Configuración de la tienda > Storefront > Checkout, o escribe Checkout en la barra de búsqueda en la parte superior de la página.
Haga clic en el botón Nuevo sitio.
Rellene los siguientes campos:

Nombre: ingrese aquí el nombre deseado para el sitio.
Tienda: complete con el nombre de la cuenta, que se puede encontrar en Configuraciones de la Cuenta > Gestión de la Cuenta > Cuentas > Nombre de la Cuenta.

Haga clic en Guardar.

Creación del nuevo sitio web:

${"base64":" ","img":{"width":892,"height":1242,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":76463,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_1.png"}}$

Acceso a Nombre de cuenta:

${"base64":" ","img":{"width":1197,"height":1221,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":105917,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_2.png"}}$

Editar y configurar sitio

En el Admin VTEX, accede a Configuración de la tienda > Storefront > Checkout, o escribe Checkout en la barra de búsqueda en la parte superior de la página.
Haga clic en el icono del sitio deseado.
Al acceder al menú de opciones azul ubicado en la parte superior de la página, puede realizar las siguientes acciones:
- Sitios: volver a la pantalla de inicio de los sitios registrados.
- Editar: edite el "Nombre" y la "Tienda".
- Checkout: realizar configuraciones básicas, como Cálculo de envío, Google Tag Manager, entre otras.
- Pedidos: configurar los motivos de cancelación y sustitución del pedido.
- Código: mostrar y crear templates relacionadas con el sitio.
- Páginas: mostrar páginas existentes para el sitio.

Ejemplo de sitios existentes en la misma cuenta:

${"base64":" ","img":{"width":970,"height":504,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":38362,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_3.png"}}$

Si desea eliminar un sitio web, haga clic en el botón Eliminar del sitio web deseado, como en el siguiente ejemplo:

${"base64":" ","img":{"width":1052,"height":384,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":28688,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_4.png"}}$

Si desea eliminar una página existente, haga clic en el botón indicado en la imagen de abajo:

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAJUlEQVR4nAEaAOX/AJOTk7e5uWRWVwAKFwDIyMhMTEygn5/x8vObzQ0FLoMe/gAAAABJRU5ErkJggg==","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_5.png","width":345,"height":148,"type":"png"}}$

A continuación, pasaremos a la configuración paso a paso de las opciones del menú: Código y Checkout - pues configuran las páginas de Checkout y Order Placed.

Configurar Checkout

En el Admin VTEX, accede a Configuración de la tienda > Storefront > Checkout, o escribe Checkout en la barra de búsqueda en la parte superior de la página.
Haga clic en el icono del sitio deseado.
En el menú de opciones azul ubicado en la parte superior de la página, haga clic en Checkout y configure los campos a continuación según sea necesario:

Título del sitio web: si se informa, se mostrará en el título del carrito, el pago y las páginas de pedido confirmado.
Google Tag Manager: ingrese el ID (en formato GTM-XXXX) de su contenedor Google Tag Manager, si quieres usarlo automáticamente.
Google Maps API Key: la tecla se utiliza en dos situaciones: cuando la función de Entrega basada en coordenadas geográficas está activa o si la opción de Recogida en tienda está disponible.
Cálculo de las Opciones de Entrega (Beta y Stable): seleccione si el cálculo del flete se hará desde la hoja de cálculo o por geolocalización.

${"base64":" ","img":{"width":944,"height":1261,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":66908,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_6.png"}}$

Configurar código

En el Admin VTEX, accede a Configuración de la tienda > Storefront > Checkout, o escribe Checkout en la barra de búsqueda en la parte superior de la página.
Haga clic en el icono del sitio deseado.
En el menú de opciones azul ubicado en la parte superior de la página, haga clic en Código. A la derecha se mostrará un menú de Archivos y Templates con todos los templates de su sitio web, configurados por el sistema.

Ejemplo:

${"base64":" ","img":{"width":1047,"height":500,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":20443,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_7.png"}}$

Es posible personalizar las páginas de su sitio, además de configurar otras funcionalidades HTML a través del menú Archivos y Templates.

El código HTML completado en el template corresponde a lo que aparecerá en las páginas de checkout y order placed de su sitio.

De templates disponibles, los únicos que no se pueden cambiar son vtex-checkout y vtex-orderPlaced. Estos corresponden al funcionamiento nativo de la plataforma, presentando el contenido principal de las páginas de checkout y order placed.

La plataforma ignorará los Javascripts incluidos directamente en cualquier template del Portal. Es decir, en el momento de renderizar la página, la plataforma la eliminará. Esto se debe a que SmartCheckout solo acepta scripts originados en Google Tag Manager. Por lo tanto, siempre que sea necesario realizar alguna personalización (o incluso la inserción de etiquetas específicas) a través de javascript, utilice Google Tag Manager.

Ejemplos de cómo rellenar templates

A continuación se muestran ejemplos de cómo se pueden llenar los códigos presentes en los templates checkout-header, checkout-footer, vtex-checkout y vtex-orderPlaced y su visualización correspondiente en el sitio web:

Template checkout-header y la cabecera de página del sitio web:

${"base64":" ","img":{"width":1044,"height":569,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":31669,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_8.png"}}$

${"base64":" ","img":{"width":1108,"height":916,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":59653,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_9.png"}}$

Template checkout-footer y pie de página del sitio web:

${"base64":" ","img":{"width":994,"height":759,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":82219,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_10.png"}}$

${"base64":" ","img":{"width":1095,"height":878,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":58971,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_11.png"}}$

Template vtex-checkout y página de carrito al finalizar la compra:

${"base64":" ","img":{"width":1159,"height":873,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":43484,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_12.png"}}$

${"base64":" ","img":{"width":1008,"height":843,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":57241,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_13.png"}}$

Template vtex-orderPlaced y página de pedido confirmado:

${"base64":" ","img":{"width":1154,"height":868,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":43776,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_14.png"}}$

${"base64":" ","img":{"width":1013,"height":1106,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":85396,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_15.png"}}$

Cuentas con multidominio

Las cuentas que tengan multidominio pueden usar apenas un sitio web, si no hay necesidad de configuraciones específicas. Esto porque, aunque exista apenas un sitio web, la plataforma incluye una clase en el tag "body" de acuerdo al dominio accedido. Así, es sencillo aplicar layouts diferentes para el mismo sitio web.

Clase insertada en el tag "body" de acuerdo al dominio accedido:

${"base64":" ","img":{"width":1830,"height":1080,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","length":319336,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Checkout/Checkout%20Settings/configurar-template-en-el-smartcheckout-update_16.jpg"}}$