Cart component
The cart serves as a pivotal component in the user experience, facilitating seamless product management and checkout processes.
Triggering the Cart
The cart sidebar is triggered in two scenarios:
Addition of a New Product: Whenever a new product is added to the cart, either through browsing or directly from a product page.
User Interaction: When the user clicks on the cart icon located in the menu.
User Access Control
Access to the cart is restricted based on user authentication and role:
Authentication Requirement: Users must be logged in to view and interact with the cart. Non-logged-in users cannot access the cart functionalities.
Role-Based Restriction: Users with the role "viewer" cannot access the cart. Only registered users with appropriate permissions can proceed to view and use the cart for purchasing.
Cart Display Elements
The cart sidebar prominently displays three main elements to enhance usability and clarity:
Ordered Products:
Dual Repeating Groups: Products are categorized into two sections: normal products and custom products. These sections visually appear identical but serve to distinguish between standard offerings and customizations.
Product Management: Users can manipulate their selections by adding products to their saved items list using a heart button. They can also adjust quantities or remove items entirely.
Shipping Dropdown:
Dynamic Address Matching: The shipping dropdown automatically matches the user's selected shipping address. It is dynamically bound to the user's information, ensuring accuracy and efficiency in checkout.
Privacy and Importance: Collecting and accurately recording the shipping address is critical for order fulfillment. It represents one of the few pieces of private information we collect from users, alongside their email and name.
Cart Total and Checkout:
Total Price Display: The sidebar prominently displays the total price of all items in the cart, providing users with a clear summary of their purchase.
Checkout Button: The checkout button becomes active once the user completes all necessary shipping address fields. Clicking this button initiates various API actions tailored for Stripe checkout integration.
Checkout Process
Upon clicking the checkout button, the system triggers a sequence of API actions designed to seamlessly process payments via Stripe’s secure payment gateway. This integration ensures a smooth transition from product selection to payment confirmation, enhancing user satisfaction and transaction efficiency.
URL Parameter for Cart State
Each time the cart opens, a parameter is sent to the URL. This parameter is essential for several functions, including:
State Persistence: If the checkout process is canceled, the page can reload with the cart automatically open, providing a seamless user experience and preventing users from losing their cart view.
Last updated