410 lines
20 KiB
HTML
410 lines
20 KiB
HTML
{% extends "marketplace/layout.html" %}
|
|
{% block title %}Shopping Cart - Mycelium Marketplace{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.hover-shadow:hover {
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.add-recommended-btn {
|
|
transition: all 0.2s ease;
|
|
min-width: 60px;
|
|
}
|
|
|
|
.add-recommended-btn:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block marketplace_content %}
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2"><i class="bi bi-cart3 me-2"></i>Shopping Cart</h1>
|
|
<div class="btn-toolbar mb-2 mb-md-0">
|
|
<div class="btn-group me-2">
|
|
<a href="/marketplace" class="btn btn-sm btn-outline-secondary">
|
|
<i class="bi bi-arrow-left me-1"></i>Continue Shopping
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if cart.is_empty %}
|
|
<!-- Empty Cart State -->
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8 text-center">
|
|
<div class="card border-0">
|
|
<div class="card-body py-5">
|
|
<i class="bi bi-cart-x display-1 text-muted mb-4"></i>
|
|
<h3 class="text-muted mb-3">Your cart is empty</h3>
|
|
<p class="text-muted mb-4">Looks like you haven't added any items to your cart yet. Browse our marketplace to find the perfect Mycelium resources for your needs.</p>
|
|
<a href="/marketplace" class="btn btn-primary btn-lg">
|
|
<i class="bi bi-shop me-2"></i>Browse Marketplace
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<!-- Cart with Items -->
|
|
<div class="row">
|
|
<!-- Cart Items -->
|
|
<div class="col-lg-8">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Cart Items ({{ cart.item_count }})</h5>
|
|
<button class="btn btn-sm btn-outline-danger" id="clearCartBtn">
|
|
<i class="bi bi-trash me-1"></i>Clear Cart
|
|
</button>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
{% for item in cart.items %}
|
|
<div class="cart-item border-bottom p-4" data-product-id="{{ item.product_id }}">
|
|
<div class="row align-items-center">
|
|
<!-- Product Info -->
|
|
<div class="col-md-6">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0 me-3">
|
|
<div class="bg-light rounded d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
|
{% if item.product_category == "compute" %}
|
|
<i class="bi bi-cpu fs-4 text-primary"></i>
|
|
{% elif item.product_category == "hardware" %}
|
|
<i class="bi bi-hdd-rack fs-4 text-success"></i>
|
|
{% elif item.product_category == "gateways" %}
|
|
<i class="bi bi-globe fs-4 text-info"></i>
|
|
{% elif item.product_category == "applications" %}
|
|
<i class="bi bi-app fs-4 text-warning"></i>
|
|
{% elif item.product_category == "services" %}
|
|
<i class="bi bi-person-workspace fs-4 text-secondary"></i>
|
|
{% else %}
|
|
<i class="bi bi-box fs-4 text-muted"></i>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-1">{{ item.product_name }}</h6>
|
|
<p class="text-muted mb-1 small">{{ item.provider_name }}</p>
|
|
<span class="badge bg-light text-dark">{{ item.product_category|title }}</span>
|
|
|
|
{% if item.specifications %}
|
|
<div class="mt-2">
|
|
<small class="text-muted">Specifications:</small>
|
|
<div class="mt-1">
|
|
{% for key, value in item.specifications %}
|
|
<span class="badge bg-secondary me-1">{{ key }}: {{ value }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quantity Controls -->
|
|
<div class="col-md-3">
|
|
<div class="d-flex align-items-center justify-content-center">
|
|
<button class="btn btn-sm btn-outline-secondary" data-product-id="{{ item.product_id }}" data-action="decrease">
|
|
<i class="bi bi-dash"></i>
|
|
</button>
|
|
<span class="mx-3 fw-bold">{{ item.quantity }}</span>
|
|
<button class="btn btn-sm btn-outline-secondary" data-product-id="{{ item.product_id }}" data-action="increase">
|
|
<i class="bi bi-plus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Price and Actions -->
|
|
<div class="col-md-3">
|
|
<div class="text-end">
|
|
<div class="mb-2">
|
|
<small class="text-muted">Unit: {{ item.unit_price }}</small>
|
|
</div>
|
|
<div class="fw-bold text-primary mb-2">{{ item.total_price }}</div>
|
|
<button class="btn btn-sm btn-outline-danger" data-product-id="{{ item.product_id }}" data-action="remove">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cart Summary -->
|
|
<div class="col-lg-4">
|
|
<div class="card sticky-top" style="top: 100px;">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Order Summary</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Currency Selector -->
|
|
<div class="mb-3">
|
|
<label class="form-label small text-muted">Display Currency</label>
|
|
<select class="form-select form-select-sm" id="currencySelector">
|
|
{% for currency in currencies %}
|
|
<option value="{{ currency.code }}" {% if currency.code == user_currency %}selected{% endif %}>
|
|
{{ currency.symbol }} {{ currency.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<!-- Price Breakdown -->
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>Subtotal ({{ cart.item_count }} items)</span>
|
|
<span>{{ cart.subtotal }}</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span class="text-muted">Estimated fees</span>
|
|
<span class="text-muted">Calculated at checkout</span>
|
|
</div>
|
|
<hr>
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<span class="fw-bold">Total</span>
|
|
<span class="fw-bold text-primary fs-5">{{ cart.total }}</span>
|
|
</div>
|
|
|
|
<!-- Guest User Notice -->
|
|
{% if not user_json %}
|
|
<div class="alert alert-info mb-3">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-info-circle me-2"></i>
|
|
<div>
|
|
<strong>Almost ready to checkout!</strong><br>
|
|
<small>You'll need to log in or create an account to complete your purchase. Don't worry - your cart items will be saved!</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Checkout Button -->
|
|
<div class="d-grid">
|
|
{% if user_json %}
|
|
<a href="/checkout" class="btn btn-primary btn-lg">
|
|
<i class="bi bi-credit-card me-2"></i>Proceed to Checkout
|
|
</a>
|
|
{% else %}
|
|
<button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#guestCheckoutModal">
|
|
<i class="bi bi-credit-card me-2"></i>Proceed to Checkout
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Security Notice -->
|
|
<div class="mt-3 p-3 bg-light rounded">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-shield-check text-success me-2"></i>
|
|
<small class="text-muted">Secure checkout with 256-bit SSL encryption</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recommended Products -->
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h6 class="mb-0"><i class="bi bi-stars me-2"></i>Recommended for you</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-2">
|
|
{% for product_data in recommended_products %}
|
|
<div class="col-12">
|
|
<div class="d-flex align-items-center p-3 border rounded hover-shadow" style="transition: all 0.2s ease;">
|
|
<i class="bi bi-cpu text-primary me-3 fs-4"></i>
|
|
<div class="flex-grow-1">
|
|
<div class="fw-bold">{{ product_data.product.name }}</div>
|
|
<small class="text-muted">{{ product_data.product.description }}</small>
|
|
<div class="text-primary fw-bold mt-1">{{ product_data.formatted_price }}</div>
|
|
</div>
|
|
<button class="btn btn-sm btn-primary add-recommended-btn"
|
|
data-product-id="{{ product_data.product.id }}"
|
|
data-product-name="{{ product_data.product.name }}"
|
|
data-product-price="{{ product_data.price.display_amount }}"
|
|
data-product-category="{{ product_data.product.category_id }}">
|
|
<i class="bi bi-plus me-1"></i>Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="text-center mt-3">
|
|
<a href="/marketplace" class="btn btn-sm btn-outline-secondary">
|
|
<i class="bi bi-shop me-1"></i>Browse All Products
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Clear Cart Confirmation Modal -->
|
|
<div class="modal fade" id="clearCartModal" tabindex="-1" aria-labelledby="clearCartModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-danger text-white">
|
|
<h5 class="modal-title" id="clearCartModalLabel">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>Clear Entire Cart
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<i class="bi bi-cart-x text-danger me-3" style="font-size: 2rem;"></i>
|
|
<div>
|
|
<p class="mb-1 fw-bold">Are you sure you want to clear your entire cart?</p>
|
|
<p class="mb-0 text-muted small">This action will remove all items from your cart and cannot be undone.</p>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-warning d-flex align-items-center">
|
|
<i class="bi bi-info-circle me-2"></i>
|
|
<small>All {{ cart.item_count }} items will be permanently removed from your cart.</small>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
<i class="bi bi-x-circle me-1"></i>Cancel
|
|
</button>
|
|
<button type="button" class="btn btn-danger" id="confirmClearCartBtn">
|
|
<i class="bi bi-trash me-1"></i>Clear Cart
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Remove Item Confirmation Modal -->
|
|
<div class="modal fade" id="removeItemModal" tabindex="-1" aria-labelledby="removeItemModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-warning text-dark">
|
|
<h5 class="modal-title" id="removeItemModalLabel">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>Remove Item
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<i class="bi bi-trash text-warning me-3" style="font-size: 2rem;"></i>
|
|
<div>
|
|
<p class="mb-1 fw-bold">Remove this item from your cart?</p>
|
|
<p class="mb-0 text-muted small">This action cannot be undone.</p>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-info d-flex align-items-center">
|
|
<i class="bi bi-info-circle me-2"></i>
|
|
<small>You can always add this item back later from the marketplace.</small>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
<i class="bi bi-x-circle me-1"></i>Cancel
|
|
</button>
|
|
<button type="button" class="btn btn-warning" id="confirmRemoveItemBtn">
|
|
<i class="bi bi-trash me-1"></i>Remove Item
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div id="loadingOverlay" class="position-fixed top-0 start-0 w-100 h-100 d-none" style="background: rgba(0,0,0,0.5); z-index: 9999;">
|
|
<div class="d-flex justify-content-center align-items-center h-100">
|
|
<div class="spinner-border text-light" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{{ super() }}
|
|
<script src="/static/js/cart-marketplace.js"></script>
|
|
{% endblock %}
|
|
|
|
<!-- Guest Checkout Modal -->
|
|
<div class="modal fade" id="guestCheckoutModal" tabindex="-1" aria-labelledby="guestCheckoutModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-primary text-white">
|
|
<h5 class="modal-title" id="guestCheckoutModalLabel">
|
|
<i class="bi bi-person-check me-2"></i>Complete Your Purchase
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="text-center mb-4">
|
|
<i class="bi bi-cart-check text-primary" style="font-size: 3rem;"></i>
|
|
<h4 class="mt-3 mb-2">Almost there!</h4>
|
|
<p class="text-muted">You're just one step away from completing your purchase.</p>
|
|
</div>
|
|
|
|
<div class="alert alert-info d-flex align-items-center mb-4">
|
|
<i class="bi bi-shield-check me-2"></i>
|
|
<div>
|
|
<strong>Your cart is safe!</strong><br>
|
|
<small>All items in your cart will be automatically saved when you log in or create an account.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3">
|
|
<div class="col-12">
|
|
<h6 class="mb-3">Choose an option to continue:</h6>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-primary">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-person-fill text-primary mb-2" style="font-size: 2rem;"></i>
|
|
<h6>Already have an account?</h6>
|
|
<p class="text-muted small mb-3">Sign in to access your saved information and complete checkout quickly.</p>
|
|
<button type="button" class="btn btn-primary w-100" id="guestLoginBtn">
|
|
<i class="bi bi-box-arrow-in-right me-2"></i>Log In
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-success">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-person-plus-fill text-success mb-2" style="font-size: 2rem;"></i>
|
|
<h6>New to Mycelium?</h6>
|
|
<p class="text-muted small mb-3">Create a free account to manage your orders and access exclusive features.</p>
|
|
<button type="button" class="btn btn-success w-100" id="guestRegisterBtn">
|
|
<i class="bi bi-person-plus me-2"></i>Create Account
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 p-3 bg-light rounded">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto">
|
|
<i class="bi bi-lightning-charge text-warning" style="font-size: 1.5rem;"></i>
|
|
</div>
|
|
<div class="col">
|
|
<h6 class="mb-1">Quick & Secure</h6>
|
|
<small class="text-muted">Registration takes less than 30 seconds. Your payment information is protected with enterprise-grade security.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-light">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
|
|
<i class="bi bi-arrow-left me-2"></i>Continue Shopping
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |