-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #103 from commerce-docs/USF-1323-checkout-dropin
USF-1323: Checkout dropin
- Loading branch information
Showing
37 changed files
with
2,192 additions
and
101 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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
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
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
50 changes: 50 additions & 0 deletions
50
src/content/docs/dropins/checkout/containers/bill-to-shipping-address.mdx
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,50 @@ | ||
| --- | ||
| title: BillToShippingAddress container | ||
| description: Configure the BillToShippingAddress container to manage and display the billing address form during checkout. | ||
| --- | ||
|
|
||
| import OptionsTable from '@components/OptionsTable.astro'; | ||
|
|
||
| The `BillToShippingAddress` container includes a checkbox that allows users to indicate if the billing address is the same as the shipping address. If unchecked, the billing address form will be displayed. | ||
|
|
||
| ## BillToShippingAddress configurations | ||
|
|
||
| The `BillToShippingAddress` container provides the following configuration options: | ||
|
|
||
| <OptionsTable | ||
| compact | ||
| options={[ | ||
| ['Option', 'Type', 'Req?', 'Description'], | ||
| ['hideOnVirtualCart', 'boolean', 'No', 'Hides the container if the cart is virtual.'], | ||
| ['onChange', 'function', 'No', 'Callback function that is called when the checkbox state changes.'], | ||
| ]} | ||
| /> | ||
|
|
||
| ## Example | ||
|
|
||
| The following example renders the `BillToShippingAddress` container on a checkout page. It includes functionality to hide the component for virtual carts and to handle changes to the billing address form visibility and validation. If the billing address form is shown, it validates the form data and updates the billing address on the cart. | ||
|
|
||
| ```ts | ||
| import BillToShippingAddress from '@dropins/storefront-checkout/containers/BillToShippingAddress.js'; | ||
| import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js'; | ||
|
|
||
| const $billToShipping = checkoutFragment.querySelector( | ||
| '.checkout__bill-to-shipping' | ||
| ); | ||
|
|
||
| CheckoutProvider.render(BillToShippingAddress, { | ||
| hideOnVirtualCart: true, | ||
| onChange: (checked) => { | ||
| $billingForm.style.display = checked ? 'none' : 'block'; | ||
|
|
||
| if (!checked && billingFormRef.current) { | ||
| const isDataValid = billingFormRef.current.handleValidationSubmit(); | ||
|
|
||
| setAddressOnCart( | ||
| { data: billingFormRef.current.formData, isDataValid }, | ||
| checkoutApi.setBillingAddress | ||
| ); | ||
| } | ||
| }, | ||
| })($billToShipping), | ||
| ``` |
36 changes: 36 additions & 0 deletions
36
src/content/docs/dropins/checkout/containers/estimate-shipping.mdx
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,36 @@ | ||
| --- | ||
| title: EstimateShipping container | ||
| description: Learn how the EstimateShipping container displays shipping costs during checkout. | ||
| --- | ||
|
|
||
| import OptionsTable from '@components/OptionsTable.astro'; | ||
|
|
||
| The `EstimateShipping` container is designed to estimate and display shipping costs during the checkout process. | ||
|
|
||
| ## EstimateShipping configurations | ||
|
|
||
| The `EstimateShipping` container is read-only, unlike the editable [`EstimateShipping`](/dropins/cart/cart-slots/#estimateshipping) container in the cart drop-in component. Initially, it displays estimated shipping costs. After a customer provides a shipping address and selects a shipping method, it shows the actual shipping cost. This container is designed to be used as a slot within the `OrderSummary` container from the cart, where the estimated shipping information is displayed. | ||
|
|
||
| ## Example | ||
|
|
||
| The following example renders an `OrderSummary` container within a checkout page and includes a slot for estimating shipping: | ||
|
|
||
| ```ts | ||
| import { OrderSummary } from '@dropins/storefront-cart/containers/OrderSummary.js'; | ||
| import { render as CartProvider } from '@dropins/storefront-cart/render.js'; | ||
| import EstimateShipping from '@dropins/storefront-checkout/containers/EstimateShipping.js'; | ||
|
|
||
| const $orderSummary = checkoutFragment.querySelector( | ||
| '.checkout__order-summary' | ||
| ); | ||
|
|
||
| CartProvider.render(OrderSummary, { | ||
| slots: { | ||
| EstimateShipping: (esCtx) => { | ||
| const estimateShippingForm = document.createElement('div'); | ||
| CheckoutProvider.render(EstimateShipping)(estimateShippingForm); | ||
| esCtx.appendChild(estimateShippingForm); | ||
| }, | ||
| }, | ||
| })($orderSummary), | ||
| ``` |
59 changes: 59 additions & 0 deletions
59
src/content/docs/dropins/checkout/containers/login-form.mdx
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,59 @@ | ||
| --- | ||
| title: LoginForm container | ||
| description: Configure the LoginForm container to handle user email input and validation during checkout. | ||
| --- | ||
|
|
||
| import OptionsTable from '@components/OptionsTable.astro'; | ||
|
|
||
| The `LoginForm` container is designed to handle user email input and validation within the checkout process. | ||
|
|
||
| ## LoginForm configurations | ||
|
|
||
| The `LoginForm` container provides the following configuration options: | ||
|
|
||
| <OptionsTable | ||
| compact | ||
| options={[ | ||
| ['Option', 'Type', 'Req?', 'Description'], | ||
| ['onSignInClick', 'function', 'No', 'A function that handles the sign-in button click. It takes the email (string or null) as an argument.'], | ||
| ['onSignOutClick', 'function', 'No', 'A function that handles the sign-out button click. It takes no arguments.'], | ||
| ]} | ||
| /> | ||
|
|
||
| ## Example | ||
|
|
||
| The following example renders the `LoginForm` container on a checkout page, which includes rendering the [`AuthCombine`](/dropins/user-auth/containers/auth-combine/) container from the user auth drop-in component in a modal for authentication: | ||
|
|
||
| ```ts | ||
| import AuthCombine from '@dropins/storefront-auth/containers/AuthCombine.js'; | ||
| import { render as AuthProvider } from '@dropins/storefront-auth/render.js'; | ||
|
|
||
| import LoginForm from '@dropins/storefront-checkout/containers/LoginForm.js'; | ||
| import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js'; | ||
|
|
||
| const $login = checkoutFragment.querySelector('.checkout__login'); | ||
|
|
||
| CheckoutProvider.render(LoginForm, { | ||
| name: LOGIN_FORM_NAME, | ||
| onSignInClick: async (initialEmailValue) => { | ||
| const signInForm = document.createElement('div'); | ||
|
|
||
| AuthProvider.render(AuthCombine, { | ||
| signInFormConfig: { | ||
| renderSignUpLink: true, | ||
| initialEmailValue, | ||
| onSuccessCallback: () => { | ||
| displayOverlaySpinner(); | ||
| }, | ||
| }, | ||
| signUpFormConfig: {}, | ||
| resetPasswordFormConfig: {}, | ||
| })(signInForm); | ||
|
|
||
| showModal(signInForm); | ||
| }, | ||
| onSignOutClick: () => { | ||
| authApi.revokeCustomerToken(); | ||
| }, | ||
| })($login), | ||
| ``` |
40 changes: 40 additions & 0 deletions
40
src/content/docs/dropins/checkout/containers/merged-cart-banner.mdx
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,40 @@ | ||
| --- | ||
| title: MergedCartBanner container | ||
| description: Configure the MergedCartBanner container to display notifications when items from an old cart are merged into the current cart. | ||
| --- | ||
|
|
||
| import OptionsTable from '@components/OptionsTable.astro'; | ||
|
|
||
| The `MergedCartBanner` container is designed to display a notification banner when items from an old cart are merged into the current cart. | ||
|
|
||
| When a customer signs in, if they had items in a previous cart, a banner will notify them that the items from their previous cart have been merged with the current cart. You can apply styles to the banner by passing a `className` prop to the container. | ||
|
|
||
| ## MergedCartBanner configurations | ||
|
|
||
| The `MergedCartBanner` container provides the following configuration options: | ||
|
|
||
| <OptionsTable | ||
| compact | ||
| options={[ | ||
| ['Option', 'Type', 'Req?', 'Description'], | ||
| ['className', 'string', 'No', 'The CSS class name(s) to apply to the component.'], | ||
| ]} | ||
| /> | ||
|
|
||
| ## Example | ||
|
|
||
| The following example renders the `MergedCartBanner` container with a custom class name: | ||
|
|
||
| ```ts | ||
| import MergedCartBanner from '@dropins/storefront-checkout/containers/MergedCartBanner.js'; | ||
| import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js'; | ||
|
|
||
| const $mergedCartBanner = checkoutFragment.querySelector( | ||
| '.checkout__merged-cart-banner' | ||
| ); | ||
|
|
||
| CheckoutProvider.render(MergedCartBanner, { | ||
| className: 'checkout__merged-cart-banner--custom', | ||
| })($mergedCartBanner); | ||
| ``` | ||
| `; |
Oops, something went wrong.