148 lines
6.7 KiB
HTML
148 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="breadcrumb reveal">
|
||
<a href="{% url 'home' %}">Home</a>
|
||
<span class="breadcrumb-separator">/</span>
|
||
<a href="{% url 'product_list' %}">Products</a>
|
||
<span class="breadcrumb-separator">/</span>
|
||
<span>{{ product.name }}</span>
|
||
</section>
|
||
|
||
<div class="product-detail-page">
|
||
<div class="product-detail-card reveal">
|
||
<div class="product-detail-image">
|
||
{% if product.image %}
|
||
<img src="{{ product.image.url }}" alt="{{ product.name }}">
|
||
{% else %}
|
||
<div class="image-placeholder">No image available</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="product-detail-info">
|
||
<div class="detail-head">
|
||
<h1>{{ product.name }}</h1>
|
||
{% if product.featured %}
|
||
<span class="badge-pill featured-badge">Featured</span>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="detail-meta">
|
||
<span>⭐ {{ product.rating|default:0|floatformat:1 }}/5</span>
|
||
<span>Category: {{ product.category }}</span>
|
||
<span>Stock: {{ product.stock|default:0 }}</span>
|
||
{% if product.discount_percent %}<span>Save {{ product.discount_percent }}%</span>{% endif %}
|
||
</div>
|
||
|
||
<div class="product-pricing">
|
||
<span class="price">Rs. {{ product.display_price|floatformat:2 }}</span>
|
||
{% if product.discount_price %}
|
||
<span class="original-price">Rs. {{ product.price|floatformat:2 }}</span>
|
||
<span class="savings">Save Rs. {{ product.savings|floatformat:2 }}</span>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<p class="product-description">{{ product.description }}</p>
|
||
|
||
<div class="product-extras">
|
||
<div>
|
||
<strong>Fast delivery</strong>
|
||
<span>2–4 business days</span>
|
||
</div>
|
||
<div>
|
||
<strong>Secure checkout</strong>
|
||
<span>Wallet, COD, and verified payment flow</span>
|
||
</div>
|
||
<div>
|
||
<strong>Easy return</strong>
|
||
<span>Clear order tracking and customer support</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-usp-grid">
|
||
<article class="detail-usp-card reveal">
|
||
<strong>Smart purchase flow</strong>
|
||
<p>Move from product to cart, checkout, payment, and order tracking with cleaner visual feedback.</p>
|
||
</article>
|
||
<article class="detail-usp-card reveal">
|
||
<strong>Flexible payment</strong>
|
||
<p>Choose eSewa, Khalti, or cash on delivery, then change payment before shipment when supported.</p>
|
||
</article>
|
||
<article class="detail-usp-card reveal">
|
||
<strong>Order visibility</strong>
|
||
<p>Review payment status, timeline, and next actions from a more advanced order dashboard.</p>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="product-actions">
|
||
<a href="{% url 'product_list' %}" class="btn btn-secondary">Back to Products</a>
|
||
{% if user.is_authenticated %}
|
||
<a href="{% url 'toggle_wishlist' product.id %}?next={{ request.path|urlencode }}" class="btn btn-secondary">{% if in_wishlist %}Saved to Wishlist{% else %}Save to Wishlist{% endif %}</a>
|
||
{% endif %}
|
||
{% if product.stock > 0 %}
|
||
<a href="{% url 'add_to_cart' product.id %}?next={{ request.path|urlencode }}" class="btn btn-secondary">Add to Cart</a>
|
||
<a href="{% url 'buy_now' product.id %}" class="btn btn-primary">Buy Now</a>
|
||
{% else %}
|
||
<span class="btn btn-primary disabled">Sold Out</span>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="summary-box detail-support-card reveal">
|
||
<div class="payment-summary-header">
|
||
<div>
|
||
<h3>Why this page feels better</h3>
|
||
<p class="payment-caption">A cleaner, more informative product decision area.</p>
|
||
</div>
|
||
<span class="payment-badge">Advanced UI</span>
|
||
</div>
|
||
<div class="summary-row"><span>Listing type</span><strong>{{ product.listing_type|title }}</strong></div>
|
||
<div class="summary-row"><span>Price now</span><strong>Rs. {{ product.display_price|floatformat:2 }}</strong></div>
|
||
<div class="summary-row"><span>Wishlist support</span><strong>{% if user.is_authenticated %}Available{% else %}Login required{% endif %}</strong></div>
|
||
<div class="summary-row"><span>Checkout state</span><strong>{% if product.available %}Ready{% else %}Unavailable{% endif %}</strong></div>
|
||
<div class="cart-summary-note">
|
||
<strong>Same theme, more depth.</strong>
|
||
<p>The product page now highlights trust, pricing, and next steps before the customer commits.</p>
|
||
</div>
|
||
</aside>
|
||
|
||
{% if related_products %}
|
||
<section class="related-products section-shell reveal">
|
||
<div class="section-heading">
|
||
<div>
|
||
<h2>Related products</h2>
|
||
<p>Keep exploring similar options without losing the same design language.</p>
|
||
</div>
|
||
</div>
|
||
<div class="cards related-grid">
|
||
{% for related in related_products %}
|
||
<div class="card small-card reveal">
|
||
{% if related.image %}
|
||
<img src="{{ related.image.url }}" alt="{{ related.name }}">
|
||
{% else %}
|
||
<div class="product-image-placeholder">No image</div>
|
||
{% endif %}
|
||
<div class="card-content">
|
||
<div class="tag-row">
|
||
{% if related.featured %}<span class="tag badge-pill">Featured</span>{% endif %}
|
||
<span class="tag category-tag">{{ related.category }}</span>
|
||
{% if related.discount_percent %}<span class="tag savings-tag">Save {{ related.discount_percent }}%</span>{% endif %}
|
||
</div>
|
||
<h3>{{ related.name }}</h3>
|
||
<p class="price">Rs. {{ related.display_price|floatformat:2 }}</p>
|
||
<a href="{% url 'product_detail' related.id %}" class="btn btn-secondary">View</a>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</section>
|
||
{% endif %}
|
||
</div>
|
||
{% endblock %}
|