Front Theme 2 - Checkout Booking

Enable Option Non-Cart Base
To achieve the Landing Page design shown below, Admins must log in to the Dashboard:
  1. Go to Settings.
  2. Choose Front Theme.
  3. Select Theme 2.
  4. Enable 'Non-Cart Base'.
Booking Process
1. Navigation and Category Selection
  • Customers can select categories from the top navigation bar.
  • Upon selection, the page automatically scrolls to the bottom where the services section is located.
2. Manual Scrolling and Service Selection
  • Alternatively, customers can manually scroll through the page to explore and select desired categories and services.
  • Once a category is selected, the services section automatically displays below.
3. Service Selection
  • In the services section, customers can choose specific services they wish to book.
  • After selecting services, they can click on an 'Add' button to store their booking selections.
4. Booking
  • To proceed with booking, customers need to click on the 'Booking' icon located at the top navigation bar.
  • This action directs them to the booking page where they can review their selections and complete the booking process.
front

5. Next Page: Display Selected Services
  • In the booking page, it show a list of selected services for booking.
  • Provide options for customers, to adjust quantity, delete selected items, and view the booking total.
6. Manage Selected Services
  • Allow customers to adjust the quantity of each selected service.
  • Provide an option to delete selected booking items.
  • Ensure that the booking total updates dynamically based on changes.
7. Proceed to Booking Time Selection
  • Once satisfied with their selection, customers click 'Select Booking Time' to proceed.
front

8. Next Page: Booking Time Selection
  • Customers are directed to the booking time selection page.
  • Here, they choose a date and time suitable for their booking.
front

9. Booking Confirmation
  • Review booking details including services selected, quantity, and total amount.
  • Customers proceed to payment through the provided payment gateway.
front

10. Checkout
  • Customers need to input their details, such as address, city, state, postcode, and any special instructions (optional).
  • After entering their details, customers proceed to payment by clicking the 'Proceed to payment' button.
front

11. Payment
  • Customers need to select the payment method for their booking:
    • Payment Type Options:
      1. Pay at shop (offline payment)
      2. Pay via chip in (online payment)
      3. Pay via store credit (this option displays only if the customer's credit is more than 0)
  • After selecting the payment method, customers will be redirected to the booking success page, confirming their successful booking.
front

11. A) Payment Method: Pay at shop
  • The booking is made, but the payment status will be pending as customers need to pay at the shop.
11. B) Payment Method: Chip-In
  • Customers need to select the payment method:
    • Payment Type Options:
      1. Online Banking (FPX)
      2. Credit/Debit Card
  • After selecting the payment method, customers will be redirected to the payment page, confirming their payment for booking.
front

11. C) Payment Method: Store Credit
  • This option displays only if the customer's store credit is more than 0.
  • The amount of the booking will be deducted from the customer's store credit.
  • If the customer's store credit is less than the booking total, they will not be able to pay via store credit, and the booking will not be completed.
  • If the customer's store credit covers the booking total, the booking will be successful.
12. Booking Successful
  • After successful payment, customers will be redirected to the booking success page.
front