143 lines
6.7 KiB
HTML
143 lines
6.7 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block extra_head %}
|
|
<link rel="stylesheet" href="{% static 'css/product.css' %}?v=20260520">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="page-header page-header--split reveal">
|
|
<div>
|
|
<p class="page-eyebrow">Cart review</p>
|
|
<h1>Your Cart</h1>
|
|
<p>Review your items, apply coupons, and move to checkout with a more informative layout.</p>
|
|
</div>
|
|
<div class="page-header-actions">
|
|
<a href="{% url 'product_list' %}" class="btn btn-secondary">Continue Shopping</a>
|
|
{% if products and user.is_authenticated %}
|
|
<a href="{% url 'checkout' %}" class="btn btn-primary">Checkout</a>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
|
|
{% if products %}
|
|
<section class="cart-insight-strip reveal">
|
|
<article class="cart-insight-card reveal">
|
|
<span class="shop-stat-label">Items in cart</span>
|
|
<strong class="shop-stat-value">{{ item_count }}</strong>
|
|
<small class="shop-stat-note">Across {{ products|length }} product line{{ products|length|pluralize }}.</small>
|
|
</article>
|
|
<article class="cart-insight-card reveal">
|
|
<span class="shop-stat-label">Savings captured</span>
|
|
<strong class="shop-stat-value">Rs. {{ saved_amount|floatformat:2 }}</strong>
|
|
<small class="shop-stat-note">Discounts already reflected from current product pricing.</small>
|
|
</article>
|
|
<article class="cart-insight-card reveal">
|
|
<span class="shop-stat-label">Checkout readiness</span>
|
|
<strong class="shop-stat-value">Secure</strong>
|
|
<small class="shop-stat-note">Proceed to delivery details, then choose eSewa, Khalti, or COD.</small>
|
|
</article>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<div class="cart-page">
|
|
<div class="cart-items">
|
|
{% if products %}
|
|
{% for p in products %}
|
|
<div class="cart-card reveal">
|
|
<div class="cart-card-left">
|
|
<div class="cart-product">
|
|
<div class="cart-product-avatar">
|
|
{% if p.image %}
|
|
<img src="{{ p.image.url }}" alt="{{ p.name }}">
|
|
{% else %}
|
|
<span class="avatar-placeholder">{{ p.name|slice:":1"|upper }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="cart-product-copy">
|
|
<div class="tag-row">
|
|
{% if p.featured %}<span class="tag badge-pill">Featured</span>{% endif %}
|
|
<span class="tag category-tag">{{ p.category }}</span>
|
|
{% if p.discount_percent %}<span class="tag savings-tag">Save {{ p.discount_percent }}%</span>{% endif %}
|
|
</div>
|
|
<h3>{{ p.name }}</h3>
|
|
<p class="cart-meta">Unit Rs. {{ p.display_price|floatformat:2 }} • Stock {{ p.stock }}</p>
|
|
<p class="product-card-caption">Keep quantities updated here before moving into delivery and payment.</p>
|
|
</div>
|
|
</div>
|
|
<form action="{% url 'update_cart' p.id %}" method="post" class="cart-qty-form">
|
|
{% csrf_token %}
|
|
<label>Qty</label>
|
|
<input type="number" name="quantity" value="{{ p.qty }}" min="0" max="{{ p.stock }}">
|
|
<button type="submit" class="btn btn-secondary">Update</button>
|
|
</form>
|
|
</div>
|
|
<div class="cart-card-right">
|
|
<p>Subtotal</p>
|
|
<strong>Rs. {{ p.subtotal|floatformat:2 }}</strong>
|
|
<div class="cart-actions">
|
|
<a href="{% url 'remove_from_cart' p.id %}" class="btn btn-secondary">Remove</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<h2>Your cart is empty.</h2>
|
|
<p>Browse products and add items to start the improved checkout experience.</p>
|
|
<a href="{% url 'product_list' %}" class="btn btn-primary">Browse Products</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if products %}
|
|
<aside class="cart-summary">
|
|
<div class="summary-box reveal">
|
|
<div class="payment-summary-header">
|
|
<div>
|
|
<h2>Order Summary</h2>
|
|
<p class="payment-caption">Review totals, coupon impact, and the next checkout step.</p>
|
|
</div>
|
|
<span class="payment-badge">Ready</span>
|
|
</div>
|
|
|
|
<form action="{% url 'apply_coupon' %}" method="post" class="coupon-form">
|
|
{% csrf_token %}
|
|
<input type="text" name="coupon_code" placeholder="Coupon code (HAMRO10)" class="field-input" value="{{ coupon_code }}">
|
|
<div class="checkout-form-actions">
|
|
<button type="submit" class="btn btn-secondary">Apply</button>
|
|
{% if coupon_code %}
|
|
<a href="{% url 'remove_coupon' %}" class="btn btn-secondary">Remove</a>
|
|
{% endif %}
|
|
</div>
|
|
</form>
|
|
|
|
{% if coupon %}
|
|
<div class="cart-summary-note cart-summary-note--success">
|
|
<strong>{{ coupon.code }} is active.</strong>
|
|
<p>{{ coupon.discount_percent|floatformat:0 }}% coupon is attached to this cart summary.</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="summary-row"><span>Subtotal</span><span>Rs. {{ total|floatformat:2 }}</span></div>
|
|
<div class="summary-row"><span>Shipping</span><span>Rs. {{ shipping|floatformat:2 }}</span></div>
|
|
<div class="summary-row"><span>Discount</span><span>- Rs. {{ discount|floatformat:2 }}</span></div>
|
|
<div class="summary-row total-row"><span>Total</span><span>Rs. {{ grand_total|floatformat:2 }}</span></div>
|
|
|
|
<div class="cart-summary-note">
|
|
<strong>Special checkout flow</strong>
|
|
<p>Delivery details come first, then you choose a verified payment option without losing the order review.</p>
|
|
</div>
|
|
|
|
{% if user.is_authenticated %}
|
|
<a href="{% url 'checkout' %}" class="btn btn-primary">Proceed to Checkout</a>
|
|
{% else %}
|
|
<p>Please <a href="{% url 'login' %}">login</a> to place your order.</p>
|
|
{% endif %}
|
|
<a href="{% url 'product_list' %}" class="btn btn-secondary">Keep Shopping</a>
|
|
</div>
|
|
</aside>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|