71 lines
2.7 KiB
HTML
71 lines
2.7 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block head %}
|
|
<script src="{% static 'scripts/subscriptions.js' %}" defer></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="site__banner site__banner--site">
|
|
<h1>Subscriptions</h1>
|
|
<h2>Subscribe and save 10%</h2>
|
|
</div>
|
|
<article>
|
|
<section>
|
|
<form action="{% url 'storefront:subscription-form' %}" method="POST" class="subscription-create-form">
|
|
{% csrf_token %}
|
|
<h4>Pick your coffee:</h4>
|
|
<section class="subscription-coffee">
|
|
{% for product in product_list %}
|
|
<div>
|
|
<figure class="product__figure">
|
|
<img class="product__image" src="{{ product.get_first_img.image.url }}">
|
|
</figure>
|
|
<div class="product__desc">
|
|
<h3>{{ product.name }}</h3>
|
|
<p>{{product.description}}</p>
|
|
</div>
|
|
<input
|
|
type="number"
|
|
min="0" max="20"
|
|
pattern="[0-9]*"
|
|
data-id="{{ product.pk }}"
|
|
name="product_{{ product.name }}"
|
|
placeholder="Quantity"
|
|
>
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
<h4>Pick your grind:</h4>
|
|
<section>
|
|
{{ form.as_p }}
|
|
</section>
|
|
<h4>Pick your size:</h4>
|
|
<section class="subscription-products">
|
|
{% for product in stripe_products %}
|
|
<div>
|
|
<input data-weight="{{ product.weight_per_item }}" type="radio" name="stripe_product" id="{{ product.id }}" value="{{ product.id }}">
|
|
<label for="{{ product.id }}"><h5>{{ product.name }}</h5></label><br>
|
|
<h5>{{ product.cost }} / bag</h5>
|
|
<div class="product-prices">
|
|
<h5>Pick your Schedule:</h5>
|
|
<select name="stripe_price">
|
|
{% for price in product.prices %}
|
|
<option value="{{ price.id }}">Every {{ price.interval_count }} / {{ price.interval }}{{ price.interval_count|pluralize }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
<section>
|
|
<table class="subscription-totals"></table>
|
|
<p>
|
|
<input type="submit" value="Continue" disabled>
|
|
</p>
|
|
</section>
|
|
</form>
|
|
</section>
|
|
</article>
|
|
{% endblock %}
|