Desenvolvendo e personalizando um carrinho de compras baseado em ASP.NET com nopCommerce

Um componente essencial da loja online é o carrinho de compras. Também pode estar entre os componentes mais difíceis de criar para um site de comércio eletrônico. Os clientes podem escolher coisas, avaliar suas escolhas, editá-las, adicionar mais itens, se necessário, e comprar os itens usando um carrinho de compras. Durante a finalização da compra, o programa normalmente produz um total do pedido que leva em consideração as taxas de postagem, embalagem e manuseio, bem como os impostos, se aplicáveis.

No caso do nopCommerce, um carrinho de compras e uma lista de desejos estão integrados. Se ativado na área de administração, cada produto pode ser colocado no carrinho de compras ou na lista de desejos. O carrinho de compras e a lista de desejos do nopCommerce podem ser desabilitados, a página da lista de controle de acesso pode ser usada para configurá-la. Basta procurar as permissões "Ativar carrinho de compras" e "Ativar lista de desejos" para os perfis de cliente necessários e desmarcá-los.

Para saber mais sobre a funcionalidade do carrinho de compras, bem como como funcionam outros componentes do nopCommerce, recomendamos curso de treinamento nopCommerce , que foi composto pela equipe principal de desenvolvedores.

Estrutura do carrinho de compras da plataforma .NET eCommerce

Para começar, abra e veja a página do carrinho de compras. A princípio, ele possui uma visão resumida do pedido com os atributos de checkout selecionados, preço, quantidade (que pode ser ajustada), o total de cada item adicionado e um botão remover.

Em seguida, um cliente pode adicionar frete estimado, bem como selecionar atributos de checkout e inserir códigos de desconto e vales-presente. Finalmente, um pedido é calculado e é oferecido para prosseguir para o checkout, onde os clientes inserem as informações de cobrança e envio e pagam.

A propósito, os métodos de ação relacionados ao carrinho de compras são todos colocados no ShoppingCartController do Nop.Web. Esses métodos permitem que um cliente interaja com todos os componentes da página.

Vamos detalhar todos os principais componentes da funcionalidade do carrinho de compras nopCommerce. Consiste em atributos de check-out, descontos e caixas de vale-presente, a etapa de totais e o processo de check-out. É importante considerar também uma estrutura de banco de dados.

Atributos de checkout

Começando com os atributos de checkout, eles são exibidos na página do carrinho de compras e oferecem a oportunidade de oferecer mais serviços aos clientes, como embalagem de presente, antes de fazer o pedido.

Os atributos de check-out têm suas próprias classes de serviço na pasta Nop.Services.Orders e são armazenados como XML na coluna CheckoutAttributesXml da tabela Order. Todos eles têm quase a mesma funcionalidade que os atributos do produto.

Classe CheckoutAttributeService

Coluna CheckoutAttributesXml

caixa de desconto

O próximo recurso do carrinho de compras é a caixa de desconto. Ele permite que um cliente insira um código de cupom para aplicar um desconto nos totais do pedido ou no frete. O recurso de desconto possui sua própria pasta localizada na seção Nop.Services. Quaisquer regras e lógica de um processo de implementação de desconto podem ser ajustadas lá.

Falando sobre o banco de dados, os próprios descontos são armazenados na tabela Desconto. Existem também algumas tabelas de mapeamento que armazenam como os descontos são mapeados para produtos, fabricantes e categorias. A tabela DiscountRequirement armazena os requisitos de desconto determinando em qual caso um desconto deve ser aplicado. A última tabela é a tabela DiscountUsageHistory que armazena informações sobre os descontos aplicados aos pedidos.

caixa de cartão de presente

O outro componente do carrinho de compras é a caixa do cartão-presente. Um cliente deve inserir o código aqui para aplicar um cartão-presente. Um vale-presente é um tipo especial de produto. Você pode marcar um produto como um cartão-presente na página de detalhes do produto e vender cartões-presente que os clientes podem usar dessa maneira. Depois que os clientes concluírem as compras com os produtos de cartão-presente, você poderá pesquisar e visualizar a lista de todos os cartões-presente comprados aqui.

Caso precise configurar a funcionalidade do vale-presente, você pode usar a classe GiftCardService, que está localizada na pasta Nop.Service.Orders.

Considerando o banco de dados, os vales-presente criados manualmente ou comprados como produtos são armazenados na tabela GiftCard. Depois que um vale-presente é usado no pedido, o registro apropriado é inserido na tabela GiftCardUsageHistory do banco de dados.

Um cliente pode aplicar um desconto e um vale-presente na página do carrinho de compras.

Totais

O último bloco interessante na página do carrinho de compras são os totais do carrinho de compras. Eles são calculados com base nos itens do carrinho de compras, descontos e impostos aplicados, frete escolhido e formas de pagamento. Um total consiste em algumas linhas:

1. Subtotal. O subtotal é o total de todos os itens e quantidades no carrinho de compras, incluindo promoções de itens aplicados;
2. Frete é o valor do frete calculado com base no endereço de entrega do cliente;
3. Em seguida, são exibidos os impostos aplicados. nopCommerce fornece plug-ins de impostos que permitem aplicar impostos manualmente ou automaticamente aos produtos;
4. A linha de taxa adicional do método de pagamento é autodescritiva. Pode ser configurado na página de configuração da forma de pagamento;
5. Em seguida, exibe os descontos e vales-presente aplicados;
6. Os pontos de recompensa se aplicados;
7. E finalmente vem o total do pedido.

Os totais do pedido são calculados no OrderTotalCalculationService de Nop.Services.Orders. Como você pode ver, ele contém métodos como GetShoppingCartShippingTotal, GetTaxTotal, os métodos relacionados a pontos de recompensa, descontos e outros. Por sua vez, a taxa adicional do meio de pagamento é calculada no serviço de pagamento da Nop.Services.Payments.

processo de checkout

Para uma visão mais clara de toda a experiência de compra, é importante considerar o processo de checkout. O checkout começa quando o cliente sai do carrinho de compras para proceder ao pagamento e envio.

O nopCommerce fornece dois tipos de design de processo de checkout. Eles são check-out de uma página, que é definido por padrão, e check-out com várias páginas. O checkout de uma página permite que um cliente passe por todo o processo de checkout usando uma única página. Você pode configurar isso na página de configurações do pedido. A propósito, você pode desativar temporariamente o checkout para seus clientes, se necessário, na mesma seção Checkout.

Um cliente passa pelas seguintes etapas durante o processo de checkout:

1. Um cliente precisa inserir um endereço de cobrança;
2. Então endereço de entrega;
3. Em seguida, eles precisam escolher um método de envio;
4. E um método de pagamento;
5. Em seguida, mostramos as informações de pagamento necessárias ao cliente;
6. E por fim, é a etapa de confirmação onde o cliente confirma o pedido.

Existem mais condições que afetam o número de etapas de finalização da compra. Eles podem ser ajustados nas configurações do pedido.

Todos os métodos de ação relacionados ao processo de checkout são colocados no CheckoutController. Como você pode ver, este controlador possui regiões separadas: para checkout em várias etapas e checkout em uma página. Os métodos de checkout em várias etapas retornam exibições, enquanto os métodos de checkout de uma página retornam JSON como resultado. Não há nenhum serviço separado que gerencie o processo de checkout. Todo o trabalho é feito no controlador.

Operação de banco de dados do carrinho de compras ASP.NET

No nopCommerce, um carrinho de compras e uma lista de desejos têm a mesma estrutura. Para mais compreensão, é melhor olhar para o banco de dados. Na tabela ShoppingCartItem, os itens do carrinho de compras e da lista de desejos são armazenados juntos. No entanto, eles são diferenciados por ShoppingCartTypeId.

Além disso, olhando para a pasta “Domínio – Pedidos”, pode-se ver a enumeração ShoppingCartType que fornece dois tipos: ShoppingCart e Wishlist, com valores numéricos apropriados. Esses são os valores armazenados na coluna ShoppingCartTypeId no banco de dados. Esta é a única diferença entre um carrinho de compras e uma lista de desejos nos termos do banco de dados.

Os outros campos representam o identificador do cliente como uma chave estrangeira. É um ID de um cliente que adicionou este item ao carrinho de compras. Além disso, existe o ProductId que identifica qual produto foi adicionado ao carrinho, que é seguido pelo StoreId que representa a loja daquele produto. Além disso, ShoppingCartTypeId que já discutimos determina se o cliente adicionou este item ao carrinho de compras ou lista de desejos.

Em seguida, vem a coluna AttributesXml. Esta coluna armazena a configuração do produto adicionado ao carrinho com todos os atributos escolhidos por um cliente. Aqui está o processo de como este XML funciona:

1. abra qualquer página de produto e escolha dois atributos deste produto;
2. adicione o produto ao carrinho;
3. selecione as 1000 primeiras linhas de ShoppingCartItem;
4. clique em uma célula em AttributesXML;
5. você verá o primeiro atributo que está com ID 9 e valor 21, assim como o segundo com ID 10 e valor 25.

Esta é a maneira como os atributos do produto escolhido são armazenados. Para analisar esses XMLs, há uma classe especial chamada ProductAttributeParser localizada na pasta Nop.Services Catalog. Essa classe manipula XMLs de atributos do produto. Por exemplo, usando o método ParseProductAttributes, ele cria um XML com base nos atributos escolhidos quando um cliente adiciona o produto ao carrinho.

Como você pode ver, este método aceita um formulário da página de detalhes do produto. Também é usado para recalcular o preço do produto quando os valores dos atributos são alterados na página de detalhes do produto (método GetUnitPriceAsync). Portanto, nesta classe, você pode encontrar os métodos que operam com registros XML de atributos do produto. Ele também manipula combinações de atributos de produtos, datas de aluguel e atributos de cartões-presente.

Outra coluna importante é o CustomerEnteredPrice. É utilizado quando a opção “Cliente insere preço” está disponível para determinado produto. A coluna Quantidade é bastante autodescritiva, pois mostra a quantidade escolhida de um produto. As colunas RentalStartDate e RentalEndDate são usadas quando o tipo de produto é aluguel. Por fim, as datas CreatedOn e UpdatedOn são autoexplicativas.

Conclusão

O carrinho de compras nopCommerce é um componente estruturado e flexível. Com base nas informações deste artigo, você pode criar e configurar efetivamente um site com um carrinho de compras avançado e uma lista de desejos usando a plataforma nopCommerce.

Não há necessidade de construir tudo do zero, por isso permite que você se concentre apenas nos requisitos específicos do seu negócio de comércio eletrônico. Uma das razões para isso é que o carrinho de compras nopCommerce possui os recursos mais usados, como estimativa de frete, atributos de checkout e implementação de vale-presente e desconto.

Finalmente, a estrutura do banco de dados permite que você atualize que tipo de dados do carrinho de compras devem ser armazenados e gerenciados. Você também pode encontrar esses detalhes em nossa documentação sob o Esquema de banco de dados padrão seção.