It is necessary to rewrite the pages with clean code related to the order processing: cart, payment, order confirmation, and payment error messages.
1. Cart
The cart must implement:
Display of products:
- product photo;
- product name;
- short product description;
- price;
- quantity;
- buttons
+ and – for quick quantity adjustment; - the ability to remove a product from the cart;
- display of promotions if they apply to the product.
Calculation of the total:
The system should automatically recalculate:
- the total amount of products;
- shipping cost;
- discount amount;
- packaging cost;
- the total order amount.
All changes must update automatically without reloading the page.
2. Free Shipping
Add an informational block:
- "You need ___ UAH more for free shipping via Ukrposhta"
- "You need ___ UAH more for free shipping via Nova Poshta"
The amount should automatically change depending on the contents of the cart.
3. Gift Wrapping
Add the option to choose in the cart:
☐ Gift wrapping
When selecting wrapping, its cost is automatically added to the total order amount.
4. Promo Codes and Discounts
Implement:
- field for entering a promo code;
- automatic application of the discount;
- notification of successful or unsuccessful coupon application;
- display of the discount amount as a separate line in the order summary.
5. Recommended Products
Add a block in the cart:
"Recommended Products"
The system should automatically show:
- related products;
- popular products;
- products on promotion;
- products that are often bought together.
6. Promotions
It is necessary to implement promotional mechanics.
Example of promotion 5+1:
If a customer buys 5 units of a product, the system automatically adds 1 product as a gift.
The cart should display:
- gift product;
- label "Gift";
- price of the gift product — 0 UAH.
If the gift needs to be chosen independently, add a field:
"Please write in the comments which tea you would like to receive as a gift."
7. Order Comment
Add a separate field:
"Order Comment"
The customer can:
- leave wishes;
- specify gift tea;
- write clarifications regarding delivery or payment.
8. Payment
For unregistered customers:
Available payment methods:
- WayForPay;
- cash on delivery;
- payment upon pickup.
9. Cart Saving
If the customer:
- accidentally closed the page;
- refreshed the browser;
- returned later,
the items in the cart must be saved automatically.
10. Error Messages
It is necessary to implement clear error messages:
- no delivery selected;
- no payment method selected;
- phone number not filled;
- incorrect email;
- product out of stock;
- payment error;
- promo code invalid.
Messages should be noticeable and clear to the customer.
11. Order Confirmation and Email Notifications
Set up automatic email generation.
Successful registration:
Payment error:
12. Legal Agreements
Before placing an order, be sure to add a checkbox:
☐ I agree to the terms of purchase and the privacy policy.
Without confirming the checkbox, the order should not be placed.
13. Mobile Version
The cart and order processing must be fully adapted for mobile devices:
- convenient buttons;
- correct display of blocks;
- fast loading;
- correct operation on iPhone and Android.
14. Delivery and Integration with CRM KeepinCRM and Nova Poshta
All delivery fields must be implemented according to the requirements for integration with CRM KeepinCRM and the API of Nova Poshta.
Delivery methods:
- Nova Poshta — branch;
- Nova Poshta — parcel locker;
- Nova Poshta — courier;
- Ukrposhta;
- Pickup.
Delivery Fields
Mandatory fields:
Integration with KeepinCRM
All order data must be automatically transmitted to the CRM:
Transmit:
- order number;
- date and time;
- customer's full name;
- phone;
- email;
- city;
- region;
- delivery service;
- branch number;
- payment method;
- customer comment;
- order contents;
- quantity of products;
- order amount;
- discount;
- promo code;
- payment status;
- delivery status;
- UTM tags.
