105 lines
No EOL
2.9 KiB
Markdown
105 lines
No EOL
2.9 KiB
Markdown
# MVC Webshop Application Flow Diagram
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[App Start] --> B[DOMContentLoaded Event]
|
|
B --> C[initializeCart()]
|
|
C --> D[loadCartFromStorage()]
|
|
D --> E[getAllProducts()]
|
|
E --> F[updateView('products', products)]
|
|
F --> G[generateProductsPage()]
|
|
G --> H[attachEventListeners()]
|
|
|
|
H --> I{User Action}
|
|
|
|
I -->|Click Product| J[showProductDetail(id)]
|
|
I -->|Add to Cart| K[handleAddToCart(id)]
|
|
I -->|Navigate to Cart| L[navigateToCart()]
|
|
I -->|Navigate to Products| M[navigateToProducts()]
|
|
|
|
J --> N[getProductById(id)]
|
|
N --> O[updateView('product-detail', product)]
|
|
O --> P[generateProductDetailPage()]
|
|
P --> Q[attachEventListeners()]
|
|
Q --> I
|
|
|
|
K --> R[addToCart(id)]
|
|
R --> S[saveCartToStorage()]
|
|
S --> T[updateCartDisplay()]
|
|
T --> U[updateView('cart', cartData)]
|
|
U --> V[updateView('cart-count', count)]
|
|
V --> W[showNotification()]
|
|
W --> I
|
|
|
|
L --> X[getCart() + getCartTotal() + getCartItemCount()]
|
|
X --> Y[updateView('cart', cartData)]
|
|
Y --> Z[generateCartPage()]
|
|
Z --> AA[attachEventListeners()]
|
|
AA --> I
|
|
|
|
M --> BB[getAllProducts()]
|
|
BB --> CC[updateView('products', products)]
|
|
CC --> DD[generateProductsPage()]
|
|
DD --> EE[attachEventListeners()]
|
|
EE --> I
|
|
|
|
I -->|Change Quantity| FF[changeQuantity(id, change)]
|
|
FF --> GG[updateCartQuantity(id, newQty)]
|
|
GG --> HH[saveCartToStorage()]
|
|
HH --> T
|
|
|
|
I -->|Remove from Cart| II[handleRemoveFromCart(id)]
|
|
II --> JJ[removeFromCart(id)]
|
|
JJ --> KK[saveCartToStorage()]
|
|
KK --> T
|
|
|
|
I -->|Clear Cart| LL[handleClearCart()]
|
|
LL --> MM{Confirm?}
|
|
MM -->|Yes| NN[clearCart()]
|
|
MM -->|No| I
|
|
NN --> OO[saveCartToStorage()]
|
|
OO --> T
|
|
|
|
style A fill:#e1f5fe
|
|
style F fill:#f3e5f5
|
|
style O fill:#f3e5f5
|
|
style U fill:#f3e5f5
|
|
style Y fill:#f3e5f5
|
|
style CC fill:#f3e5f5
|
|
|
|
classDef modelClass fill:#e8f5e8
|
|
classDef viewClass fill:#fff3e0
|
|
classDef controllerClass fill:#fce4ec
|
|
|
|
class C,D,E,N,R,S,X,BB,GG,HH,JJ,KK,NN,OO modelClass
|
|
class F,G,O,P,U,Y,Z,CC,DD viewClass
|
|
class J,K,L,M,FF,II,LL,T controllerClass
|
|
```
|
|
|
|
## Component Responsibilities
|
|
|
|
### Model (Green)
|
|
- Data storage and retrieval
|
|
- Cart management
|
|
- LocalStorage operations
|
|
- Product data
|
|
|
|
### View (Orange)
|
|
- HTML generation
|
|
- DOM manipulation
|
|
- Event listener attachment
|
|
- User interface rendering
|
|
|
|
### Controller (Pink)
|
|
- User interaction handling
|
|
- Business logic
|
|
- Coordination between Model and View
|
|
- Navigation management
|
|
|
|
## Data Flow Summary
|
|
|
|
1. **Initialization**: App loads, initializes cart from localStorage, renders products
|
|
2. **User Interactions**: Click events trigger controller functions
|
|
3. **Model Updates**: Controller modifies data through model functions
|
|
4. **View Updates**: Model changes trigger view re-rendering via updateView()
|
|
5. **Persistence**: Cart changes are automatically saved to localStorage |