Comercio electrónico (Beta) 🔥

Esta es una de las funciones más ambiciosas y prometedoras incluidas en DexAppBuilder en los últimos meses. Cualquier creador de DApp podrá desplegar mercados del mundo real para objetos y bienes y recibir pagos en monedas estables de manera ordenada, segura y confiable, teniendo control de su tienda y del inventario de productos en todo momento.

Primeros pasos

Una vez que el usuario tenga su DApp creada con DexAppBuilder debe habilitar la funcionalidad de Comercio Electrónico, que está desactivada por defecto. Visita este enlace interno para leer la documentación o mira este video en nuestro canal de YouTube para un tutorial rápido sobre cómo desplegar tu DApp con DexAppBuilder.

Guarda los cambios y espera unos segundos para que el servidor refleje las modificaciones.

Configuración del Comercio Electrónico

Una vez que hayas activado esta función, la hayas guardado y el servidor haya registrado los cambios, verás un nuevo menú de Comercio Electrónico en la barra lateral izquierda en la parte inferior, donde puedes configurar los parámetros iniciales de tu sistema de comercio.

Configurando lo básico

1. Dirección de la billetera receptora: Esta será la dirección que recibirá todos los ingresos de las ventas. Por defecto, esta es tu dirección conectada, pero puedes usar cualquier otra dirección.

2. Correo electrónico del destinatario: Esta será la bandeja de entrada donde recibirás notificaciones de cualquier venta que se haya producido. Estas notificaciones por correo se envían a tu bandeja en tiempo real.

3. Redes de pago: Selecciona las redes blockchain en las que deseas recibir pagos en stablecoins. Para cada una de las redes, las siguientes stablecoins están habilitadas por defecto:

   1. Arbitrum: USD Coin (USDC) y Tether (USDT)

   2. Avalanche: USD Coin (USDC) y Tether (USDT)

   3. Base: USD Coin (USDC)

   4. Ethereum: USDS, Tether (USDT) y USD Coin (USDC) stablecoins.

   5. Optimism: USD Coin (USDC)

   6. Polygon: USD Coin (USDC) y Tether (USDT)

   7. Binance Chain: Tether (USDT) y USD Coin (USDC)

Sistema de Notificaciones Internas

En esta sección se te notificará, junto con el correo que ya configuramos arriba, de todas las ventas recibidas y pedidos procesados, para que puedas llevar un registro de todo lo necesario para controlar tu negocio.

Revisando el panel

Aquí encontrarás un desglose de las ganancias en dólares y el número total de pedidos. Esta sección se mejorará en el futuro para permitir al usuario una visión más amplia de las ganancias y el control de pedidos, todo con claridad y eficiencia en los datos como nuestro objetivo.

Administrando categorías de artículos

Tus productos se ven mejor cuando están correctamente categorizados. Tus visitantes podrán refinar la vista de productos por categoría y así ver lo que les interesa comprar. La categorización también es importante para el orden interno de la DApp en caso de que haya una gran cantidad de artículos cargados en el sistema.

Agrega una categoría simplemente haciendo clic en el botón y completando el modal de un solo campo que aparece 👇

Una vez que termines de llenar tus categorías podría verse así:

Administrando colecciones de artículos

Ideal para agrupar productos similares en paquetes, esta opción te permite vender diferentes artículos en paquetes que puedes crear para cualquier ocasión (festividades, ocasiones especiales, promociones, etc.). Una función muy útil para tiendas con alta rotación de mercancía.

Agrega una nueva colección simplemente haciendo clic en el botón, luego procede a completar el único campo. Guárdalo.

Administrando artículos

Con lo anterior ya configurado, estamos listos para empezar a añadir nuestros productos al sistema. A continuación se muestran los pasos necesarios para hacerlo:

1. En la barra lateral izquierda exclusivamente para Comercio Electrónico, navega a Productos – Artículos. Una vez allí, podrás ver el panel de artículos vacío.

1. Presiona el botón y llenemos todos los campos para el producto específico:

• Nombre del producto: Sé conciso y llamativo. Es tu mercado, así que puedes ser creativo pero preciso.

• Descripción: Sé tan específico como necesites aquí para aclarar qué estás vendiendo.

• Colecciones: Agrega este producto a colecciones que ya hayas creado. Esto te permite vender múltiples productos dentro de un solo paquete.

• Categoría: Su nombre es claro: Categoriza tus productos para un mejor orden tanto internamente como para tus clientes.

• Precio: Introduce cuánto estás dispuesto a recibir por este producto en dólares estadounidenses.

• Visibilidad en la tienda: Opción útil para cuando estás ingresando todo tu inventario y no quieres mostrar nada aún (mientras está en producción). También es útil para artículos que están agotados.

• Artículo protegido: Útil para ocultar información al comprador. Puedes usarlo si deseas mostrar la ubicación de entrega del producto, un enlace externo privado a un chat (puedes usar tu enlace de WhatsApp, Telegram, etc.) o cualquier cosa que decidas.

• Sube una foto para el producto. Se aceptan la mayoría de los formatos de imagen comerciales, pero el límite es de 2 MB por ahora.

Una vez que hayas completado todos los campos, procede a guardar el producto. Repite el proceso hasta que hayas llenado tu inventario.

Administrando Checkouts

Crea y comparte fácilmente pagos de productos con tus clientes. Ideal para vender productos en combos para ocasiones especiales y ofertas.

Una vez que entres en la sección podrás ver el panel con todos los pedidos de checkout que hayamos realizado antes. Como es la primera vez que entramos, no hay ninguno.

Creamos nuestro primer pedido de checkout haciendo clic en el botón que abrirá el siguiente formulario para completar 👇

Título: Introduce un título descriptivo para la página de checkout. Este título te ayuda a identificar el checkout en tu panel y proporciona contexto a tus clientes.

Descripción: Agrega cualquier información adicional o instrucciones relevantes para el proceso de checkout. Por ejemplo, puedes incluir políticas de devolución, detalles de envío o información específica del producto.

Requerir correo electrónico:

• Opción de alternancia: Cuando está habilitado, se requerirá que los clientes proporcionen su dirección de correo electrónico para completar el proceso de checkout. Esto es útil para enviar confirmaciones o actualizaciones de pedidos.

Cantidad editable

• Opción de alternancia: Cuando está habilitado, los clientes pueden editar la cantidad de los artículos que desean comprar directamente en la página de checkout. Esta opción brinda flexibilidad para compras al por mayor o de varios artículos.

Tabla de productos

La tabla de productos te permite gestionar los artículos incluidos en el checkout. Aquí están las columnas disponibles y sus propósitos:

• Producto: Muestra el nombre o identificador del producto.

• Cantidad: Muestra la cantidad de cada producto en el pedido. Si "Cantidad editable" está habilitada, este campo se vuelve editable para los clientes.

• Precio unitario: Indica el precio por unidad del producto.

• Precio total: Calcula automáticamente el costo total del producto (cantidad × precio unitario).

• Acciones: Proporciona opciones para modificar o eliminar el artículo del checkout.

Agregar artículo

• Botón: Usa el Agregar artículo botón para incluir un nuevo producto en el checkout. Esto te permitirá especificar el nombre del producto, la cantidad y el precio.

Una vez que termines de completar todos los campos presiona el botón. Verás una notificación si todo salió bien y se abrirá el panel de checkout para ti como sigue:

Tus pedidos ahora están en el panel y puedes acceder a ellos para compartirlos o eliminarlos según sea necesario. Presiona el botón a la derecha del pedido seleccionado para abrir un modal con opciones para compartir este pedido en redes sociales. También puedes copiar el enlace al mismo.

Incrustar productos en tu DApp

Si quieres venderlo, tienes que mostrarlo. Esa es la regla principal de las ventas y, por supuesto, puedes hacerlo a tu manera en tu DApp creada con DexAppBuilder. Te mostramos un ejemplo:

1. Debes ir al área administrativa de tu DApp. Una vez allí, busca la opción Páginas dentro de la sección Diseño (primera barra lateral a la izquierda, la principal). Una vez allí, podrás ver las páginas que componen tu DApp.

Haz clic en la página para ver todas las secciones que contiene 👇

Para mostrarte la funcionalidad de e-Commerce directamente, eliminamos todas las secciones predeterminadas y ahora necesitamos crear solo una que contenga los productos

Ahora selecciona el componente «Comercio» para agregar tus productos

Una vez que pulses en el componente verás la siguiente pantalla 👇

Puedes cambiar la vista del componente seleccionando el tipo en la lista. De hecho, en la imagen de arriba estamos usando el tipo Tienda. En este caso mostraremos TODOS LOS ARTÍCULOS en el componente.

Una vez que terminemos aquí hacemos clic en Guardar. La sección de tu componente en la página de Inicio se verá así 👇

Ahora echemos un vistazo a nuestra DApp en "producción"

Como puedes ver, nuestra DApp solo tiene la sección Tienda que contiene los productos que añadimos para nuestra prueba. Obviamente, tu DApp debería contener todo lo que necesites para hacerla especial: integraciones de contratos inteligentes, contenido restringido, componentes de intercambio, entre otras cosas.