forked from adobe/aem-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add commerce-checkout-address-form block & readme
- Loading branch information
Showing
3 changed files
with
1,226 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| # Aligning Address Form Layout on Checkout | ||
|
|
||
| This guide explains how to align the address form layout on the checkout page using CSS. | ||
|
|
||
| ## Steps to Customize the Layout: | ||
|
|
||
| ### 1. Apply a Two-Column Layout (Default 50% Width) | ||
|
|
||
| To set all fields to a two-column layout with 50% width, use the following CSS: | ||
|
|
||
| ```css | ||
| .checkout__main .account-address-form div.dropin-field { | ||
| grid-column: span 1; | ||
| } | ||
| ``` | ||
|
|
||
| ### 2. Configure Specific Fields to Full Width | ||
|
|
||
| To make specific fields span the full width (100%), target them using their `--attribute_code` modifier. Update the layout according to design requirements with this CSS: | ||
| ```css | ||
| .checkout__main .account-address-form div.account-address-form__field--company, | ||
| .checkout__main .account-address-form div.account-address-form__field--country_code, | ||
| .checkout__main .account-address-form div.account-address-form__field--vat_id { | ||
| grid-column: span 2; | ||
| } | ||
| ``` | ||
|
|
||
| By following these steps, address form layout can be easily customisable to meet requirements. |
357 changes: 357 additions & 0 deletions
357
blocks/commerce-checkout-address-form/commerce-checkout.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,357 @@ | ||
| /* stylelint-disable selector-class-pattern */ | ||
| .checkout__content { | ||
| display: grid; | ||
| grid-template-columns: 1fr; | ||
| gap: var(--spacing-big) 0; | ||
| } | ||
|
|
||
| .checkout__main { | ||
| display: grid; | ||
| row-gap: var(--spacing-xbig); | ||
| margin-top: var(--spacing-medium); | ||
| } | ||
|
|
||
| .checkout__aside { | ||
| display: grid; | ||
| gap: var(--spacing-xbig); | ||
| } | ||
|
|
||
| /* Block dividers */ | ||
| .checkout__block.checkout__heading .dropin-header-container { | ||
| gap: var(--spacing-xsmall); | ||
| } | ||
|
|
||
| .checkout__shipping-form { | ||
| padding-top: var(--spacing-xbig); | ||
| border-top: var(--shape-border-width-3) solid var(--color-neutral-400); | ||
| } | ||
|
|
||
| .checkout__payment-methods { | ||
| padding-top: var(--spacing-xbig); | ||
| border-top: var(--shape-border-width-3) solid var(--color-neutral-400); | ||
| } | ||
|
|
||
| /* Hide empty blocks */ | ||
| .checkout__block:empty { | ||
| display: none; | ||
| } | ||
|
|
||
| /* Hide blocks with empty divs */ | ||
| .checkout__server-error:has(> :empty), | ||
| .checkout__out-of-stock:has(> :empty), | ||
| .checkout__delivery:has(> :empty), | ||
| .checkout__bill-to-shipping:has(> :empty) { | ||
| display: none; | ||
| } | ||
|
|
||
| /* Hide main containers when the cart is empty or there is a server error */ | ||
| .checkout__content--error .checkout__out-of-stock, | ||
| .checkout__content--error .checkout__login, | ||
| .checkout__content--error .checkout__shipping-form, | ||
| .checkout__content--error .checkout__bill-to-shipping, | ||
| .checkout__content--error .checkout__delivery, | ||
| .checkout__content--error .checkout__payment-methods, | ||
| .checkout__content--error .checkout__billing-form, | ||
| .checkout__content--empty .checkout__server-error, | ||
| .checkout__content--empty .checkout__out-of-stock, | ||
| .checkout__content--empty .checkout__login, | ||
| .checkout__content--empty .checkout__shipping-form, | ||
| .checkout__content--empty .checkout__bill-to-shipping, | ||
| .checkout__content--empty .checkout__delivery, | ||
| .checkout__content--empty .checkout__payment-methods, | ||
| .checkout__content--empty .checkout__billing-form { | ||
| display: none !important; | ||
| } | ||
|
|
||
| /* Hide aside containers when the cart is empty or there is a server error */ | ||
| .checkout__content--error .checkout__aside, | ||
| .checkout__content--empty .checkout__aside { | ||
| display: none; | ||
| } | ||
|
|
||
| /* Integrate place order button into Order Summary - mobile */ | ||
| .checkout__place-order { | ||
| grid-column: unset; | ||
| justify-items: unset; | ||
| margin-top: calc(var(--spacing-big) * -1); | ||
| } | ||
|
|
||
| /* Hide the place order button when the cart is empty or there is a server error */ | ||
| .checkout__content--error .checkout__place-order, | ||
| .checkout__content--empty .checkout__place-order { | ||
| display: none; | ||
| } | ||
|
|
||
| .checkout__loader { | ||
| align-items: center; | ||
| background: var(--color-neutral-50); | ||
| display: flex; | ||
| height: 100vh; | ||
| justify-content: center; | ||
| left: 0; | ||
| opacity: 0.5; | ||
| position: fixed; | ||
| top: 0; | ||
| width: 100%; | ||
| z-index: 9999; | ||
| } | ||
|
|
||
| .checkout__loader:empty { | ||
| display: none; | ||
| } | ||
|
|
||
| .checkout__error-banner, | ||
| .checkout__merged-cart-banner { | ||
| grid-column: 1; | ||
| } | ||
|
|
||
| /* remove margin from the heading divider */ | ||
| .checkout__heading .dropin-divider { | ||
| margin: 0; | ||
| } | ||
|
|
||
| /* Cart Summary */ | ||
| .checkout__block .cart-cart-summary-list { | ||
| padding: var(--spacing-medium); | ||
| } | ||
|
|
||
| /* Order Summary Coupon */ | ||
| .dropin-accordion-section__heading { | ||
| margin: var(--spacing-medium) auto; | ||
| } | ||
|
|
||
| .cart-coupons__accordion { | ||
| margin-top: var(--spacing-xsmall); | ||
| } | ||
|
|
||
| /* temporary fix to hide the default cart heading */ | ||
| [data-testid='default-cart-heading'] { | ||
| display: none; | ||
| } | ||
|
|
||
| .cart-summary-list__heading { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .cart-summary-list__heading-text { | ||
| font: var(--type-headline-2-strong-font); | ||
| letter-spacing: var(--type-headline-2-strong-letter-spacing); | ||
| color: var(--color-neutral-800); | ||
| } | ||
|
|
||
| .cart-cart-summary-list__heading { | ||
| row-gap: var(--spacing-small); | ||
| padding-top: 0; | ||
| } | ||
|
|
||
| .cart-cart-summary-list__heading-text { | ||
| font: var(--type-headline-2-strong-font); | ||
| letter-spacing: var(--type-headline-2-strong-letter-spacing); | ||
| color: var(--color-neutral-800); | ||
| } | ||
|
|
||
| .cart-summary-list__edit { | ||
| font: var(--type-body-2-strong-font); | ||
| letter-spacing: var(--type-body-2-strong-letter-spacing); | ||
| } | ||
|
|
||
| .checkout__block | ||
| .cart-cart-summary-list | ||
| .cart-cart-summary-list__footer-divider { | ||
| margin: var(--spacing-small) 0; | ||
| } | ||
|
|
||
| /* Sign-in modal */ | ||
| #modal { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: rgb(0 0 0 / 50%); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| z-index: 2; | ||
| } | ||
|
|
||
| #modal-form { | ||
| width: 800px; | ||
| } | ||
|
|
||
| /* Address form */ | ||
|
|
||
| /* | ||
| Override address form layout to use a two-column grid. | ||
| All fields default to 50% width by spanning 1 column. | ||
| */ | ||
| .checkout__main .account-address-form div.dropin-field { | ||
| grid-column: span 1; | ||
| } | ||
|
|
||
| /* | ||
| Set specific fields to full width by spanning 2 columns. | ||
| Fields are targeted using the "--attribute_code" modifier in their selectors. | ||
| */ | ||
| .checkout__main .account-address-form div.account-address-form__field--company, | ||
| .checkout__main .account-address-form div.account-address-form__field--country_code, | ||
| .checkout__main .account-address-form div.account-address-form__field--vat_id { | ||
| grid-column: span 2; | ||
| } | ||
|
|
||
| /* | ||
| Ensure the "Save in address book" checkbox field spans the full width | ||
| for consistent alignment with other full-width fields. | ||
| */ | ||
| .account-address-form .account-address-form--saveAddressBook { | ||
| grid-column: span 2; | ||
| } | ||
|
|
||
| .checkout__shipping-form .account-address-form-wrapper__title, | ||
| .checkout__shipping-form .dropin-header-container__title, | ||
| .checkout__billing-form .account-address-form-wrapper__title, | ||
| .checkout__billing-form .dropin-header-container__title { | ||
| font: var(--type-headline-2-default-font); | ||
| letter-spacing: var(--type-headline-2-default-letter-spacing); | ||
| color: var(--color-neutral-800); | ||
| margin: 0 0 var(--spacing-medium) 0; | ||
| } | ||
|
|
||
| .checkout__shipping-form .dropin-header-container .dropin-divider, | ||
| .checkout__billing-form .dropin-header-container .dropin-divider { | ||
| display: none; | ||
| } | ||
|
|
||
| /* Order confirmation */ | ||
| .order-confirmation { | ||
| display: grid; | ||
| align-items: start; | ||
| grid-template-columns: repeat(var(--grid-4-columns), 1fr); | ||
| grid-template-areas: 'main aside'; | ||
| grid-column-gap: var(--grid-4-gutters); | ||
| margin-bottom: var(--spacing-xbig); | ||
| padding-top: var(--spacing-xxlarge); | ||
| } | ||
|
|
||
| .order-confirmation__main { | ||
| display: grid; | ||
| grid-row-gap: var(--spacing-xbig); | ||
| grid-column: 1 / span 7; | ||
| } | ||
|
|
||
| .order-confirmation__aside { | ||
| display: grid; | ||
| grid-row-gap: var(--spacing-xbig); | ||
| grid-column: 9 / span 4; | ||
| } | ||
|
|
||
| .order-confirmation__footer { | ||
| display: grid; | ||
| gap: var(--spacing-small); | ||
| text-align: center; | ||
| } | ||
|
|
||
| .order-confirmation__footer p { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .order-confirmation__footer .order-confirmation-footer__continue-button { | ||
| margin: 0 auto; | ||
| text-align: center; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .order-confirmation-footer__contact-support { | ||
| font: var(--type-body-2-default-font); | ||
| letter-spacing: var(--type-body-2-default-letter-spacing); | ||
| color: var(--color-neutral-700); | ||
| } | ||
|
|
||
| .order-confirmation-footer__contact-support a { | ||
| font: var(--type-body-2-strong-font); | ||
| letter-spacing: var(--type-body-2-strong-letter-spacing); | ||
| color: var(--color-brand-500); | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| /* Hide empty blocks */ | ||
| .order-confirmation__block:empty { | ||
| display: none; | ||
| } | ||
|
|
||
| @media only screen and (width >= 320px) and (width <= 768px) { | ||
| .checkout__main, | ||
| .checkout__aside { | ||
| display: contents; | ||
| } | ||
|
|
||
| .checkout__block { | ||
| order: 3; | ||
| } | ||
|
|
||
| .checkout__heading { | ||
| order: 1; | ||
| } | ||
|
|
||
| .checkout__cart-summary { | ||
| order: 2; | ||
| } | ||
|
|
||
| .checkout__place-order { | ||
| order: 4; | ||
| } | ||
|
|
||
| .order-confirmation { | ||
| grid-template-columns: repeat(var(--grid-1-columns), 1fr); | ||
| padding-top: 0; | ||
| } | ||
|
|
||
| .order-confirmation__main, | ||
| .order-confirmation__aside { | ||
| grid-row-gap: var(--spacing-medium); | ||
| } | ||
|
|
||
| .order-confirmation > div { | ||
| grid-column: 1 / span 4; | ||
| } | ||
|
|
||
| .order-confirmation__block .dropin-card { | ||
| border: 0; | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (width >= 768px) { | ||
| .checkout__content { | ||
| display: grid; | ||
| align-items: start; | ||
| grid-template-columns: repeat(var(--grid-4-columns), 1fr); | ||
| gap: var(--spacing-big) var(--grid-4-gutters); | ||
| } | ||
|
|
||
| .checkout__content--error, | ||
| .checkout__content--empty { | ||
| display: grid; | ||
| grid-template-columns: 1fr; | ||
| } | ||
|
|
||
| .checkout__main { | ||
| grid-column: 1 / span 7; | ||
| row-gap: var(--spacing-xbig); | ||
| } | ||
|
|
||
| .checkout__aside { | ||
| grid-column: 9 / span 4; | ||
| gap: var(--spacing-xbig); | ||
| } | ||
|
|
||
| .checkout__error-banner, | ||
| .checkout__merged-cart-banner { | ||
| display: grid; | ||
| grid-column: 1 / span 12; | ||
| } | ||
|
|
||
| .checkout__place-order { | ||
| margin-top: 0; | ||
| } | ||
| } |
Oops, something went wrong.