preface

So far, the contents of SkrShop’s E-commerce Design Manual series have covered the following chunks:

  • The user
  • goods
  • The shopping cart
  • marketing
  • pay
  • Basic services

Today we are ready to open a new chapter order center.

The main contents of order center series are as follows:

knowledge
Order settlement page
Create the order
Order the performance
The order status
The order details
Reverse order operation
.

First of all, let’s review a simple process of users’ shopping on e-commerce platforms, as shown in the figure below:

So, what are we talking about today?

A: In this article today, we will mainly talk about the design and implementation of the "order settlement page" in the above process.Copy the code

What does the order settlement page look like?

Let’s look at the order settlement page of east:

Take a look at the order settlement page of X Treasure:

Through the above screenshot, we can roughly get the main content of the order settlement page:

  • User default shipping address information
  • Payment method selection
  • Store & merchandise information
  • Alternative means of distribution of goods
  • Invoice Type selection
  • Preferential information
  • Order related amount
  • , etc.

Composition of the order settlement page

I have been thinking that the front-end can be modular, but the back-end interface data can not be modular?

My answer: yes.Copy the code

Based on the content sorted out above, and through previous experience, the order settlement page is modular split and combined to obtain the following modular composition of the order settlement page:

About how to design the code, you can refer to my article “code components | my code no else”

Order settlement page module analysis

The module number The name of the module Submodule Number Submodule Name Module description
1 The address module – – Displays the optimal user address
2 Payment mode module – – Payment method supported by this order
3 The store module – – Including store information, product information, participating preferential information, optional logistics methods, product after-sales information, etc
3 – 3.1 The commodity module Includes sub-modules: basic commodity information module, commodity preferential information module, after-sale module
3 – 3.2.1 Commodity basic information module Product information, name, picture, price, stock, etc
3 – 3.2.2 Commodity discount information module Selected sales campaign offers options
3 – 3.2.3 After module Information on after-sale rights and interests enjoyed by goods
3 – 3.3 Logistics module Alternative delivery methods
3 – 3.4 Store commodity amount information module –
4 The invoice module – – Select the type of invoice and supplement the invoice information
5 Coupon module – – Display a list of coupons that can be used for this order
6 Gift card module – – Show the list of gift cards you can choose to use
7 Platform integration module – – Users can use points to offset part of their cash
8 Order amount information module – – Contains the amount details of the order

The address module

Displays the optimal address of the user

Optimal address logic:

  • First, the default address set by the user
  • If there is no default address, the address of the most recent order is returned
The field names type Subfield name type Field meaning
consignee string – – Name of consignee
email string – – Consignee email address (return value username part of the code)
mobile string – – Consignee’s mobile phone number (four digits in the middle of return value)
country object id int64 National ID
country object name string State the name of the
province object id int64 Provincial ID
province object name string The name of the province
city object id int64 The city ID
city object name string The city name
county object id int64 Area county ID
county object name string Area county name
street object id int64 Street township ID
street object name string Street town name
detailed_address string – – Detailed address (user’s hand)
postal_code string – – Zip code
address_id int64 – – Address ID
is_default bool – – Default address
label string – – Address type label, home, company, etc
longitude string – – longitude
latitude string – – latitude

Module data Demo:

{
    "address_module": {
        "consignee": "Name of consignee"."email": "Consignee email address (return value username part of the code)"."mobile": "Consignee's mobile phone number (four digits in the middle of return value)"."country": {
            "id": Awesome!."name": "Country name"
        },
        "province": {
            "id": 12123."name": "Name of province"
        },
        "city": {
            "id": 212333."name": "City name"
        },
        "county": {
            "id": 1233222."name": "District and county Name"
        },
        "street": {
            "id": 9989999."name": "Street town name"
        },
        "detailed_address": "Full address (user's hand)"."postal_code": "Zip code"."address_id": 212399999393."is_default": false."label": "Address type tag, home, company, etc."."longitude": "Longitude"."latitude": "Latitude"}}Copy the code

Payment mode module

Payment method supported by this order

Payment options:

  • Online payment
  • Cash on delivery
The field names type Subfield name type Field meaning
pay_method_list array id int Payment Method ID
pay_method_list array name string Name of Payment Method
pay_method_list array desc string Description of Payment Method

Module data Demo:

{
    "pay_method_module": {
        "pay_method_list": [{"id": 1."name": "Online payment"."desc": "Description of Online payment"
            },
            {
                "id": 2."name": "Cash on delivery"."desc": "Description of cash on delivery."}}}]Copy the code

The store module

Including store information, product information, participating preferential information, optional logistics methods, product after-sales information, etc

The store module consists of the following sub-modules:

  • The commodity module
    • Commodity basic information module
    • Commodity discount information module
    • After module
  • Commodity logistics module
  • Store total amount information module

We’ll do a separate analysis later because there’s more to it.

The invoice module

The user selects the type of invoice and supplements the invoice information

Select the type of invoice:

  • personal
  • unit
The field names type Subfield name type Field meaning
type_id int – – Type of invoice: Individual; unit
type_name string – – Invoice Type Name
type_desc string – – Description of Invoice Type

Module data Demo:

{
    "invoice_module": {
        "type_list": [{"type_id": 1."type_name": "Personal"."type_desc": "Description"
            },
            {
                "type_id": 2."type_name": "The company"."type_desc": "Description"}}}]Copy the code

Coupon module

Returns a list of coupons that can be used for the order, and the default selection of the best coupon for the current order

  • Display the user’s coupon list: the ones available for the current order are at the top and the others are at the bottom
  • By default, select the best coupon: the coupon with the largest discount for the current order

For more information on coupons, see the Coupons section.

Gift card module

Show the list of gift cards you can choose to use

The field names type Subfield name type Field meaning
giftcard_list array id int64 The gift card id
giftcard_list array name string Name of gift Card
giftcard_list array desc string Gift Card Description
giftcard_list array pic_url string Gift Card pictures
giftcard_list array total_amount float64 Initial total amount of gift card
giftcard_list array total_amount_txt string Initial total amount of gift card – after formatting
giftcard_list array remaining_amount float64 Amount remaining on the gift card
giftcard_list array remaining_amount_txt string Remaining amount of gift card – after formatting

Module data Demo:

{
    "giftcard_module": {
        "giftcard_list": [{"id": 341313121."name": "Gift Card Name"."desc": "Gift Card Description"."pic_url": "Gift Card picture"."total_amount": 100.00."total_amount_txt": "100.00"."remaining_amount": 21.00."remaining_amount_txt": "21.00"}}}]Copy the code

Platform integration module

Users can use points to cash out

For example, the line of some east order settlement page in Beijing beans.

The field names type Subfield name type Field meaning
order_amount_min float64 – – Lower limit of order amount that can be used for credit credit function
total_points int64 – – Total user credits
can_use_points int64 – – Credits available (credits that may be frozen)
points2money_rate int – – Points are converted into cash ratios, such as 1 yuan for every 100 points, with a minimum of 1 point worth 0.01 yuan
points2money_min int – – What is the minimum number of points a user can use to cash
points2money_max int – – The maximum number of credits can be used for a single order
points_amount float64 – – The amount of credits can be deducted from this order
points_amount_txt string – – The order credits are deductible amount – after formatting

Module data Demo:

{
    "points_module": {
        "order_amount_min": 100.00."total_points": 9999."can_use_points": 9999."points2money_rate": 100."points2money_min": 1000."points2money_max": 9999."points_amount": 99.99."points_amount_txt": "99.99"}}Copy the code

Order amount information module

Contains the amount details of the order

The field names type Subfield name type Field meaning
skus_amount float64 – – The total amount of the goods
promotion_amount float64 – – The total amount of the offer
freight float64 – – The freight
final_amount float64 – – Pay the amount
promotion_detail object coupon_amount float64 Discount coupon amount
promotion_detail object sales_activity_amount float64 Discount amount for sales activities
promotion_detail object giftcard_amount float64 Amount of gift card used
promotion_detail object points_amount float64 The amount of credits deducted for this order 
_txt field slightlyCopy the code

Module data Demo:

{
    "order_amount_module": {
        "skus_amount": 99.99."skus_amount_txt": "99.99"."promotion_amount_total": 10.00."promotion_amount_total_txt": "10.00"."freight_total": 8.00."freight_total_txt": "8.00"."final_amount": 97.99."final_amount_txt": "97.99"."promotion_detail": {
            "coupon_amount": 5.00."coupon_amount_txt": "5.00"."sales_activity_amount": 5.00."sales_activity_amount_txt": "5.00"."giftcard_amount": 0."giftcard_activity_amount_txt": "0"."points_amount": 0."points_amount_txt": "0"}}}Copy the code

conclusion

As mentioned above, the content of the order settlement page is basically introduced. If you have any questions, please leave a message on our Github project at github.com/skr-shop/ma… .

[Skr Shop] Project address long press to enter: github.com/skr-shop/ma…

SkrShop series more articles:

  • SkrShop | electric maker also confuse one yuan, conventional seconds kill, kill time to buy?
  • SkrShop | do you want to know the coupon business, SkrShop tell you
  • What SkrShop |, seconds kill system has so many!
  • SkrShop | shopping cart design of requirement analysis
  • The architectural design of SkrShop | a shopping cart
  • SkrShop | system design of general drawing tools
  • SkrShop | general demand analysis of drawing tools
  • SkrShop | coder, you can design the trading system (work)?
  • SkrShop | coder, you can design the trading system (concept)?
  • SkrShop | third-party payment process analysis and summary
  • SkrShop | electrical design manual of basic goods information
  • SkrShop | electric business users of the system design manual