From: Julien Déramond Date: Sat, 16 Aug 2025 11:58:46 +0000 (+0200) Subject: Add temp reproducible example in Checkout page X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fheads%2Fmain-jd-fix-transition-progress-stack;p=thirdparty%2Fbootstrap.git Add temp reproducible example in Checkout page --- diff --git a/site/src/assets/examples/checkout/checkout.js b/site/src/assets/examples/checkout/checkout.js index 30ea0aa6b1..8ef4dcdfa9 100644 --- a/site/src/assets/examples/checkout/checkout.js +++ b/site/src/assets/examples/checkout/checkout.js @@ -1,19 +1,9 @@ -// Example starter JavaScript for disabling form submissions if there are invalid fields -(() => { - 'use strict' +function bad() { + const bad = document.getElementById('bad') + bad.style.width = '60%' +} - // Fetch all the forms we want to apply custom Bootstrap validation styles to - const forms = document.querySelectorAll('.needs-validation') - - // Loop over them and prevent submission - Array.from(forms).forEach(form => { - form.addEventListener('submit', event => { - if (!form.checkValidity()) { - event.preventDefault() - event.stopPropagation() - } - - form.classList.add('was-validated') - }, false) - }) -})() +function good() { + const good = document.getElementById('good') + good.style.width = '60%' +} diff --git a/site/src/assets/examples/checkout/index.astro b/site/src/assets/examples/checkout/index.astro index 029bc796bf..2e01a093c3 100644 --- a/site/src/assets/examples/checkout/index.astro +++ b/site/src/assets/examples/checkout/index.astro @@ -2,230 +2,51 @@ import { getVersionedDocsPath } from '@libs/path' export const title = 'Checkout example' -export const extra_css = ['checkout.css'] export const extra_js = [{ src: 'checkout.js' }] -export const body_class = 'bg-body-tertiary' --- +

.progress-stacked bad

+ +
+
+
+
+
+
+
+
-
-
-
- -

Checkout form

-

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.

-
- -
-
-

- Your cart - 3 -

-
    -
  • -
    -
    Product name
    - Brief description -
    - $12 -
    • -
  • -
    -
    Second product
    - Brief description -
    - $8 -
    • -
  • -
    -
    Third item
    - Brief description -
    - $5 -
    • -
  • -
    -
    Promo code
    - EXAMPLECODE -
    - −$5 -
    • -
  • - Total (USD) - $20 -
    • -
- -
-
- - -
-
-
-
-

Billing address

-
-
-
- - -
- Valid first name is required. -
-
- -
- - -
- Valid last name is required. -
-
- -
- -
- @ - -
- Your username is required. -
-
-
- -
- - -
- Please enter a valid email address for shipping updates. -
-
- -
- - -
- Please enter your shipping address. -
-
- -
- - -
- -
- - -
- Please select a valid country. -
-
- -
- - -
- Please provide a valid state. -
-
- -
- - -
- Zip code required. -
-
-
- -
- -
- - -
- -
- - -
- -
- -

Payment

- -
-
- - -
-
- - -
-
- - -
-
- -
-
- - - Full name as displayed on card -
- Name on card is required -
-
- -
- - -
- Credit card number is required -
-
- -
- - -
- Expiration date required -
-
- -
- - -
- Security code required -
-
-
- -
+ + +
+
+
+
- -
-
-
-
+ - -