Checkout Component Documentation

Overview

The Checkout Component is a multi-step component designed to handle the checkout process in an e-commerce application. It guides users through various stages, such as cart review, billing, shipping, payment, and order review. This documentation provides a detailed description of the component's structure, functionality, and usage.

Component Structure

Template

The template for the checkout component consists of several conditional rendering blocks and dynamic content based on the checkout step and data state. Here’s a high-level breakdown:

Page Title and Container:

Main Content:

Loading State:

Checkout Steps:

Error Handling:

Empty Cart:

Order Placed:

Login Modal:

Script

The script section defines the data properties, computed properties, methods, and lifecycle hooks used by the component.

Data Properties

checkout: Holds the current checkout data.

globalModel: Holds global model data.

steps: Array of checkout steps.

activeStep: The currently active step in the checkout process.

customerData: Customer information.

checkoutData: Additional data for checkout.

shippingAddress: Address details for shipping.

token: Authentication token.

billingClass, shippingClass, reviewClass, paymentClass: CSS classes for checkout steps.

currency: Currency used for calculations.

dataLoaded: Flag indicating if data is loaded.

userLocale: User's locale.

buttonLoading: Flag indicating if the button is loading.

orderLoading, orderPlaced, isLoading: Flags related to order state.

errorCode, errorType, error, errorMessage: Error handling data.

settings: Checkout settings.

guestCheckout: Flag indicating if guest checkout is enabled.

discountFromPoints: Discount applied from points.

Computed Properties

TotalVat: Total VAT amount.

TotalNet: Total net amount.

TotalAmount: Total amount including all charges.

TotalQuantity: Total quantity of items in the cart.

ExpenseAmount: Total expense amount.

CanCheckout: Determines if the user can proceed with checkout.

Methods

enableGuest(): Enables guest checkout and fetches checkout data.

onCheckoutSuccess(e): Handles successful checkout response.

onCheckOutError(status, e): Handles checkout errors.

calculateCurrency(price): Formats price according to the currency.

hasDiscount(item): Checks if the item has a discount.

prevStep(): Moves to the previous step.

nextStep(): Moves to the next step, validates the current step, and updates checkout data.

calculateSubTotal(): Calculates the subtotal of the cart items.

Lifecycle Hooks

mounted(): Initializes the component, checks if the user is authenticated or has necessary permissions, and fetches the current checkout data.

Usage

To use the checkoutdefault component in your application, include it in your Vue instance and pass the necessary props and data. Ensure that all dependent components (billing, shipping, payment, review, reviewretail, loginmodal) are registered and available.

Props

model: An object representing the model data for the checkout component.

Events

update:checkout: Emitted when the checkout data is updated.

Notes

Ensure all related components are properly imported and registered.

Customize the CSS classes and styles according to your application’s design requirements.

Handle different error codes and states according to your application's needs.

For any issues or questions, refer to the component's code or contact the development team.

Checkout

Checkout Component Documentation#

Overview#

Component Structure#

Template#

Script#

Data Properties#

Computed Properties#

Methods#

Lifecycle Hooks#

Usage#

Props#

Events#

Notes#