96 lines
3.7 KiB
HTML
96 lines
3.7 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block extra_head %}
|
|
<link rel="stylesheet" href="{% static 'css/product.css' %}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="breadcrumb">
|
|
<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">
|
|
<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 }}/5</span>
|
|
<span>Category: {{ product.category }}</span>
|
|
<span>Stock: {{ product.stock|default:0 }}</span>
|
|
</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>Fast delivery</div>
|
|
<div>Secure checkout</div>
|
|
<div>Easy return</div>
|
|
</div>
|
|
|
|
<div class="product-actions">
|
|
<a href="{% url 'product_list' %}" class="btn btn-secondary">Back to Products</a>
|
|
{% 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>
|
|
|
|
{% if related_products %}
|
|
<section class="related-products">
|
|
<h2>Related products</h2>
|
|
<div class="cards related-grid">
|
|
{% for related in related_products %}
|
|
<div class="card small-card">
|
|
{% 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>
|
|
</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 %}
|