190 lines
7.9 KiB
HTML
190 lines
7.9 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 reveal">
|
|
<div>
|
|
<p class="page-eyebrow">Step 1 of 2</p>
|
|
<h1>Checkout</h1>
|
|
<p>Add delivery details now, capture GPS if you want, and choose your verified payment method on the next screen.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="checkout-progress reveal">
|
|
<div class="checkout-progress-step is-active">
|
|
<strong>1</strong>
|
|
<span>Delivery details</span>
|
|
</div>
|
|
<div class="checkout-progress-step">
|
|
<strong>2</strong>
|
|
<span>Payment method</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="payment-page">
|
|
<div class="order-detail-box checkout-panel reveal">
|
|
<div class="payment-panel-heading">
|
|
<div>
|
|
<p class="payment-step">Delivery & review</p>
|
|
<h2>Confirm your shipping details</h2>
|
|
<p class="payment-caption">Your saved account address and GPS support can be used here automatically.</p>
|
|
</div>
|
|
<span class="payment-badge">Secure checkout</span>
|
|
</div>
|
|
|
|
<div class="checkout-overview-grid">
|
|
<article class="checkout-side-card reveal">
|
|
<span class="shop-stat-label">Line items</span>
|
|
<strong class="shop-stat-value">{{ products|length }}</strong>
|
|
<small class="shop-stat-note">Products in this checkout step.</small>
|
|
</article>
|
|
<article class="checkout-side-card reveal">
|
|
<span class="shop-stat-label">Order total</span>
|
|
<strong class="shop-stat-value">Rs. {{ total|floatformat:2 }}</strong>
|
|
<small class="shop-stat-note">Final payment selection happens next.</small>
|
|
</article>
|
|
<article class="checkout-side-card reveal">
|
|
<span class="shop-stat-label">Delivery profile</span>
|
|
<strong class="shop-stat-value">{% if delivery.location_label %}Saved{% else %}Manual{% endif %}</strong>
|
|
<small class="shop-stat-note">Use your saved address, GPS pin, or edit the fields below.</small>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="order-items checkout-review-list">
|
|
{% for p in products %}
|
|
<div class="order-item-row reveal">
|
|
<div>
|
|
<h4>{{ p.name }}</h4>
|
|
<p>Quantity: {{ p.qty }}</p>
|
|
</div>
|
|
<strong>Rs. {{ p.subtotal|floatformat:2 }}</strong>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="summary-box payment-summary reveal">
|
|
<div class="payment-summary-header">
|
|
<div>
|
|
<h3>Delivery Details</h3>
|
|
<p class="payment-caption">Used for shipping updates, payment confirmation, and smoother repeat orders.</p>
|
|
</div>
|
|
<span class="payment-badge">Order total</span>
|
|
</div>
|
|
|
|
<div class="summary-row total-row">
|
|
<span>Total</span>
|
|
<span>Rs. {{ total|floatformat:2 }}</span>
|
|
</div>
|
|
|
|
{% if delivery_location %}
|
|
<div class="cart-summary-note">
|
|
<strong>Saved location detected</strong>
|
|
<p>Your current delivery preference is set to {{ delivery_location }}.</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if delivery_shortcuts %}
|
|
<div class="checkout-shortcuts">
|
|
<div class="checkout-shortcuts-head">
|
|
<div>
|
|
<strong>Quick delivery shortcuts</strong>
|
|
<p>Reuse your saved profile details or a recent delivery point from an earlier order.</p>
|
|
</div>
|
|
{% if delivery.selected_shortcut_id %}
|
|
<span class="payment-badge">Shortcut applied</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="checkout-shortcuts-grid">
|
|
{% for shortcut in delivery_shortcuts %}
|
|
<a href="{% url 'checkout' %}?delivery_shortcut={{ shortcut.id }}" class="checkout-shortcut-card {% if shortcut.selected %}is-selected{% endif %}">
|
|
<div class="checkout-shortcut-top">
|
|
<strong>{{ shortcut.title|truncatechars:42 }}</strong>
|
|
<span>{{ shortcut.badge }}</span>
|
|
</div>
|
|
<p>{{ shortcut.address|linebreaksbr }}</p>
|
|
<div class="checkout-shortcut-meta">
|
|
<span>{{ shortcut.phone }}</span>
|
|
<span>{% if shortcut.has_precise_location %}GPS saved{% else %}Manual{% endif %}</span>
|
|
</div>
|
|
{% if shortcut.note %}<small>{{ shortcut.note }}</small>{% endif %}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="post" class="payment-form checkout-form" data-location-form>
|
|
{% csrf_token %}
|
|
<input type="hidden" name="selected_shortcut_id" value="{{ delivery.selected_shortcut_id|default:'' }}">
|
|
<input type="hidden" name="latitude" value="{{ delivery.latitude }}">
|
|
<input type="hidden" name="longitude" value="{{ delivery.longitude }}">
|
|
<input type="hidden" name="location_accuracy_m" value="{{ delivery.location_accuracy_m }}">
|
|
|
|
<div class="field-stack">
|
|
<label for="full_name">Full Name</label>
|
|
<input id="full_name" required type="text" name="full_name" class="field-input" value="{{ delivery.full_name }}" placeholder="Enter receiver name" autocomplete="name">
|
|
</div>
|
|
|
|
<div class="form-grid checkout-form-grid">
|
|
<div class="field-stack">
|
|
<label for="phone">Phone</label>
|
|
<input id="phone" required type="text" name="phone" class="field-input" value="{{ delivery.phone }}" placeholder="Phone number" autocomplete="tel">
|
|
</div>
|
|
|
|
<div class="field-stack">
|
|
<label for="location_label">Delivery Location</label>
|
|
<input id="location_label" type="text" name="location_label" class="field-input" value="{{ delivery.location_label }}" placeholder="Area, city, or landmark" autocomplete="address-level2">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="location-card checkout-location-card">
|
|
<div class="location-card-head">
|
|
<div>
|
|
<strong>GPS-assisted delivery</strong>
|
|
<p class="field-note">Capture your current device location for more precise delivery coordination.</p>
|
|
</div>
|
|
<button type="button" class="btn btn-secondary small" data-geolocate-btn>Use Current GPS</button>
|
|
</div>
|
|
<p class="location-status" data-location-status>
|
|
{% if delivery.latitude and delivery.longitude %}
|
|
GPS coordinates are attached to this checkout.
|
|
{% else %}
|
|
GPS is optional. You can continue with a manual address if you prefer.
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="field-stack field-stack--full">
|
|
<label for="address">Address</label>
|
|
<textarea id="address" required name="address" class="field-input field-textarea" placeholder="Street, city, area, landmark" autocomplete="street-address">{{ delivery.address }}</textarea>
|
|
</div>
|
|
|
|
<div class="field-stack field-stack--full">
|
|
<label for="delivery_notes">Delivery notes (Optional)</label>
|
|
<textarea id="delivery_notes" name="delivery_notes" class="field-input field-textarea field-textarea--compact" placeholder="Gate number, floor, landmark, or delivery instructions">{{ delivery.delivery_notes }}</textarea>
|
|
</div>
|
|
|
|
<label class="checkbox-inline checkbox-inline--solid" for="save_as_default">
|
|
<input id="save_as_default" type="checkbox" name="save_as_default" {% if delivery.save_as_default %}checked{% endif %}>
|
|
<span>Save these details as my default address for faster checkout next time</span>
|
|
</label>
|
|
|
|
<div class="gateway-status-banner info">
|
|
<strong>Next step:</strong>
|
|
<p>After saving delivery details you will choose eSewa, Khalti, cash on delivery, or card fallback when it is configured.</p>
|
|
</div>
|
|
|
|
<div class="checkout-form-actions">
|
|
<button type="submit" class="btn btn-primary">Continue to Payment</button>
|
|
<a href="{% url 'cart' %}" class="btn btn-secondary">Back to Cart</a>
|
|
</div>
|
|
</form>
|
|
</aside>
|
|
</div>
|
|
{% endblock %}
|