# Orders

## Cart

When a customer is browsing products on your storefront and finds something interesting, they can put it in cart with a standard **Add to cart** option. When they're done with selecting products, they select the **Cart** icon to see all the chosen items. It's possible to edit the cart content, add or subtract the product quantities or remove items from the cart before proceeding to checkout.

## Quick order

If a customer knows exactly what they want to buy, they can use the **Quick order** option. It allows for simple entering a valid product code and it automatically suggests products. Customers can easily populate the rows and create a new blank row underneath. Additionally, they can also add a list of product codes and quantities via a `.csv` file (download of sample possible). Finally they can add the list of product codes separated by a comma or a carriage return.

Once filled, customers place the items in the cart with the **Add to Cart** option.

<figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-339b341eaea6f1bd719a2fa0051f8c6e0cae2782%2Fquick_order.png?alt=media" alt=""><figcaption></figcaption></figure>

After adding some products to the list and adding them to the cart, the mini-cart opens.\
In the mini-cart, the customer can see all the added items, it's possible to add or subtract product quantities and delete a line item before proceeding to the next steps.

## Checkout process

When a customer is ready to proceed with the purchase, the following options are available:

* **Go to checkout** - to finish the order by registering or logging in
* **Continue as guest** - to process the purchase without the need to register or log in
* **Go to the cart** - to check more details of the products and the order before moving to payment
* **Request quote** - to send a request for a quote - for more details, see [Quote Process](https://developer.emporix.io/ce/customer-use-cases/scenarios-introduction/quote-process)

<figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-011c20c0cbb697b2a9aa3b6479b9439098e02b2d%2Fcheckout.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

### Go to Checkout

Choosing this option takes a customer to the login page where they can register or log in to their account using one of the available options.

The checkout process has the following steps:

1. Details of the shipping information

The shipping details are taken from:

* the customer's address book - the default address is selected
* the company locations tagged as `shipping` - if the customer is assigned to the registered company

The taxes are applied according to the shipping location country.

<figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-7c244ad7f9c57c7413c55ef18512edc4ac04c6a8%2Fshipping.png?alt=media" alt=""><figcaption></figcaption></figure>

2. Payment information

The billing addresses are taken from:

* the customer's address book
* the company locations tagged as `billing` - if the customer is assigned to the registered company

You can also add a coupon to get a discount.

<figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-f6b4b50e6ac2b06366307b8e48f8a2bc245f0283%2Fpayment.png?alt=media" alt=""><figcaption></figcaption></figure>

3. Review Order

This page shows the order review before the final order confirmation. Clicking the **Confirm and Pay** button creates an order in Emporix Management Dashboard.

<figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-56d07af4f6335884d50743d76ce8e776f71a6efc%2Forder.png?alt=media" alt=""><figcaption></figcaption></figure>

### Continue as guest

The customer has the option to complete the purchase without the need to register or log in. They can choose **Continue as guest**.

<figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-fdce319a619dfa4499be38b19e6c2fea2bd0aed4%2Fguest-button.png?alt=media" alt=""><figcaption></figcaption></figure>

The checkout has the following steps:

1. Details of the shipping information

The customer needs to provide their name, contact information, and shipping address. Also, they need to choose one of the available shipping methods.

<figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-8b4edacbebf1afee8c6b23cce5503aace75dc649%2Fshipping-guest.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
The email address provided in the shipping information cannot be associated with an existing customer account.
{% endhint %}

2. Payment information

The customer chooses the payment method and billing address.

<figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-100de357eadbd45436a8245ad81ac668ddda1f04%2Fpayment-guest.png?alt=media" alt=""><figcaption></figcaption></figure>

3. Review Order

The customer reviews all the provided details and if everything is accurate confirms the order and proceeds to the payment by **Confirm and Pay**.

<figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-a4813b37628bda676550b5164f97e1e47d43f9f4%2Forder-guest.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
There is a validation mechanism that runs in the background and checks if the provided email address is already associated with an existing customer. If so, it prevents completing a guest checkout with such an email. The customer has an option to either log in or to provide a different email address.

<img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-462364c069952c72f0dbf3ff3088cceae74606a1%2Fguest-validation.png?alt=media" alt="" data-size="original">
{% endhint %}

Successful checkout creates an order in Emporix Management Dashboard.

{% hint style="warning" %}
In the case when a guest customer later wants to return the purchased item, they need to register with the email address provided at checkout and to create a customer account. After logging in, the customer can view the orders under the order history associated with the email.
{% endhint %}

{% hint style="info" %}
To learn more about API used in this use case see the [Order Service](https://app.gitbook.com/s/d4POTWomuSS7d3dnh4Dg/api-guides/orders/order) and for user guides check the [Order Fulfillment](https://developer.emporix.io/ce/management-dashboard/orders-module) documentation.
{% endhint %}

After the customer submits the order, it is created within the Management Dashboard. The employee can set the status of the order and the storefront is updated accordingly. In a real scenario, the updates are normally integrated from an ERP backend system.

In the Management Dashboard, for the orders that were created by guest users, the **Customer #** field is marked as **Anonymous**. If the guest customer later chooses to create an account, the value of the **Customer #** is replaced with the real customer ID.

<figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-6663b46f2a61a6dd7dc2ce5333b724fd18196dd3%2Fguest-order.png?alt=media" alt=""><figcaption></figcaption></figure>
