inital checkin
This commit is contained in:
80
templates/store/cart.html
Normal file
80
templates/store/cart.html
Normal file
@@ -0,0 +1,80 @@
|
||||
{% extends 'base/layout.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div style="max-width: 800px; margin: 0 auto;">
|
||||
<h1 style="margin-bottom: 2rem;">Shopping Cart</h1>
|
||||
|
||||
{% if cart and cart.items.count > 0 %}
|
||||
<div
|
||||
style="background: var(--card-bg); border-radius: 0.5rem; border: 1px solid var(--border-color); overflow: hidden;">
|
||||
{% for item in cart.items.all %}
|
||||
<div
|
||||
style="display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid var(--border-color);">
|
||||
<div style="display: flex; gap: 1.5rem; align-items: center;">
|
||||
{% if item.listing %}
|
||||
{% if item.listing.card.image_url %}
|
||||
<img src="{{ item.listing.card.image_url }}"
|
||||
style="width: 50px; height: 70px; object-fit: cover; border-radius: 4px;">
|
||||
{% endif %}
|
||||
<div>
|
||||
<h3 style="margin: 0; font-size: 1.125rem;">{{ item.listing.card.name }}</h3>
|
||||
<p style="margin: 0.25rem 0 0; color: #94a3b8; font-size: 0.875rem;">
|
||||
{{ item.listing.get_condition_display }}
|
||||
{% if item.listing.is_foil %}• Foil{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
{% else %}
|
||||
{% if item.pack_listing.image_url %}
|
||||
<img src="{{ item.pack_listing.image_url }}" style="width: 50px; height: 70px; object-fit: cover; border-radius: 4px;">
|
||||
{% else %}
|
||||
<div style="width: 50px; height: 70px; background: #6366f1; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">📦</div>
|
||||
{% endif %}
|
||||
<div>
|
||||
<h3 style="margin: 0; font-size: 1.125rem;">{{ item.pack_listing.name }}</h3>
|
||||
<p style="margin: 0.25rem 0 0; color: #94a3b8; font-size: 0.875rem;">Booster Pack</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 2rem;">
|
||||
<div style="text-align: right;">
|
||||
<div style="font-weight: 600;">{{ item.quantity }} x ${% if item.listing %}{{ item.listing.price }}{% else %}{{ item.pack_listing.price }}{% endif %}</div>
|
||||
</div>
|
||||
<div style="font-weight: 700; font-size: 1.25rem;">
|
||||
${{ item.total_price }}
|
||||
</div>
|
||||
<a href="{% url 'store:remove_from_cart' item.id %}"
|
||||
style="color: #ef4444; text-decoration: none; font-size: 1.25rem;">×</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div style="padding: 1rem 1.5rem; background: rgba(0,0,0,0.1); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<a href="{% url 'store:toggle_insurance' %}" style="text-decoration: none; display: flex; align-items: center; gap: 0.5rem; color: var(--text-color);">
|
||||
<div style="width: 20px; height: 20px; border: 2px solid var(--border-color); border-radius: 4px; display: flex; align-items: center; justify-content: center; background: {% if cart.insurance %}var(--primary-color, #3b82f6){% else %}transparent{% endif %};">
|
||||
{% if cart.insurance %}<span style="color: white; font-size: 14px;">✓</span>{% endif %}
|
||||
</div>
|
||||
<span><strong>Add Shipping Insurance</strong> (Protects against damage/loss)</span>
|
||||
</a>
|
||||
</div>
|
||||
<span>+$5.00</span>
|
||||
</div>
|
||||
<div
|
||||
style="padding: 1.5rem; background: rgba(0,0,0,0.2); display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="font-size: 1.25rem; font-weight: 600;">Total</span>
|
||||
<span style="font-size: 1.5rem; font-weight: 800;">${{ cart.total_price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2rem; text-align: right;">
|
||||
<a href="{% url 'store:checkout' %}" class="btn" style="padding: 1rem 2rem; font-size: 1.125rem;">Proceed to Checkout</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="text-align: center; padding: 4rem; background: var(--card-bg); border-radius: 0.5rem; color: #94a3b8;">
|
||||
<p style="font-size: 1.25rem; margin-bottom: 1.5rem;">Your cart is empty.</p>
|
||||
<a href="{% url 'store:card_list' %}" class="btn">Browse Cards</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user