diff --git a/conservancy/supporters/forms.py b/conservancy/supporters/forms.py index 586baaea..80f6e8a5 100644 --- a/conservancy/supporters/forms.py +++ b/conservancy/supporters/forms.py @@ -58,7 +58,17 @@ class SustainerForm(forms.ModelForm): attrs={ 'x-model': 'recurring', # Reset the amount field and option when changing monthly/annually. - 'x-on:change': '$refs.amount.value = null; amount_option = null', + 'x-on:change': 'amount = ""; amount_option = null', + } + ), + 'amount': forms.widgets.NumberInput( + # Keeping default widget, just neater to add many attrs here. + attrs={ + # So we can update the amount field from the amount_option selected. + 'x-model': 'amount', + 'x-bind:min': 'amount_minimum', + 'onblur': 'this.reportValidity()', + 'style': 'width: 5rem', } ), } @@ -70,15 +80,6 @@ class SustainerForm(forms.ModelForm): self.fields['recurring'].label = '' self.fields['amount'].initial = self.YEAR_OPTIONS[0] - # So we can write to this field easily from Alpine JS. - self.fields['amount'].widget.attrs['x-ref'] = 'amount' - self.fields['amount'].widget.attrs['style'] = 'width: 5rem' - self.fields['amount'].widget.attrs['onblur'] = 'this.reportValidity()' - self.fields['amount'].widget.attrs['x-bind:min'] = 'amount_minimum' - self.fields['email'].help_text = 'For your payment receipt' - self.fields['tshirt_size'].help_text = mark_safe( - """Sizing chart: Women's, Men's""" - ) self.fields['tshirt_size'].widget.attrs['x-model'] = 'tshirt_size' def clean(self): diff --git a/conservancy/supporters/templates/supporters/buttonradio_option.html b/conservancy/supporters/templates/supporters/buttonradio_option.html index 8ee087b2..7d1307c6 100644 --- a/conservancy/supporters/templates/supporters/buttonradio_option.html +++ b/conservancy/supporters/templates/supporters/buttonradio_option.html @@ -1,2 +1,2 @@ - +{# Custom wrapper around the label to enable radio fields to be styled like buttons. #} {% if widget.wrap_label %}{% endif %} diff --git a/conservancy/supporters/templates/supporters/field.html b/conservancy/supporters/templates/supporters/field.html index 8d44434a..4071d7fa 100644 --- a/conservancy/supporters/templates/supporters/field.html +++ b/conservancy/supporters/templates/supporters/field.html @@ -1,4 +1,4 @@ - +{# Labels on a separate line, custom help text layout #} {% if field.use_fieldset %} {% if field.label %}{{ field.legend_tag }}{% endif %} diff --git a/conservancy/supporters/templates/supporters/sustainers_stripe.html b/conservancy/supporters/templates/supporters/sustainers_stripe.html index a3e2c82d..73a4a3be 100644 --- a/conservancy/supporters/templates/supporters/sustainers_stripe.html +++ b/conservancy/supporters/templates/supporters/sustainers_stripe.html @@ -52,8 +52,9 @@ - + {# Alpine JS is used to show different payments amounts for monthly/annual, write the selected payment amount into the "amount" field, reset the seleted amount when you change monthly/annual and pop out the address when you select a T-shirt. #}
{# Additional click handler ensures a click-drag activates the radio (similar to a real button). #}
{{ form.amount.as_field_group }} +

Minimum $. Donate smaller amounts here.

{{ form.name.as_field_group }}
-
{{ form.email.as_field_group }}
+
+ {{ form.email.as_field_group }} +
-
+
{{ form.tshirt_size.as_field_group }} +

Sizing chart: + Women's, + Men's

Software Freedom Conservancy T-shirt
@@ -130,7 +137,7 @@ -

Credit card and ACH payments are processed with Stripe. We also accept payment by PayPal, paper check and wire transfer (see below). Our sustainer program has a minimum of $120 USD per year, but we also accept donations of smaller amounts.

+

Credit card and ACH payments are processed with Stripe. We also accept payment by PayPal, paper check and wire transfer.

PayPal