| 1 |
{% extends "base.html" %} |
| 2 |
|
| 3 |
{% block title %}Cart ({{ total_items }}) - Makenotwork{% endblock %} |
| 4 |
{% block body_attrs %} class="{{ crate::shell::measure(crate::shell::Measure::Wide) }}"{% endblock %} |
| 5 |
|
| 6 |
{% block content %} |
| 7 |
{% include "partials/site_header.html" %} |
| 8 |
|
| 9 |
<div class="container"> |
| 10 |
<h1 class="page-title">Your Cart</h1> |
| 11 |
|
| 12 |
{% if checkout_status == "partial" %} |
| 13 |
<div class="callout callout--solid-warning mb-pane"> |
| 14 |
<strong>Some purchases completed.</strong> Part of your checkout succeeded, but one or more creators could not be processed. The items below are still in your cart; you can try checking out again. |
| 15 |
</div> |
| 16 |
{% endif %} |
| 17 |
|
| 18 |
{% if seller_groups.is_empty() %} |
| 19 |
<div class="content-section cart-empty raised"> |
| 20 |
<p class="muted mb-section">Your cart is empty.</p> |
| 21 |
<p class="cart-empty-hint">Add items from the Discover page or from your wishlist.</p> |
| 22 |
<a href="/discover" class="btn-primary">Browse Discover</a> |
| 23 |
</div> |
| 24 |
{% else %} |
| 25 |
|
| 26 |
{% if seller_groups.len() > 1 %} |
| 27 |
<div class="cart-multi-bar"> |
| 28 |
<div> |
| 29 |
<strong>{{ total_items }} items from {{ seller_groups.len() }} creators</strong> |
| 30 |
<span class="cart-multi-bar-note">You'll check out with each creator in sequence.</span> |
| 31 |
</div> |
| 32 |
<form action="/stripe/checkout/cart/all" method="post" class="cart-multi-bar-form"> |
| 33 |
{% if let Some(token) = csrf_token %}<input type="hidden" name="_csrf" value="{{ token }}">{% endif %} |
| 34 |
<label class="cart-share-label"> |
| 35 |
<input type="checkbox" name="share_contact" value="true"> Share email |
| 36 |
</label> |
| 37 |
{% if offer_conversion_choice %} |
| 38 |
<label class="cart-share-label"> |
| 39 |
<input type="checkbox" name="conversion_bank" value="true" |
| 40 |
{% if !self.conversion_at_checkout() %}checked{% endif %}> |
| 41 |
Let my bank convert |
| 42 |
</label> |
| 43 |
{% endif %} |
| 44 |
<button type="submit" class="btn-primary" data-loading-text="Redirecting to Stripe...">Checkout All</button> |
| 45 |
</form> |
| 46 |
</div> |
| 47 |
{% endif %} |
| 48 |
|
| 49 |
{% for group in seller_groups %} |
| 50 |
<div class="content-section cart-group raised"> |
| 51 |
<h2 class="cart-group-title"> |
| 52 |
<a href="/u/{{ group.seller_username }}">{{ group.seller_username }}</a> |
| 53 |
</h2> |
| 54 |
<p class="cart-group-count">{{ group.item_count }} item{% if group.item_count != 1 %}s{% endif %}</p> |
| 55 |
|
| 56 |
<div class="scroll-x"> |
| 57 |
<table class="data-table minw-400 well"> |
| 58 |
<thead> |
| 59 |
<tr> |
| 60 |
<th>Item</th> |
| 61 |
<th>Type</th> |
| 62 |
<th class="text-right">Price</th> |
| 63 |
<th></th> |
| 64 |
</tr> |
| 65 |
</thead> |
| 66 |
<tbody> |
| 67 |
{% for item in group.items %} |
| 68 |
<tr id="cart-row-{{ item.item_id }}"> |
| 69 |
<td><a href="/i/{{ item.item_id }}">{{ item.title }}</a></td> |
| 70 |
<td><span class="badge">{{ item.item_type }}</span></td> |
| 71 |
<td class="text-right"> |
| 72 |
{% if item.pwyw_enabled %} |
| 73 |
<div class="cart-pwyw-cell"> |
| 74 |
<span class="cart-pwyw-symbol">{{ group.currency_symbol() }}</span> |
| 75 |
<input type="number" |
| 76 |
class="pwyw-cart-input cart-pwyw-input input--xs w-80 input--numeric" |
| 77 |
data-item-id="{{ item.item_id }}" |
| 78 |
value="{{ item.effective_price_input_value() }}" |
| 79 |
min="{{ item.pwyw_min_dollars() }}" |
| 80 |
step="0.01"> |
| 81 |
</div> |
| 82 |
{% else if item.is_free() %}Free |
| 83 |
{% else %}{{ item.effective_price_display() }} |
| 84 |
{% endif %} |
| 85 |
</td> |
| 86 |
<td> |
| 87 |
<button class="btn-secondary small cart-row-btn" |
| 88 |
hx-delete="/api/cart/{{ item.item_id }}" |
| 89 |
hx-target="#cart-row-{{ item.item_id }}" |
| 90 |
hx-swap="outerHTML" |
| 91 |
hx-confirm="Remove this item from your cart?">Remove</button> |
| 92 |
</td> |
| 93 |
</tr> |
| 94 |
{% endfor %} |
| 95 |
</tbody> |
| 96 |
</table> |
| 97 |
</div> |
| 98 |
|
| 99 |
<div class="cart-group-summary"> |
| 100 |
<div> |
| 101 |
<div class="cart-subtotal"> |
| 102 |
Subtotal: {{ group.subtotal_display() }} |
| 103 |
</div> |
| 104 |
<div class="cart-fee-line"> |
| 105 |
Platform fee: {{ group.currency_symbol() }}0.00 · plus Stripe's processing fee |
| 106 |
</div> |
| 107 |
{% if group.savings_cents > 0 %} |
| 108 |
<div class="cart-savings"> |
| 109 |
Buying together saves {{ group.seller_username }} ~{{ group.savings_display() }} in processing fees vs. separate purchases. |
| 110 |
</div> |
| 111 |
{% endif %} |
| 112 |
</div> |
| 113 |
|
| 114 |
{% if group.stripe_ready %} |
| 115 |
<form action="/stripe/checkout/cart" method="post"> |
| 116 |
{% if let Some(token) = csrf_token %}<input type="hidden" name="_csrf" value="{{ token }}">{% endif %} |
| 117 |
<input type="hidden" name="seller_id" value="{{ group.seller_id }}"> |
| 118 |
<div class="cart-promo-row"> |
| 119 |
<input type="text" name="promo_code" placeholder="Promo code (optional)" |
| 120 |
autocomplete="off" |
| 121 |
class="cart-promo-input input--sm w-180"> |
| 122 |
</div> |
| 123 |
<label class="cart-checkout-share"> |
| 124 |
<input type="checkbox" name="share_contact" value="true"> |
| 125 |
Share my email with {{ group.seller_username }} |
| 126 |
</label> |
| 127 |
{% if group.offer_conversion_choice %} |
| 128 |
<fieldset class="cart-conversion"> |
| 129 |
<legend class="cart-conversion-legend"> |
| 130 |
Prices here are in {{ group.currency }}. If your card is in another currency, someone has to convert it. |
| 131 |
</legend> |
| 132 |
<label class="cart-conversion-option"> |
| 133 |
<input type="radio" name="conversion" value="checkout" |
| 134 |
{% if group.conversion_at_checkout() %}checked{% endif %}> |
| 135 |
<span> |
| 136 |
<strong>Convert at checkout.</strong> |
| 137 |
Stripe converts and shows you the exact total in your own currency |
| 138 |
before you pay. Its rate includes a conversion fee, which Stripe |
| 139 |
sets between 2% and 4%. |
| 140 |
</span> |
| 141 |
</label> |
| 142 |
<label class="cart-conversion-option"> |
| 143 |
<input type="radio" name="conversion" value="bank" |
| 144 |
{% if !group.conversion_at_checkout() %}checked{% endif %}> |
| 145 |
<span> |
| 146 |
<strong>Let my bank convert.</strong> |
| 147 |
You pay in {{ group.currency }} and your card issuer converts at |
| 148 |
its own rate. That rate is set by your bank, so we cannot show it |
| 149 |
to you here or estimate it. |
| 150 |
</span> |
| 151 |
</label> |
| 152 |
</fieldset> |
| 153 |
{% endif %} |
| 154 |
<button type="submit" class="btn-primary" data-loading-text="Redirecting to Stripe...">Checkout ({{ group.item_count }} items)</button> |
| 155 |
</form> |
| 156 |
{% else %} |
| 157 |
<div class="cart-stripe-not-ready"> |
| 158 |
<p>This creator hasn't set up payments yet. You can keep these items in your cart for later, or remove them.</p> |
| 159 |
<button type="button" class="btn-secondary small" |
| 160 |
data-seller-name="{{ group.seller_username }}" |
| 161 |
data-action="onRemoveCartGroup">Remove all from {{ group.seller_username }}</button> |
| 162 |
</div> |
| 163 |
{% endif %} |
| 164 |
</div> |
| 165 |
</div> |
| 166 |
{% endfor %} |
| 167 |
|
| 168 |
{% endif %} |
| 169 |
|
| 170 |
{% if !wishlist_suggestions.is_empty() %} |
| 171 |
<div class="content-section cart-wishlist raised"> |
| 172 |
<h2 class="section-header">From your wishlist</h2> |
| 173 |
<p class="section-lead text-sm dimmed">Add wishlisted items to your cart to buy them together.</p> |
| 174 |
<div class="scroll-x"> |
| 175 |
<table class="data-table minw-400 well"> |
| 176 |
<thead> |
| 177 |
<tr> |
| 178 |
<th>Item</th> |
| 179 |
<th>Creator</th> |
| 180 |
<th class="text-right">Price</th> |
| 181 |
<th></th> |
| 182 |
</tr> |
| 183 |
</thead> |
| 184 |
<tbody> |
| 185 |
{% for item in wishlist_suggestions %} |
| 186 |
<tr id="wish-row-{{ item.item_id }}"> |
| 187 |
<td><a href="/i/{{ item.item_id }}">{{ item.title }}</a></td> |
| 188 |
<td><a href="/u/{{ item.creator }}">{{ item.creator }}</a></td> |
| 189 |
<td class="text-right"> |
| 190 |
{{ item.price_display() }} |
| 191 |
</td> |
| 192 |
<td> |
| 193 |
<button class="btn-primary small cart-row-btn" |
| 194 |
hx-post="/api/cart/{{ item.item_id }}" |
| 195 |
data-after-always="label-added" data-after="fade-row">Add to Cart</button> |
| 196 |
</td> |
| 197 |
</tr> |
| 198 |
{% endfor %} |
| 199 |
</tbody> |
| 200 |
</table> |
| 201 |
</div> |
| 202 |
</div> |
| 203 |
{% endif %} |
| 204 |
</div> |
| 205 |
|
| 206 |
<script src="/static/page-cart.js?v=0623" defer></script> |
| 207 |
{% endblock %} |
| 208 |
|