Desarrollo y personalización de un carrito de compras basado en ASP.NET con nopCommerce

Un componente esencial de la tienda online es el carrito de la compra. También podría estar entre los componentes más difíciles de crear para un sitio web de comercio electrónico. Los clientes pueden elegir cosas, evaluar sus elecciones, editarlas, agregar más artículos si es necesario y luego comprar los artículos usando un carrito de compras. Durante el proceso de pago, el programa normalmente produce un total del pedido que tiene en cuenta los gastos de envío, embalaje y manipulación, así como los impuestos, si corresponde.

En el caso de nopCommerce, se incorpora un carrito de compras, así como una lista de deseos. Si está habilitado en el área de administración, cada producto se puede colocar en el carrito de compras o en la lista de deseos. El carrito de compras y la lista de deseos de nopCommerce se pueden deshabilitar, la página de la lista de control de acceso se puede usar para configurarlo. Simplemente busque los permisos "Habilitar carrito de compras" y "Habilitar lista de deseos" para los perfiles de clientes requeridos y desmárquelos.

Para obtener más información sobre la funcionalidad del carrito de compras, así como sobre cómo funcionan otros componentes de nopCommerce, recomendamos tomar el Curso de formación de nopCommerce , que ha sido compuesto por el equipo principal de desarrolladores.

Estructura del carrito de compras de la plataforma de comercio electrónico .NET

Para empezar, abra y mire la página del carrito de compras. Al principio, tiene una vista de resumen del pedido con los atributos de pago seleccionados, el precio, la cantidad (que se puede ajustar), el total de cada artículo agregado y un botón de eliminación.

A continuación, un cliente puede agregar el envío estimado, así como seleccionar atributos de pago e ingresar códigos de descuento y tarjetas de regalo. Finalmente, se calcula un pedido y se le ofrece proceder al pago, donde los clientes ingresan la información de facturación y envío y pagan.

Por cierto, todos los métodos de acción relacionados con el carrito de compras se colocan en ShoppingCartController de Nop.Web. Estos métodos permiten que un cliente interactúe con todos los componentes de la página.

Analicemos todos los componentes principales de la funcionalidad del carrito de compras de nopCommerce. Consta de atributos de pago, descuentos y casillas de tarjetas de regalo, el paso de totales y el proceso de pago. Es importante considerar también una estructura de base de datos.

Atributos de pago

Comenzando con los atributos de pago, se muestran en la página del carrito de compras y brindan la oportunidad de ofrecer más servicios a los clientes, por ejemplo, envolver regalos, antes de realizar el pedido.

Los atributos de Checkout tienen sus propias clases de servicio en la carpeta Nop.Services.Orders y se almacenan como XML en la columna CheckoutAttributesXml de la tabla Order. Todos tienen casi la misma funcionalidad que los atributos del producto.

Clase CheckoutAttributeService

Columna CheckoutAttributesXml

caja de descuento

La siguiente característica del carrito de compras es la caja de descuento. Permite que un cliente ingrese un código de cupón para aplicar un descuento a los totales del pedido o al envío. La función de descuento tiene su propia carpeta que se encuentra en la sección Nop.Services. Cualquier regla y lógica de un proceso de implementación de descuento se puede ajustar allí.

Hablando de la base de datos, los descuentos en sí mismos se almacenan en la tabla de descuentos. También hay algunas tablas de mapeo que almacenan cómo se asignan los descuentos a productos, fabricantes y categorías. La tabla DiscountRequirement almacena los requisitos de descuento que determinan en qué caso se debe aplicar un descuento. La última tabla es la tabla DiscountUsageHistory que almacena información sobre los descuentos aplicados a los pedidos.

caja de tarjeta de regalo

El otro componente del carrito de compras es la caja de la tarjeta de regalo. Un cliente debe ingresar el código aquí para aplicar una tarjeta de regalo. Una tarjeta de regalo es un tipo especial de producto. Puede marcar un producto como una tarjeta de regalo en la página de detalles del producto y vender tarjetas de regalo que los clientes pueden usar de esta manera. Después de que los clientes completen las compras con los productos de tarjetas de regalo, puede buscar y ver la lista de todas las tarjetas de regalo compradas aquí.

En caso de que necesite configurar la funcionalidad de la tarjeta de regalo, puede usar la clase GiftCardService, que se encuentra en la carpeta Nop.Service.Orders.

Teniendo en cuenta la base de datos, las tarjetas de regalo que se crean manualmente o se compran como productos se almacenan en la tabla GiftCard. Una vez que se utiliza una tarjeta de regalo en el pedido, se inserta el registro apropiado en la tabla GiftCardUsageHistory de la base de datos.

Un cliente puede aplicar tanto un descuento como una tarjeta de regalo en la página del carrito de compras.

Totales

El último bloque interesante en la página del carrito de compras son los totales del carrito de compras. Se calculan en función de los artículos del carrito de compras, los descuentos e impuestos aplicados, el envío elegido y los métodos de pago. Un total consta de unas pocas filas:

1. Total parcial. El subtotal es el total de todos los artículos y cantidades en el carrito de compras, incluidas las promociones de artículos aplicadas;
2. El envío es el costo de envío calculado en función de la dirección de envío del cliente;
3. Luego, se muestran los impuestos aplicados. nopCommerce proporciona complementos de impuestos que permiten aplicar impuestos a los productos de forma manual o automática;
4. La fila de tarifa adicional del método de pago es autodescriptiva. Se puede configurar en la página de configuración del método de pago;
5. Luego, muestra los descuentos aplicados y las tarjetas regalo;
6. Los puntos de recompensa si se aplican;
7. Y finalmente viene el total del pedido.

Los totales de los pedidos se calculan en OrderTotalCalculationService de Nop.Services.Orders. Como puede ver, contiene métodos como GetShoppingCartShippingTotal, GetTaxTotal, los métodos relacionados con puntos de recompensa, descuentos y otros. A su vez, la tarifa adicional del método de pago se calcula en el servicio de pago de Nop.Services.Payments.

Proceso de pago

Para una visión más clara de toda la experiencia de compra, es importante tener en cuenta el proceso de pago. El proceso de pago comienza cuando el cliente deja el carrito de compras para proceder al pago y envío.

nopCommerce proporciona dos tipos de diseño de proceso de pago. Son pago de una página, que está configurado de forma predeterminada, y pago con varias páginas. El proceso de pago de una página le permite a un cliente realizar todo el proceso de pago utilizando una sola página. Puede configurar esto en la página de configuración del pedido. Por cierto, puede deshabilitar temporalmente el proceso de pago para sus clientes si es necesario en la misma sección de Pago.

Un cliente sigue los siguientes pasos durante el proceso de pago:

1. Un cliente necesita ingresar una dirección de facturación;
2. Luego dirección de envío;
3. Luego, deben elegir un método de envío;
4. Y un método de pago;
5. Luego, mostramos la información de pago requerida al cliente;
6. Y finalmente, es el paso de confirmación donde el cliente confirma el pedido.

Hay más condiciones que afectan la cantidad de pasos de pago. Se pueden ajustar en la configuración del pedido.

Todos los métodos de acción relacionados con el proceso de pago se colocan en CheckoutController. Como puede ver, este controlador tiene regiones separadas: para el pago de varios pasos y el pago de una página. Los métodos de pago de varios pasos devuelven vistas, mientras que los métodos de pago de una página devuelven JSON como resultado. No hay un servicio separado que gestione el proceso de pago. Todo el trabajo se realiza en el controlador.

Funcionamiento de la base de datos del carrito de la compra ASP.NET

En nopCommerce, un carrito de compras y una lista de deseos tienen la misma estructura. Para una mayor comprensión, es mejor mirar la base de datos. En la tabla ShoppingCartItem, los elementos del carrito de compras y de la lista de deseos se almacenan juntos. Sin embargo, se distinguen por ShoppingCartTypeId.

Además, al mirar la carpeta "Dominio - Pedidos", se puede ver la enumeración ShoppingCartType que proporciona dos tipos: ShoppingCart y Wishlist, con valores numéricos apropiados. Estos son los valores que se almacenan en la columna ShoppingCartTypeId de la base de datos. Esta es la única diferencia entre un carrito de compras y una lista de deseos en los términos de la base de datos.

Los demás campos representan el identificador del cliente como clave foránea. Es una identificación de un cliente que ha agregado este artículo al carrito de compras. Además, hay ProductId que identifica qué producto se ha agregado al carrito, seguido de StoreId que representa la tienda de ese producto. Además, ShoppingCartTypeId que ya analizamos determina si el cliente ha agregado este artículo al carrito de compras o a la lista de deseos.

Luego viene la columna AttributesXml. Esta columna almacena la configuración del producto agregado al carrito con todos los atributos elegidos por un cliente. Aquí está el proceso de cómo funciona este XML:

1. abra cualquier página de producto y elija dos atributos de este producto;
2. agregar el producto al carrito;
3. seleccione las 1000 filas principales de ShoppingCartItem;
4. haga clic en una celda debajo de AttributesXML;
5. verá el primer atributo que es con ID 9 y un valor de 21, así como el segundo con ID 10 y un valor de 25.

Esta es la forma en que se almacenan los atributos del producto elegido. Para analizar dichos XML, hay una clase especial llamada ProductAttributeParser ubicada en la carpeta Nop.Services Catalog. Esta clase manipula XML de atributos de productos. Por ejemplo, utilizando el método ParseProductAttributes, crea un XML basado en los atributos elegidos cuando un cliente agrega el producto al carrito.

Como puede ver, este método acepta un formulario de la página de detalles del producto. También se utiliza para volver a calcular el precio del producto cuando se modifican los valores de los atributos en la página de detalles del producto (método GetUnitPriceAsync). Entonces, en esta clase, puede encontrar los métodos que operan con registros XML de atributos de productos. También manipula combinaciones de atributos de productos, fechas de alquiler y atributos de tarjetas de regalo.

Otra columna importante es CustomerEnteredPrice. Se utiliza cuando la opción “El cliente ingresa el precio” está disponible para un determinado producto. La columna Cantidad es bastante autodescriptiva, ya que muestra la cantidad elegida de un producto. Las columnas RentalStartDate y RentalEndDate se utilizan cuando el tipo de producto es alquiler. Finalmente, las fechas CreatedOn y UpdatedOn se explican por sí mismas.

Conclusión

El carrito de compras de nopCommerce es un componente estructurado y flexible. Según la información de este artículo, puede crear y configurar de manera efectiva un sitio web con un carrito de compras avanzado y una lista de deseos utilizando la plataforma nopCommerce.

No es necesario crear todo desde cero, por lo que le permite concentrarse solo en los requisitos específicos de su negocio de comercio electrónico. Una de las razones es que el carrito de compras de nopCommerce tiene las funciones más utilizadas, como estimación de envío, atributos de pago e implementación de tarjeta de regalo y descuento.

Finalmente, la estructura de la base de datos le permite actualizar qué tipo de datos del carrito de compras se requiere almacenar y administrar. También puede encontrar estos detalles en nuestra documentación bajo el Esquema de base de datos predeterminado sección.