Skip to content

Commit d75bc53

Browse files
julien-deramondmdo
julien-deramond
authored and
mdo
committed
Add temp reproducible example in Checkout page
1 parent 9734c17 commit d75bc53

File tree

2 files changed

+51
-240
lines changed

2 files changed

+51
-240
lines changed

‎site/src/assets/examples/checkout/checkout.js‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,9 @@
1-
// Example starter JavaScript for disabling form submissions if there are invalid fields
2-
(() => {
3-
'use strict'
1+
function bad() {
2+
const bad = document.getElementById('bad')
3+
bad.style.width = '60%'
4+
}
45

5-
// Fetch all the forms we want to apply custom Bootstrap validation styles to
6-
const forms = document.querySelectorAll('.needs-validation')
7-
8-
// Loop over them and prevent submission
9-
Array.from(forms).forEach(form => {
10-
form.addEventListener('submit', event => {
11-
if (!form.checkValidity()) {
12-
event.preventDefault()
13-
event.stopPropagation()
14-
}
15-
16-
form.classList.add('was-validated')
17-
}, false)
18-
})
19-
})()
6+
function good() {
7+
const good = document.getElementById('good')
8+
good.style.width = '60%'
9+
}

‎site/src/assets/examples/checkout/index.astro‎

Lines changed: 43 additions & 222 deletions
Original file line numberDiff line numberDiff line change
@@ -2,230 +2,51 @@
22
import { getVersionedDocsPath } from '@libs/path'
33
44
export const title = 'Checkout example'
5-
export const extra_css = ['checkout.css']
65
export const extra_js = [{ src: 'checkout.js' }]
7-
export const body_class = 'bg-body-tertiary'
86
---
7+
<h2>.progress-stacked bad</h2>
8+
9+
<div class="progress-stacked">
10+
<div
11+
id="bad"
12+
class="progress"
13+
role="progressbar"
14+
aria-label="Percent In Favor"
15+
aria-valuenow="40"
16+
aria-valuemin="0"
17+
aria-valuemax="100"
18+
style="width: 40%"
19+
>
20+
<div class="progress-bar bg-success"></div>
21+
</div>
22+
<div
23+
class="progress"
24+
role="progressbar"
25+
aria-label="Percent Opposed"
26+
aria-valuenow="40"
27+
aria-valuemin="0"
28+
aria-valuemax="100"
29+
style="width: 40%"
30+
>
31+
<div class="progress-bar bg-danger"></div>
32+
</div>
33+
</div>
934

10-
<div class="container">
11-
<main>
12-
<div class="py-5 text-center">
13-
<img class="d-block mx-auto mb-4" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="72" height="57">
14-
<h1 class="h2">Checkout form</h1>
15-
<p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
16-
</div>
17-
18-
<div class="row g-5">
19-
<div class="col-md-5 col-lg-4 order-md-last">
20-
<h4 class="d-flex justify-content-between align-items-center mb-3">
21-
<span class="text-primary">Your cart</span>
22-
<span class="badge bg-primary rounded-pill">3</span>
23-
</h4>
24-
<ul class="list-group mb-3">
25-
<li class="list-group-item d-flex justify-content-between lh-sm">
26-
<div>
27-
<h6 class="my-0">Product name</h6>
28-
<small class="text-body-secondary">Brief description</small>
29-
</div>
30-
<span class="text-body-secondary">$12</span>
31-
</li>
32-
<li class="list-group-item d-flex justify-content-between lh-sm">
33-
<div>
34-
<h6 class="my-0">Second product</h6>
35-
<small class="text-body-secondary">Brief description</small>
36-
</div>
37-
<span class="text-body-secondary">$8</span>
38-
</li>
39-
<li class="list-group-item d-flex justify-content-between lh-sm">
40-
<div>
41-
<h6 class="my-0">Third item</h6>
42-
<small class="text-body-secondary">Brief description</small>
43-
</div>
44-
<span class="text-body-secondary">$5</span>
45-
</li>
46-
<li class="list-group-item d-flex justify-content-between bg-body-tertiary">
47-
<div class="text-success">
48-
<h6 class="my-0">Promo code</h6>
49-
<small>EXAMPLECODE</small>
50-
</div>
51-
<span class="text-success">−$5</span>
52-
</li>
53-
<li class="list-group-item d-flex justify-content-between">
54-
<span>Total (USD)</span>
55-
<strong>$20</strong>
56-
</li>
57-
</ul>
58-
59-
<form class="card p-2">
60-
<div class="input-group">
61-
<input type="text" class="form-control" placeholder="Promo code">
62-
<button type="submit" class="btn btn-secondary">Redeem</button>
63-
</div>
64-
</form>
65-
</div>
66-
<div class="col-md-7 col-lg-8">
67-
<h4 class="mb-3">Billing address</h4>
68-
<form class="needs-validation" novalidate>
69-
<div class="row g-3">
70-
<div class="col-sm-6">
71-
<label for="firstName" class="form-label">First name</label>
72-
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
73-
<div class="invalid-feedback">
74-
Valid first name is required.
75-
</div>
76-
</div>
77-
78-
<div class="col-sm-6">
79-
<label for="lastName" class="form-label">Last name</label>
80-
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
81-
<div class="invalid-feedback">
82-
Valid last name is required.
83-
</div>
84-
</div>
85-
86-
<div class="col-12">
87-
<label for="username" class="form-label">Username</label>
88-
<div class="input-group has-validation">
89-
<span class="input-group-text">@</span>
90-
<input type="text" class="form-control" id="username" placeholder="Username" required>
91-
<div class="invalid-feedback">
92-
Your username is required.
93-
</div>
94-
</div>
95-
</div>
96-
97-
<div class="col-12">
98-
<label for="email" class="form-label">Email <span class="text-body-secondary">(Optional)</span></label>
99-
<input type="email" class="form-control" id="email" placeholder="[email protected]">
100-
<div class="invalid-feedback">
101-
Please enter a valid email address for shipping updates.
102-
</div>
103-
</div>
104-
105-
<div class="col-12">
106-
<label for="address" class="form-label">Address</label>
107-
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
108-
<div class="invalid-feedback">
109-
Please enter your shipping address.
110-
</div>
111-
</div>
112-
113-
<div class="col-12">
114-
<label for="address2" class="form-label">Address 2 <span class="text-body-secondary">(Optional)</span></label>
115-
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
116-
</div>
117-
118-
<div class="col-md-5">
119-
<label for="country" class="form-label">Country</label>
120-
<select class="form-select" id="country" required>
121-
<option value="">Choose...</option>
122-
<option>United States</option>
123-
</select>
124-
<div class="invalid-feedback">
125-
Please select a valid country.
126-
</div>
127-
</div>
128-
129-
<div class="col-md-4">
130-
<label for="state" class="form-label">State</label>
131-
<select class="form-select" id="state" required>
132-
<option value="">Choose...</option>
133-
<option>California</option>
134-
</select>
135-
<div class="invalid-feedback">
136-
Please provide a valid state.
137-
</div>
138-
</div>
139-
140-
<div class="col-md-3">
141-
<label for="zip" class="form-label">Zip</label>
142-
<input type="text" class="form-control" id="zip" placeholder="" required>
143-
<div class="invalid-feedback">
144-
Zip code required.
145-
</div>
146-
</div>
147-
</div>
148-
149-
<hr class="my-4">
150-
151-
<div class="form-check">
152-
<input type="checkbox" class="form-check-input" id="same-address">
153-
<label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
154-
</div>
155-
156-
<div class="form-check">
157-
<input type="checkbox" class="form-check-input" id="save-info">
158-
<label class="form-check-label" for="save-info">Save this information for next time</label>
159-
</div>
160-
161-
<hr class="my-4">
162-
163-
<h4 class="mb-3">Payment</h4>
164-
165-
<div class="my-3">
166-
<div class="form-check">
167-
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
168-
<label class="form-check-label" for="credit">Credit card</label>
169-
</div>
170-
<div class="form-check">
171-
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
172-
<label class="form-check-label" for="debit">Debit card</label>
173-
</div>
174-
<div class="form-check">
175-
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
176-
<label class="form-check-label" for="paypal">PayPal</label>
177-
</div>
178-
</div>
179-
180-
<div class="row gy-3">
181-
<div class="col-md-6">
182-
<label for="cc-name" class="form-label">Name on card</label>
183-
<input type="text" class="form-control" id="cc-name" placeholder="" required>
184-
<small class="text-body-secondary">Full name as displayed on card</small>
185-
<div class="invalid-feedback">
186-
Name on card is required
187-
</div>
188-
</div>
189-
190-
<div class="col-md-6">
191-
<label for="cc-number" class="form-label">Credit card number</label>
192-
<input type="text" class="form-control" id="cc-number" placeholder="" required>
193-
<div class="invalid-feedback">
194-
Credit card number is required
195-
</div>
196-
</div>
197-
198-
<div class="col-md-3">
199-
<label for="cc-expiration" class="form-label">Expiration</label>
200-
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
201-
<div class="invalid-feedback">
202-
Expiration date required
203-
</div>
204-
</div>
205-
206-
<div class="col-md-3">
207-
<label for="cc-cvv" class="form-label">CVV</label>
208-
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
209-
<div class="invalid-feedback">
210-
Security code required
211-
</div>
212-
</div>
213-
</div>
214-
215-
<hr class="my-4">
35+
<button class="btn btn-danger mt-2" onclick="bad()">Bad</button>
36+
37+
<div class="progress mt-2">
38+
<div
39+
id="good"
40+
class="progress-bar bg-success"
41+
role="progressbar"
42+
style="width: 40%"
43+
></div>
44+
<div
45+
class="progress-bar bg-danger"
46+
role="progressbar"
47+
style="width: 40%"
48+
></div>
49+
</div>
21650

217-
<button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
218-
</form>
219-
</div>
220-
</div>
221-
</main>
51+
<button class="btn btn-success mt-2" onclick="good()">Good</button>
22252

223-
<footer class="my-5 pt-5 text-body-secondary text-center text-small">
224-
<p class="mb-1">&copy; 2017–{new Date().getFullYear()} Company Name</p>
225-
<ul class="list-inline">
226-
<li class="list-inline-item"><a href="#">Privacy</a></li>
227-
<li class="list-inline-item"><a href="#">Terms</a></li>
228-
<li class="list-inline-item"><a href="#">Support</a></li>
229-
</ul>
230-
</footer>
231-
</div>

0 commit comments

Comments
 (0)