diff --git a/astro.config.mjs b/astro.config.mjs index ad4cef368..168d9f122 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -207,11 +207,26 @@ export default defineConfig({ collapsed: true, items: [ { label: 'Overview', link: '/dropins/checkout/' }, - // { label: 'Checkout Installation', link: '/dropins/checkout/checkout-installation/' }, - // { label: 'Checkout Styles', link: '/dropins/checkout/checkout-styles/' }, - // { label: 'Checkout Containers', link: '/dropins/checkout/checkout-containers/' }, - // { label: 'Checkout Slots', link: '/dropins/checkout/checkout-slots/' }, - // { label: 'Checkout Functions', link: '/dropins/checkout/checkout-functions/' }, + { label: 'Installation', link: '/dropins/checkout/installation/' }, + { label: 'Initialization', link: '/dropins/checkout/initialization/' }, + { label: 'Styles', link: '/dropins/checkout/styles/' }, + { label: 'Containers', + collapsed: true, + items: [ + { label: 'BillToShippingAddress', link: '/dropins/checkout/containers/bill-to-shipping-address/' }, + { label: 'EstimateShipping', link: '/dropins/checkout/containers/estimate-shipping/' }, + { label: 'LoginForm', link: '/dropins/checkout/containers/login-form/' }, + { label: 'MergedCartBanner', link: '/dropins/checkout/containers/merged-cart-banner/' }, + { label: 'OrderConfirmationHeader', link: '/dropins/checkout/containers/order-confirmation-header/' }, + { label: 'OutOfStock', link: '/dropins/checkout/containers/out-of-stock/' }, + { label: 'PaymentMethods', link: '/dropins/checkout/containers/payment-methods/' }, + { label: 'PlaceOrder', link: '/dropins/checkout/containers/place-order/' }, + { label: 'ServerError', link: '/dropins/checkout/containers/server-error/' }, + { label: 'ShippingMethods', link: '/dropins/checkout/containers/shipping-methods/' }, + ] + }, + // { label: 'Slots', link: '/dropins/checkout/slots/' }, + { label: 'Functions', link: '/dropins/checkout/functions/' }, ] }, { diff --git a/public/images/dropins/findstylescheckout.png b/public/images/dropins/findstylescheckout.png new file mode 100644 index 000000000..bd7ec1b10 Binary files /dev/null and b/public/images/dropins/findstylescheckout.png differ diff --git a/public/images/pdp/pdp-installation.png b/public/images/pdp/pdp-installation.png deleted file mode 100644 index f1954f514..000000000 Binary files a/public/images/pdp/pdp-installation.png and /dev/null differ diff --git a/src/components/OptionsTable.astro b/src/components/OptionsTable.astro index c44afaa8e..ab0349fae 100644 --- a/src/components/OptionsTable.astro +++ b/src/components/OptionsTable.astro @@ -84,7 +84,11 @@ const newRows = rows.map((row) => { } else { let isLastCell = index === row.length - 1; if (isLastCell) { - return {cell}; + return ( + + {cell} + + ); } return {cell}; } @@ -104,7 +108,7 @@ const newRows = rows.map((row) => { margin-left: 0; } .optionsTable table.table { - display: table; + display: inline-block; min-width: 100%; table-layout: auto; border-collapse: collapse; @@ -121,34 +125,35 @@ const newRows = rows.map((row) => { tr.headerRow { border-top: 0 none transparent; - border-bottom: 1px solid rgb(220, 220, 220); - padding: 1rem 1rem; + border-bottom: 0.5px solid rgb(220, 220, 220); + padding: 1rem; + padding-bottom: 0.5rem; text-align: left; white-space: nowrap; } td.headerCell { border: none; - padding: 0.5rem 0; + padding: 2rem 0; font-weight: 600; white-space: nowrap; } tbody.body { vertical-align: baseline; - white-space: nowrap; - font-size: 0.9rem; + font-size: 1rem; + padding: 1rem 0; } tr.row { - white-space: nowrap; - border-bottom: 1px solid rgb(220, 220, 220); + border-bottom: 0.5px solid rgb(220, 220, 220); line-height: 1.5rem; + padding: 1rem 0; } tr td.cell { - padding: 0; - padding-right: 1.5rem; + padding: 0.5rem 0; + padding-right: 3rem; font-family: inherit; border-bottom: 1px solid rgb(220, 220, 220); white-space: nowrap; @@ -156,7 +161,7 @@ const newRows = rows.map((row) => { tr td.compactCell { padding: 0; - padding-right: 1.5rem; + padding-right: 3rem; padding-left: 0.25rem; line-height: 1.5rem; border: none; @@ -191,6 +196,9 @@ const newRows = rows.map((row) => { td td a:hover { color: var(--sl-color-text-accent); } + td.lastCell { + padding-bottom: 0.5rem; + } @media screen and (max-width: 600px) { tbody.body { diff --git a/src/content/docs/dropins/checkout/checkout-containers.mdx b/src/content/docs/dropins/checkout/checkout-containers.mdx deleted file mode 100644 index d7825340a..000000000 --- a/src/content/docs/dropins/checkout/checkout-containers.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Checkout Containers -description: Learn about the containers in the Checkout dropin. -sidebar: - # label: Checkout Containers - order: 4 ---- - -Learn about the containers in the Checkout dropin. diff --git a/src/content/docs/dropins/checkout/checkout-functions.mdx b/src/content/docs/dropins/checkout/checkout-functions.mdx deleted file mode 100644 index 06d190b8f..000000000 --- a/src/content/docs/dropins/checkout/checkout-functions.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Checkout Functions -description: Learn about the API functions provided by the Checkout dropin. -sidebar: - # label: Checkout API - order: 6 ---- - -Learn about the API functions provided by the Checkout dropin. diff --git a/src/content/docs/dropins/checkout/checkout-installation.mdx b/src/content/docs/dropins/checkout/checkout-installation.mdx deleted file mode 100644 index e82d0d4cc..000000000 --- a/src/content/docs/dropins/checkout/checkout-installation.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Checkout Installation -description: Learn how to install the Checkout dropin into your site. -sidebar: - # label: Checkout Installation - order: 2 ---- - -Learn how to install the Checkout dropin into your site. diff --git a/src/content/docs/dropins/checkout/checkout-slots.mdx b/src/content/docs/dropins/checkout/checkout-slots.mdx deleted file mode 100644 index 4092d16d7..000000000 --- a/src/content/docs/dropins/checkout/checkout-slots.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Checkout Slots -description: Learn about the slots provided in the Checkout dropin. -sidebar: - # label: Checkout Slots - order: 5 ---- - -Learn about the slots provided in the Checkout dropin. diff --git a/src/content/docs/dropins/checkout/checkout-styles.mdx b/src/content/docs/dropins/checkout/checkout-styles.mdx deleted file mode 100644 index c85e80dc9..000000000 --- a/src/content/docs/dropins/checkout/checkout-styles.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Checkout Styles -description: Learn how to style the Checkout dropin using its CSS classes. -sidebar: - # label: Checkout CSS classes - order: 3 ---- - -Learn how to style the Checkout dropin using its CSS classes. diff --git a/src/content/docs/dropins/checkout/containers/bill-to-shipping-address.mdx b/src/content/docs/dropins/checkout/containers/bill-to-shipping-address.mdx new file mode 100644 index 000000000..9c8072570 --- /dev/null +++ b/src/content/docs/dropins/checkout/containers/bill-to-shipping-address.mdx @@ -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: + + + +## 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), +``` \ No newline at end of file diff --git a/src/content/docs/dropins/checkout/containers/estimate-shipping.mdx b/src/content/docs/dropins/checkout/containers/estimate-shipping.mdx new file mode 100644 index 000000000..ad50a868c --- /dev/null +++ b/src/content/docs/dropins/checkout/containers/estimate-shipping.mdx @@ -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), +``` \ No newline at end of file diff --git a/src/content/docs/dropins/checkout/containers/login-form.mdx b/src/content/docs/dropins/checkout/containers/login-form.mdx new file mode 100644 index 000000000..9be7f9ba1 --- /dev/null +++ b/src/content/docs/dropins/checkout/containers/login-form.mdx @@ -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: + + + +## 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), +``` \ No newline at end of file diff --git a/src/content/docs/dropins/checkout/containers/merged-cart-banner.mdx b/src/content/docs/dropins/checkout/containers/merged-cart-banner.mdx new file mode 100644 index 000000000..3992fe719 --- /dev/null +++ b/src/content/docs/dropins/checkout/containers/merged-cart-banner.mdx @@ -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: + + + +## 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); +``` +`; \ No newline at end of file diff --git a/src/content/docs/dropins/checkout/containers/order-confirmation-header.mdx b/src/content/docs/dropins/checkout/containers/order-confirmation-header.mdx new file mode 100644 index 000000000..1de7a8658 --- /dev/null +++ b/src/content/docs/dropins/checkout/containers/order-confirmation-header.mdx @@ -0,0 +1,39 @@ +--- +title: OrderConfirmationHeader container +description: Configure the OrderConfirmationHeader container to display order details after a customer places an order. +--- + +import OptionsTable from '@components/OptionsTable.astro'; + +The `OrderConfirmationHeader` container displays the order confirmation page with order details after a customer places an order. It also includes a "Create an account" button for guest users. + +## OrderConfirmationHeader configurations + +The `OrderConfirmationHeader` container provides the following configuration options: + + + +## Example + +The following example renders the `OrderConfirmationHeader` container within an order confirmation page. It provides the necessary order data and a handler for the sign-up click event. + +```ts +import OrderConfirmationHeader from '@dropins/storefront-checkout/containers/OrderConfirmationHeader.js'; +import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js'; + +const $orderConfirmationHeader = orderConfirmationFragment.querySelector( + '.order-confirmation__header' +); + +CheckoutProvider.render(OrderConfirmationHeader, { + orderData, + onSignUpClick, +})($orderConfirmationHeader); +``` \ No newline at end of file diff --git a/src/content/docs/dropins/checkout/containers/out-of-stock.mdx b/src/content/docs/dropins/checkout/containers/out-of-stock.mdx new file mode 100644 index 000000000..6a3e373e4 --- /dev/null +++ b/src/content/docs/dropins/checkout/containers/out-of-stock.mdx @@ -0,0 +1,41 @@ +--- +title: OutOfStock container +description: Configure the OutOfStock container to handle and display out-of-stock items in the cart. +--- + +import OptionsTable from '@components/OptionsTable.astro'; + +The `OutOfStock` container is designed to handle and display items in the shopping cart that are out of stock or have insufficient quantity. You can configure it to handle the removal of out-of-stock items and provide a route to the cart page. + +## OutOfStock configurations + +The `OutOfStock` container provides the following configuration options: + + + +## Example + +The following example renders the `OutOfStock` container to handle and display out-of-stock items in the cart: + +```ts +import * as cartApi from '@dropins/storefront-cart/api.js'; +import OutOfStock from '@dropins/storefront-checkout/containers/OutOfStock.js'; +import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js'; + +const $outOfStock = checkoutFragment.querySelector('.checkout__out-of-stock'); + +CheckoutProvider.render(OutOfStock, { + routeCart: () => '/cart', + onCartProductsUpdate: (items) => { + cartApi.updateProductsFromCart(items).catch(console.error); + }, +})($outOfStock), +``` \ No newline at end of file diff --git a/src/content/docs/dropins/checkout/containers/payment-methods.mdx b/src/content/docs/dropins/checkout/containers/payment-methods.mdx new file mode 100644 index 000000000..a55c6a4fc --- /dev/null +++ b/src/content/docs/dropins/checkout/containers/payment-methods.mdx @@ -0,0 +1,36 @@ +--- +title: PaymentMethods container +description: Configure the PaymentMethods container to manage and display available payment methods during checkout. +--- + +import OptionsTable from '@components/OptionsTable.astro'; + +The `PaymentMethods` container is designed to manage and display the available payment methods during the checkout process. You can configure it to handle the selection of payment methods, display the payment method handlers, and manage the main slot for the payment methods. + +## PaymentMethods configurations + +The `PaymentMethods` container provides the following configuration options: + +', 'No', 'The main slot for the payment methods.'], + ['slots.Handlers', 'PaymentMethodHandlerSlots', 'No', 'The handlers for different payment methods.'] + ]} +/> + +## Example + +The following example renders the `PaymentMethods` container on a checkout page, displaying the available payment methods in the element with the class `checkout__payment-methods`: + +```ts +import PaymentMethods from '@dropins/storefront-checkout/containers/PaymentMethods.js'; +import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js'; + +const $paymentMethods = checkoutFragment.querySelector( + '.checkout__payment-methods' +); + +CheckoutProvider.render(PaymentMethods)($paymentMethods), +``` \ No newline at end of file diff --git a/src/content/docs/dropins/checkout/containers/place-order.mdx b/src/content/docs/dropins/checkout/containers/place-order.mdx new file mode 100644 index 000000000..ce94c578a --- /dev/null +++ b/src/content/docs/dropins/checkout/containers/place-order.mdx @@ -0,0 +1,84 @@ +--- +title: PlaceOrder container +description: Configure the PlaceOrder container to handle the final checkout step, including place order action, button disablement, and main slot management. +--- + +import OptionsTable from '@components/OptionsTable.astro'; + +The `PlaceOrder` container is designed to handle the final step in the checkout process, where the user confirms and places their order. You can configure it to handle the place order action and manage the main slot for the place order button. + +## PlaceOrder configurations + +The `PlaceOrder` container provides the following configuration options: + + + +## Example + +The following example renders the `PlaceOrder` container on a checkout page. It includes functionality to validate login, shipping, and billing forms before placing an order. If the validation passes, it attempts to place the order and handles any errors that occur during the process. + +```ts +import * as checkoutApi from '@dropins/storefront-checkout/api.js'; +import PlaceOrder from '@dropins/storefront-checkout/containers/PlaceOrder.js'; +import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js'; + +const $placeOrder = checkoutFragment.querySelector('.checkout__place-order'); + +CheckoutProvider.render(PlaceOrder, { + handleValidation: () => { + let success = true; + const forms = document.forms; + + const loginForm = forms[LOGIN_FORM_NAME]; + + if (loginForm) { + success = loginForm.checkValidity(); + if (!success) scrollToElement($login); + } + + const shippingForm = forms[SHIPPING_FORM_NAME]; + + if ( + success && + shippingFormRef.current && + shippingForm && + shippingForm.checkVisibility() + ) { + success = shippingFormRef.current.handleValidationSubmit(false); + } + + const billingForm = forms[BILLING_FORM_NAME]; + + if ( + success && + billingFormRef.current && + billingForm && + billingForm.checkVisibility() + ) { + success = billingFormRef.current.handleValidationSubmit(false); + } + + return success; + }, + onPlaceOrder: async () => { + displayOverlaySpinner(); + + try { + await checkoutApi.placeOrder(); + } catch (error) { + console.error(error); + throw error; + } finally { + removeOverlaySpinner(); + } + }, +})($placeOrder), +]); +``` \ No newline at end of file diff --git a/src/content/docs/dropins/checkout/containers/server-error.mdx b/src/content/docs/dropins/checkout/containers/server-error.mdx new file mode 100644 index 000000000..7cb00fdbf --- /dev/null +++ b/src/content/docs/dropins/checkout/containers/server-error.mdx @@ -0,0 +1,43 @@ +--- +title: ServerError container +description: Configure the ServerError container to handle and display server error messages during checkout. +--- + +import OptionsTable from '@components/OptionsTable.astro'; + +The `ServerError` container is designed to handle and display server error messages during the checkout process. You can configure it to display an error message and handle click events. + +## ServerError configurations + +The `ServerError` container provides the following configuration options: + + + +## Example + +The following example renders the `ServerError` container on a checkout page. It provides functionality to handle retry actions by removing an error class from the content element and to handle server errors by adding an error class to the content element. + +```ts +import ServerError from '@dropins/storefront-checkout/containers/ServerError.js'; +import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js'; + +const $serverError = checkoutFragment.querySelector( + '.checkout__server-error' +); + +CheckoutProvider.render(ServerError, { + onRetry: () => { + $content.classList.remove('checkout__content--error'); + }, + onServerError: () => { + $content.classList.add('checkout__content--error'); + }, +})($serverError), +``` \ No newline at end of file diff --git a/src/content/docs/dropins/checkout/containers/shipping-methods.mdx b/src/content/docs/dropins/checkout/containers/shipping-methods.mdx new file mode 100644 index 000000000..4eb51f484 --- /dev/null +++ b/src/content/docs/dropins/checkout/containers/shipping-methods.mdx @@ -0,0 +1,43 @@ +--- +title: ShippingMethods container +description: Configure the ShippingMethods container to manage and display available shipping methods during checkout. +--- + +import OptionsTable from '@components/OptionsTable.astro'; + +The `ShippingMethods` container is designed to manage and display the selection of available shipping methods during the checkout process. You can configure it to handle the selection of shipping methods, display the available shipping methods, and manage the main slot for the shipping methods. + +## ShippingMethods configurations + +The `ShippingMethods` container provides the following configuration options: + + + +## Example + +The following example renders the `ShippingMethods` container on a checkout page. It includes configurations to hide the component for virtual carts and to refresh the cart data when checkout data is updated. + +```ts +import * as cartApi from '@dropins/storefront-cart/api.js'; +import ShippingMethods from '@dropins/storefront-checkout/containers/ShippingMethods.js'; +import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js'; + +const $delivery = checkoutFragment.querySelector('.checkout__delivery'); + +CheckoutProvider.render(ShippingMethods, { + hideOnVirtualCart: true, + onCheckoutDataUpdate: () => { + cartApi.refreshCart().catch(console.error); + }, +})($delivery), +``` \ No newline at end of file diff --git a/src/content/docs/dropins/checkout/files/BillToShippingAddress.css b/src/content/docs/dropins/checkout/files/BillToShippingAddress.css new file mode 100644 index 000000000..e2bce7c68 --- /dev/null +++ b/src/content/docs/dropins/checkout/files/BillToShippingAddress.css @@ -0,0 +1,24 @@ +/******************************************************************** +* ADOBE CONFIDENTIAL +* __________________ +* +* Copyright 2024 Adobe +* All Rights Reserved. +* +* NOTICE: All information contained herein is, and remains +* the property of Adobe and its suppliers, if any. The intellectual +* and technical concepts contained herein are proprietary to Adobe +* and its suppliers and are protected by all applicable intellectual +* property laws, including trade secret and copyright laws. +* Dissemination of this information or reproduction of this material +* is strictly forbidden unless prior written permission is obtained +* from Adobe. +*******************************************************************/ + +/* https://cssguidelin.es/#bem-like-naming */ + +.checkout-bill-to-shipping-address label { + font: var(--type-body-2-default-font); + letter-spacing: var(--type-body-2-default-letter-spacing); + gap: 0; +} diff --git a/src/content/docs/dropins/checkout/files/EstimateShipping.css b/src/content/docs/dropins/checkout/files/EstimateShipping.css new file mode 100644 index 000000000..9d41d3a6a --- /dev/null +++ b/src/content/docs/dropins/checkout/files/EstimateShipping.css @@ -0,0 +1,75 @@ +/******************************************************************** +* ADOBE CONFIDENTIAL +* __________________ +* +* Copyright 2024 Adobe +* All Rights Reserved. +* +* NOTICE: All information contained herein is, and remains +* the property of Adobe and its suppliers, if any. The intellectual +* and technical concepts contained herein are proprietary to Adobe +* and its suppliers and are protected by all applicable intellectual +* property laws, including trade secret and copyright laws. +* Dissemination of this information or reproduction of this material +* is strictly forbidden unless prior written permission is obtained +* from Adobe. +*******************************************************************/ + +/* https://cssguidelin.es/#bem-like-naming */ + +.checkout-estimate-shipping { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-xxsmall); + align-items: center; + color: var(--color-neutral-800); +} + +.checkout-estimate-shipping__label, +.checkout-estimate-shipping__price { + font: var(--type-body-1-default-font); + letter-spacing: var(--type-body-1-default-letter-spacing); +} + +.checkout-estimate-shipping__label--muted { + font: var(--type-body-2-default-font); + letter-spacing: var(--type-body-2-default-letter-spacing); + color: var(--color-neutral-700); +} + +.checkout-estimate-shipping__price--muted { + font: var(--type-body-2-default-font); + letter-spacing: var(--type-body-2-default-letter-spacing); +} + +.checkout-estimate-shipping__price { + text-align: right; +} + +.checkout-estimate-shipping__label--bold, +.checkout-estimate-shipping__price--bold { + font: var(--type-body-1-emphasized-font); + letter-spacing: var(--type-body-1-emphasized-letter-spacing); +} + +.checkout-estimate-shipping__caption { + font: var(--type-details-caption-2-font); + letter-spacing: var(--type-details-caption-2-letter-spacing); + color: var(--color-neutral-700); +} + +.cart-order-summary__shipping .dropin-skeleton { + grid-template-columns: 1fr; +} + +/* Medium (portrait tablets and large phones, 768px and up) */ +/* @media only screen and (min-width: 768px) { } */ + +/* Large (landscape tablets, 1024px and up) */ +/* @media only screen and (min-width: 1024px) { } */ + +/* XLarge (laptops/desktops, 1366px and up) */ +/* @media only screen and (min-width: 1366px) { } */ + +/* XXlarge (large laptops and desktops, 1920px and up) */ +/* @media only screen and (min-width: 1920px) { } */ diff --git a/src/content/docs/dropins/checkout/files/Heading.css b/src/content/docs/dropins/checkout/files/Heading.css new file mode 100644 index 000000000..55fdbeca3 --- /dev/null +++ b/src/content/docs/dropins/checkout/files/Heading.css @@ -0,0 +1,35 @@ +/******************************************************************** +* ADOBE CONFIDENTIAL +* __________________ +* +* Copyright 2024 Adobe +* All Rights Reserved. +* +* NOTICE: All information contained herein is, and remains +* the property of Adobe and its suppliers, if any. The intellectual +* and technical concepts contained herein are proprietary to Adobe +* and its suppliers and are protected by all applicable intellectual +* property laws, including trade secret and copyright laws. +* Dissemination of this information or reproduction of this material +* is strictly forbidden unless prior written permission is obtained +* from Adobe. +*******************************************************************/ + +/* https://cssguidelin.es/#bem-like-naming */ + +/* .dropin-heading { } */ + +/* Extra small devices (phones, 600px and down) */ +/* @media only screen and (max-width: 600px) { } */ + +/* Small devices (portrait tablets and large phones, 600px and up) */ +/* @media only screen and (min-width: 600px) { } */ + +/* Medium devices (landscape tablets, 768px and up) */ +/* @media only screen and (min-width: 768px) { } */ + +/* Large devices (laptops/desktops, 992px and up) */ +/* @media only screen and (min-width: 992px) { } */ + +/* Extra large devices (large laptops and desktops, 1200px and up) */ +/* @media only screen and (min-width: 1200px) { } */ diff --git a/src/content/docs/dropins/checkout/files/LoginForm.css b/src/content/docs/dropins/checkout/files/LoginForm.css new file mode 100644 index 000000000..bd91fe4e3 --- /dev/null +++ b/src/content/docs/dropins/checkout/files/LoginForm.css @@ -0,0 +1,100 @@ +/******************************************************************** +* ADOBE CONFIDENTIAL +* __________________ +* +* Copyright 2024 Adobe +* All Rights Reserved. +* +* NOTICE: All information contained herein is, and remains +* the property of Adobe and its suppliers, if any. The intellectual +* and technical concepts contained herein are proprietary to Adobe +* and its suppliers and are protected by all applicable intellectual +* property laws, including trade secret and copyright laws. +* Dissemination of this information or reproduction of this material +* is strictly forbidden unless prior written permission is obtained +* from Adobe. +*******************************************************************/ + +/* https://cssguidelin.es/#bem-like-naming */ + +.checkout-login-form__heading { + display: grid; + grid-template-columns: 1fr max-content; + grid-auto-rows: max-content; +} + +.checkout-login-form__content { + grid-auto-rows: max-content; +} + +.checkout-login-form__customer-details { + display: grid; + grid-auto-flow: row; + gap: var(--spacing-xxsmall); +} + +.checkout-login-form__customer-name { + font: var(--type-body-1-strong-font); + letter-spacing: var(--type-body-1-default-letter-spacing); +} + +.checkout-login-form__customer-email { + font: var(--type-body-2-default-font); + letter-spacing: var(--type-body-2-default-letter-spacing); + color: var(--color-neutral-700); +} + +.checkout-login-form__title { + grid-column-start: 1; + color: var(--color-neutral-800); + font: var(--type-headline-2-default-font); + letter-spacing: var(--type-headline-2-default-letter-spacing); + margin: 0 0 var(--spacing-medium) 0; +} + +.checkout-login-form__sign-in, +.checkout-login-form__sign-out { + grid-column-start: 2; + color: var(--color-neutral-800); + font: var(--type-body-2-default-font); + letter-spacing: var(--type-body-2-default-letter-spacing); + justify-self: flex-end; + margin-top: var(--spacing-xxsmall); +} + +a.checkout-login-form__link { + font: var(--type-body-2-strong-font); + margin-left: var(--spacing-xxsmall); +} + +/* Extra small devices (phones, 600px and down) */ +@media only screen and (min-width: 320px) and (max-width: 768px) { + .checkout-login-form__heading { + grid-template-columns: repeat(1, 1fr [col-start]); + grid-template-rows: 1fr; + } + + .checkout-login-form__sign-in, + .checkout-login-form__sign-out { + grid-column-start: 1; + align-self: flex-start; + justify-self: flex-start; + margin-top: 0; + margin-bottom: var(--spacing-medium); + } +} + +/* Extra small devices (phones, 600px and down) */ +/* @media only screen and (max-width: 600px) { } */ + +/* Small devices (portrait tablets and large phones, 600px and up) */ +/* @media only screen and (min-width: 600px) { } */ + +/* Medium devices (landscape tablets, 768px and up) */ +/* @media only screen and (min-width: 768px) { } */ + +/* Large devices (laptops/desktops, 992px and up) */ +/* @media only screen and (min-width: 992px) { } */ + +/* Extra large devices (large laptops and desktops, 1200px and up) */ +/* @media only screen and (min-width: 1200px) { } */ diff --git a/src/content/docs/dropins/checkout/files/OrderConfirmationHeader.css b/src/content/docs/dropins/checkout/files/OrderConfirmationHeader.css new file mode 100644 index 000000000..00ed1f6b2 --- /dev/null +++ b/src/content/docs/dropins/checkout/files/OrderConfirmationHeader.css @@ -0,0 +1,62 @@ +/* https://cssguidelin.es/#bem-like-naming */ + +.order-confirmation-header { + text-align: center; + padding: var(--spacing-xxbig); +} + +.order-confirmation-header__icon { + margin-bottom: var(--spacing-small); +} + +.order-confirmation-header__title { + color: var(--color-neutral-800); + font: var(--type-headline-1-font); + letter-spacing: var(--type-headline-1-letter-spacing); + margin: 0; +} + +.order-confirmation-header__title:first-letter { + text-transform: uppercase; +} + +.order-confirmation-header__order { + color: var(--color-neutral-700); + font: var(--type-details-overline-font); + letter-spacing: var(--type-details-overline-letter-spacing); + margin: var(--spacing-xxsmall) 0 0 0; +} + +.order-confirmation-header .success-icon { + color: var(--color-positive-500); +} + +.order-confirmation-create-account { + display: grid; + gap: var(--spacing-small); + margin-top: var(--spacing-large); +} + +.order-confirmation-create-account__message { + font: var(--type-body-2-default-font); + letter-spacing: var(--type-body-2-default-letter-spacing); + margin: 0; +} + +.order-confirmation-create-account__button { + display: flex; + margin: 0 auto; + text-align: center; +} + +/* Medium (portrait tablets and large phones, 768px and up) */ +/* @media only screen and (min-width: 768px) { } */ + +/* Large (landscape tablets, 1024px and up) */ +/* @media only screen and (min-width: 1024px) { } */ + +/* XLarge (laptops/desktops, 1366px and up) */ +/* @media only screen and (min-width: 1366px) { } */ + +/* XXlarge (large laptops and desktops, 1920px and up) */ +/* @media only screen and (min-width: 1920px) { } */ diff --git a/src/content/docs/dropins/checkout/files/OutOfStock.css b/src/content/docs/dropins/checkout/files/OutOfStock.css new file mode 100644 index 000000000..e57e06a85 --- /dev/null +++ b/src/content/docs/dropins/checkout/files/OutOfStock.css @@ -0,0 +1,92 @@ +/******************************************************************** +* ADOBE CONFIDENTIAL +* __________________ +* +* Copyright 2024 Adobe +* All Rights Reserved. +* +* NOTICE: All information contained herein is, and remains +* the property of Adobe and its suppliers, if any. The intellectual +* and technical concepts contained herein are proprietary to Adobe +* and its suppliers and are protected by all applicable intellectual +* property laws, including trade secret and copyright laws. +* Dissemination of this information or reproduction of this material +* is strictly forbidden unless prior written permission is obtained +* from Adobe. +*******************************************************************/ + +/* https://cssguidelin.es/#bem-like-naming */ + +.checkout-out-of-stock.dropin-card { + border-color: var(--color-warning-500); +} +.checkout-out-of-stock .dropin-card__content { + gap: var(--spacing-small); + padding: var(--spacing-small); +} + +.checkout-out-of-stock__title { + color: var(--color-neutral-900); + font: var(--type-body-2-strong-font); + margin: 0; + display: flex; + gap: var(--spacing-xxsmall); + align-items: center; + justify-content: left; + text-align: center; +} + +.checkout-out-of-stock__message { + color: var(--color-neutral-800); + font: var(--type-body-2-default-font); + margin: 0; +} + +.checkout-out-of-stock__items { + display: grid; + grid-template-columns: repeat(5, 100px); + grid-gap: var(--spacing-small); + list-style: none; + padding: 0; + margin: 0; +} + +.checkout-out-of-stock__item img { + width: 100%; + height: auto; +} + +.checkout-out-of-stock__actions { + display: flex; + gap: var(--spacing-small); + justify-content: flex-end; +} + +a.checkout-out-of-stock__action { + font: var(--type-details-caption-1-font); +} + +.checkout-out-of-stock__action { + background: none; + border: none; + padding: 0; + cursor: pointer; +} + +.checkout-out-of-stock__action:hover { + --textColor: var(--color-brand-700); + text-decoration: solid underline var(--textColor); + text-underline-offset: 6px; +} + +/* Medium (portrait tablets and large phones, 768px and up) */ +/* @media only screen and (min-width: 768px) { } */ + +/* Large (landscape tablets, 1024px and up) */ +/* @media only screen and (min-width: 1024px) { } */ + +/* XLarge (laptops/desktops, 1366px and up) */ +/* @media only screen and (min-width: 1366px) { } */ + +/* XXlarge (large laptops and desktops, 1920px and up) */ +/* @media only screen and (min-width: 1920px) { } */ diff --git a/src/content/docs/dropins/checkout/files/OverlayLoader.css b/src/content/docs/dropins/checkout/files/OverlayLoader.css new file mode 100644 index 000000000..ef8bab4cb --- /dev/null +++ b/src/content/docs/dropins/checkout/files/OverlayLoader.css @@ -0,0 +1,30 @@ +/******************************************************************** +* ADOBE CONFIDENTIAL +* __________________ +* +* Copyright 2024 Adobe +* All Rights Reserved. +* +* NOTICE: All information contained herein is, and remains +* the property of Adobe and its suppliers, if any. The intellectual +* and technical concepts contained herein are proprietary to Adobe +* and its suppliers and are protected by all applicable intellectual +* property laws, including trade secret and copyright laws. +* Dissemination of this information or reproduction of this material +* is strictly forbidden unless prior written permission is obtained +* from Adobe. +*******************************************************************/ + +.checkout-overlay-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; +} diff --git a/src/content/docs/dropins/checkout/files/PaymentMethods.css b/src/content/docs/dropins/checkout/files/PaymentMethods.css new file mode 100644 index 000000000..3fc65b1a5 --- /dev/null +++ b/src/content/docs/dropins/checkout/files/PaymentMethods.css @@ -0,0 +1,83 @@ +/******************************************************************** +* ADOBE CONFIDENTIAL +* __________________ +* +* Copyright 2024 Adobe +* All Rights Reserved. +* +* NOTICE: All information contained herein is, and remains +* the property of Adobe and its suppliers, if any. The intellectual +* and technical concepts contained herein are proprietary to Adobe +* and its suppliers and are protected by all applicable intellectual +* property laws, including trade secret and copyright laws. +* Dissemination of this information or reproduction of this material +* is strictly forbidden unless prior written permission is obtained +* from Adobe. +*******************************************************************/ + +/* https://cssguidelin.es/#bem-like-naming */ + +.checkout-payment-methods__title { + font: var(--type-headline-2-default-font); + letter-spacing: var(--type-headline-2-default-letter-spacing); + margin: 0 0 var(--spacing-medium) 0; +} + +.checkout-payment-methods__wrapper { + position: relative; + display: grid; +} + +.checkout-payment-methods__methods { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-medium); +} + +.checkout-payment-methods__content { + margin-top: var(--spacing-medium); +} + +.checkout-payment-methods--full-width { + grid-template-columns: 1fr; +} + +/* Loading */ +.checkout-payment-methods--loading { + opacity: 0.4; + pointer-events: none; +} + +.checkout-payment-methods__spinner { + margin: 0 auto; + position: absolute; + z-index: 999; + left: 0; + right: 0; + top: calc(50% - (var(--size) / 2)); + bottom: 0; +} + +.checkout__content [data-slot="PaymentMethods"]:empty { + display: none; +} + +/*********** Media queries ***********/ +/* Extra small devices (phones, 600px and down) */ +@media only screen and (min-width: 320px) and (max-width: 768px) { + .checkout-payment-methods__methods { + grid-template-columns: 1fr; + } +} + +/* Medium (portrait tablets and large phones, 768px and up) */ +/* @media only screen and (min-width: 768px) { } */ + +/* Large (landscape tablets, 1024px and up) */ +/* @media only screen and (min-width: 1024px) { } */ + +/* XLarge (laptops/desktops, 1366px and up) */ +/* @media only screen and (min-width: 1366px) { } */ + +/* XXlarge (large laptops and desktops, 1920px and up) */ +/* @media only screen and (min-width: 1920px) { } */ diff --git a/src/content/docs/dropins/checkout/files/PlaceOrder.css b/src/content/docs/dropins/checkout/files/PlaceOrder.css new file mode 100644 index 000000000..01f25cbac --- /dev/null +++ b/src/content/docs/dropins/checkout/files/PlaceOrder.css @@ -0,0 +1,52 @@ +/******************************************************************** +* ADOBE CONFIDENTIAL +* __________________ +* +* Copyright 2024 Adobe +* All Rights Reserved. +* +* NOTICE: All information contained herein is, and remains +* the property of Adobe and its suppliers, if any. The intellectual +* and technical concepts contained herein are proprietary to Adobe +* and its suppliers and are protected by all applicable intellectual +* property laws, including trade secret and copyright laws. +* Dissemination of this information or reproduction of this material +* is strictly forbidden unless prior written permission is obtained +* from Adobe. +*******************************************************************/ + +/* https://cssguidelin.es/#bem-like-naming */ + +.checkout-place-order { + display: grid; + padding-bottom: var(--spacing-big); +} + +.checkout-place-order__button { + align-self: flex-end; + justify-self: flex-end; +} + +@media only screen and (min-width:320px) and (max-width: 768px) { + .checkout-place-order { + background-color: var(--color-neutral-200); + padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-big) var(--spacing-medium); + } + + .checkout-place-order__button { + align-self: center; + justify-self: stretch; + } +} + +/* Medium (portrait tablets and large phones, 768px and up) */ +/* @media only screen and (min-width: 768px) { } */ + +/* Large (landscape tablets, 1024px and up) */ +/* @media only screen and (min-width: 1024px) { } */ + +/* XLarge (laptops/desktops, 1366px and up) */ +/* @media only screen and (min-width: 1366px) { } */ + +/* XXlarge (large laptops and desktops, 1920px and up) */ +/* @media only screen and (min-width: 1920px) { } */ diff --git a/src/content/docs/dropins/checkout/files/ServerError.css b/src/content/docs/dropins/checkout/files/ServerError.css new file mode 100644 index 000000000..7858e7027 --- /dev/null +++ b/src/content/docs/dropins/checkout/files/ServerError.css @@ -0,0 +1,45 @@ +/******************************************************************** +* ADOBE CONFIDENTIAL +* __________________ +* +* Copyright 2024 Adobe +* All Rights Reserved. +* +* NOTICE: All information contained herein is, and remains +* the property of Adobe and its suppliers, if any. The intellectual +* and technical concepts contained herein are proprietary to Adobe +* and its suppliers and are protected by all applicable intellectual +* property laws, including trade secret and copyright laws. +* Dissemination of this information or reproduction of this material +* is strictly forbidden unless prior written permission is obtained +* from Adobe. +*******************************************************************/ + +/* https://cssguidelin.es/#bem-like-naming */ + +.checkout-server-error { + position: relative; + text-align: center; + display: grid; +} + +.checkout-server-error__icon .error-icon { + color: var(--color-alert-500); +} + +.checkout-server-error a { + font: var(--type-body-2-strong-font); + letter-spacing: var(--type-body-2-strong-letter-spacing); +} + +/* Medium (portrait tablets and large phones, 768px and up) */ +/* @media only screen and (min-width: 768px) { } */ + +/* Large (landscape tablets, 1024px and up) */ +/* @media only screen and (min-width: 1024px) { } */ + +/* XLarge (laptops/desktops, 1366px and up) */ +/* @media only screen and (min-width: 1366px) { } */ + +/* XXlarge (large laptops and desktops, 1920px and up) */ +/* @media only screen and (min-width: 1920px) { } */ diff --git a/src/content/docs/dropins/checkout/files/ShippingMethods.css b/src/content/docs/dropins/checkout/files/ShippingMethods.css new file mode 100644 index 000000000..b4bdaee1c --- /dev/null +++ b/src/content/docs/dropins/checkout/files/ShippingMethods.css @@ -0,0 +1,78 @@ +/******************************************************************** +* ADOBE CONFIDENTIAL +* __________________ +* +* Copyright 2024 Adobe +* All Rights Reserved. +* +* NOTICE: All information contained herein is, and remains +* the property of Adobe and its suppliers, if any. The intellectual +* and technical concepts contained herein are proprietary to Adobe +* and its suppliers and are protected by all applicable intellectual +* property laws, including trade secret and copyright laws. +* Dissemination of this information or reproduction of this material +* is strictly forbidden unless prior written permission is obtained +* from Adobe. +*******************************************************************/ + +/* https://cssguidelin.es/#bem-like-naming */ + +.checkout-shipping-methods__title { + color: var(--color-neutral-800); + font: var(--type-body-1-default-font); + letter-spacing: var(--type-body-1-default-letter-spacing); + margin: 0 0 var(--spacing-medium) 0; +} + +.checkout-shipping-methods__content { + position: relative; + display: block; +} + +.checkout-shipping-methods__method { + margin-bottom: var(--spacing-medium); + width: fit-content; + cursor: pointer; + font: var(--type-body-2-default-font); + letter-spacing: var(--type-body-2-default-letter-spacing); +} + +.checkout-shipping-methods__method:last-child { + margin-bottom: 0; +} + +.dropin-radio-button__label .dropin-price { + color: var(--color-neutral-800); + font-weight: normal; +} + +/* Loading */ +.checkout-shipping-methods__options--loading { + opacity: 0.4; + pointer-events: none; +} + +.checkout-shipping-methods__spinner { + margin: 0 auto; + position: absolute; + z-index: 999; + left: 0; + right: 0; + top: calc(50% - (var(--size) / 2)); + bottom: 0; +} + +/* Extra small devices (phones, 600px and down) */ +/* @media only screen and (max-width: 600px) { } */ + +/* Small devices (portrait tablets and large phones, 600px and up) */ +/* @media only screen and (min-width: 600px) { } */ + +/* Medium devices (landscape tablets, 768px and up) */ +/* @media only screen and (min-width: 768px) { } */ + +/* Large devices (laptops/desktops, 992px and up) */ +/* @media only screen and (min-width: 992px) { } */ + +/* Extra large devices (large laptops and desktops, 1200px and up) */ +/* @media only screen and (min-width: 1200px) { } */ diff --git a/src/content/docs/dropins/checkout/functions.mdx b/src/content/docs/dropins/checkout/functions.mdx new file mode 100644 index 000000000..58aa11a2a --- /dev/null +++ b/src/content/docs/dropins/checkout/functions.mdx @@ -0,0 +1,717 @@ +--- +title: Checkout functions +description: Learn about the API functions provided by the checkout drop-in component. +tableOfContents: + minHeadingLevel: 2 + maxHeadingLevel: 2 +--- + +import Aside from '@components/Aside.astro'; +import OptionsTable from '@components/OptionsTable.astro'; + +This topic provides the details and instructions you need to use the functions provided by the checkout drop-in component. + +## authenticateCustomer + +The `authenticateCustomer` function manages the authentication state of a customer, either by fetching customer data using the [`getCustomer`](#getcustomer) function when authenticated or resetting the customer data when not authenticated. + +```ts +export const authenticateCustomer: () => Promise +``` + +### Returns + +The function does not return any value explicitly; it performs side effects by fetching data and logging errors. + +### Usage + +See the following example for usage details: + +```ts +import { authenticateCustomer } from '@/checkout/api/authenticateCustomer'; + +async function authenticate() { + try { + await authenticateCustomer(); + console.log('Customer authenticated successfully.'); + } catch (error) { + console.error('Error authenticating customer:', error); + } +} +``` + +## estimateShippingMethods + +The `estimateShippingMethods` function fetches and displays available shipping methods based on a customer's address information. It can take a combination of fields as `criteria`: country, region, region identifier, and postal code. + +It uses a utility function to call an [`estimateShippingMethods`](https://developer.adobe.com/commerce/webapi/graphql/schema/cart/mutations/estimate-shipping-methods/) mutation. + +```ts +estimateShippingMethods({ criteria: ShippingEstimationCriteria }); +``` + + + +### Returns + +Returns a promise that resolves to an array of `ShippingMethod` objects (or `undefined` if no shipping methods are available) fetched from the API. + +```ts +type ShippingMethod = { + amount: Price; + carrier: Carrier; + code: Code; + title: Title; + value: string; + amountExclTax?: Price; + amountInclTax?: Price; +}; +``` + +### Usage + +See the following example for usage details: + +```ts +import { estimateShippingMethods } from '@/checkout/api/estimateShippingMethods'; + +// By country code and region name +const input = { + criteria: { + country_code: 'US', + region_name: 'FL', + }, +}; +const estimateShippingMethods = estimateShippingMethods(input); + +// By country code and region ID +const input = { + criteria: { + country_code: 'US', + region_id: 18, + }, +}; +const estimateShippingMethods = estimateShippingMethods(input); + +// By country code and postal code +const input = { + criteria: { + country_code: 'US', + zip: '80000', + }, +}; +const estimateShippingMethods = estimateShippingMethods(input); + +// By country code, region and postal code +const input = { + criteria: { + country_code: 'US', + region_name: 'FL', + zip: '80000', + }, +}; +const estimateShippingMethods = estimateShippingMethods(input); + +// By country code, region, region id and postal code +// This scenario is specific for those regions which have more than a region ID +// associated (i.e. Armed Forces region 'AE' with some regions IDs); if the region has +// just a region ID, +const input = { + criteria: { + country_code: 'US', + region_name: 'FL', + region_id: 18, + zip: '80000', + }, +}; +const estimateShippingMethods = estimateShippingMethods(input); +``` + +## getCart + +The `getCart` function fetches the cart details for either a [guest user](https://developer.adobe.com/commerce/webapi/graphql/schema/cart/queries/cart/) or an [authenticated customer](https://developer.adobe.com/commerce/webapi/graphql/schema/customer/queries/cart/). + +```ts +export const getCart: () => Promise +``` + +### Returns + +Returns a promise that resolves to the transformed cart data fetched from the API. + +```ts +transformCart +``` + +### Usage + +See the following example for usage details: + +```ts +import { getCart } from '@/checkout/api/getCart'; + +async function fetchCartData() { + try { + const cartData = await getCart(); + console.log('Cart Data:', cartData); + } catch (error) { + console.error('Error fetching cart data:', error); + } +} + +// Call the function to fetch and log the cart data +fetchCartData(); +``` + +## getCheckoutData + +The `getCheckoutData` function fetches and prepares the necessary data for the checkout process. It uses the [`getCart`](#getcart) and [`getCustomer`](#getcustomer) functions to fetch the cart and customer data. + +```ts +export const getCheckoutData: () => Promise +``` + +### Returns + +The function does not return any value explicitly; it performs side effects by fetching data and logging errors. + +### Usage + +See the following example for usage details: + +```ts +import { getCheckoutData } from '@/checkout/api/getCheckoutData'; + +async function fetchAndPrepareCheckoutData() { + try { + await getCheckoutData(); + console.log('Checkout data fetched and prepared successfully.'); + } catch (error) { + console.error('Error fetching checkout data:', error); + } +} + +// Call the function to fetch and prepare the checkout data +fetchAndPrepareCheckoutData(); +``` + +## getCustomer + +The `getCustomer` function fetches customer details for an authenticated user using the [`customer`](https://developer.adobe.com/commerce/webapi/graphql/schema/customer/queries/customer/) query. + +```ts +export const getCustomer: () => Promise +``` + +### Returns + +The function returns a promise that resolves to the transformed customer data fetched from the API or `undefined` if the user is not authenticated. + +The `Customer` object is returned: + +```ts +type Customer = { + firstName: string; + lastName: string; + email: string; + addresses: CustomerAddress[]; + defaultBillingAddress?: CustomerAddress; + defaultShippingAddress?: CustomerAddress; +}; + +type CustomerAddress = { + id: string; + firstName: string; + lastName: string; + company?: string; + street: string[]; + city: string; + postCode?: string; + vatId?: string; + telephone?: string; + region?: Region; + country: Country; + customAttributes: CustomAttribute[]; +}; +``` + +### Usage + +See the following example for usage details: + +```typescript +import { getCustomer } from '@/checkout/api/getCustomer'; + +async function fetchAndLogCustomer() { + try { + const customer = await getCustomer(); + if (customer) { + console.log('Customer:', customer); + } else { + console.log('No customer data found.'); + } + } catch (error) { + console.error('Error fetching customer data:', error); + } +} + +// Call the function to fetch and log the customer data +fetchAndLogCustomer(); +``` + +## getStoreConfig + +The `getStoreConfig` function fetches information about a store's configuration settings using the [`storeConfig`](https://developer.adobe.com/commerce/webapi/graphql/schema/store/queries/store-config/) query. + +You can query a non-default store by changing the header in your GraphQL request. + +```ts +export const getStoreConfig: () => Promise +``` + +### Returns + +The function returns a promise that resolves to the transformed store configuration data fetched from the API. + +If the API call fails, it returns the default store configuration settings (`STORE_CONFIG_DEFAULTS`). + +```ts +transformStoreConfig +``` + +### Usage + +See the following example for usage details: + +```ts +import { getStoreConfig } from '@/checkout/api/getStoreConfig'; + +async function fetchAndLogStoreConfig() { + try { + const storeConfig = await getStoreConfig(); + console.log('Store Config:', storeConfig); + } catch (error) { + console.error('Error fetching store config:', error); + } +} + +// Call the function to fetch and log the store configuration +fetchAndLogStoreConfig(); +``` + +## initializeCheckout + +The `initializeCheckout` function initializes the checkout process by fetching necessary configuration and data from various Adobe Commerce GraphQL APIs using the following functions: + +- `fetchAddressFormFields` +- `getCountries` +- `getStoreConfig` + +```ts +export const initializeCheckout: () => Promise<[StoreConfig, any, any]> +``` + +### Returns + +The function returns a promise that resolves to an array containing the results of the three API calls. + +```ts +Promise.all([getStoreConfig(), getCountries(), fetchAddressFormFields()]); +``` + +### Usage + +See the following example for usage details: + +```ts +import { + fetchAddressFormFields, + getCountries, + getStoreConfig, +} from '@/checkout/api'; + +initializeCheckout(); +``` + +## isEmailAvailable + +The `isEmailAvailable` function checks whether the specified email has already been used to create a customer account using the [`isEmailAvailable`](https://developer.adobe.com/commerce/webapi/graphql/schema/customer/queries/is-email-available/) query. + +A value of `true` indicates that the email address is available and the customer can use the email address to create an account. As of Adobe commerce 2.4.7, the default value is `true`. + +```ts +export const isEmailAvailable: (email: string) => Promise +``` + + + +### Returns + +A promise that resolves to an `EmailAvailability` object indicating whether the email is available. + +```ts +type EmailAvailability = boolean; +``` + +### Usage + +See the following example for usage details: + +```ts +import { isEmailAvailable } from '@/checkout/api/isEmailAvailable'; + +isEmailAvailable('test@example.com'); +``` + +## placeOrder + +The `placeOrder` function handles the process of placing an order in the checkout system using the [`placeOrder`](https://developer.adobe.com/commerce/webapi/graphql/schema/cart/mutations/place-order/) mutation. + +It publishes the `place-order` [Adobe Commerce Event](https://github.com/adobe/commerce-events/blob/main/examples/events/place-order.md) within the [`order`](https://github.com/adobe/commerce-events/blob/main/packages/storefront-events-sdk/src/types/schemas/order.ts) and [`shoppingCart`](https://github.com/adobe/commerce-events/blob/main/packages/storefront-events-sdk/src/types/schemas/shoppingCart.ts) contexts to the [Adobe Client Data Layer (ACDL)](https://github.com/adobe/adobe-client-data-layer). + +```ts +export const placeOrder: () => Promise +``` + +### Returns + +The transformed order data fetched from the API. + +```ts +transformOrder +``` + +### Usage + +See the following example for usage details: + +```ts +import { placeOrder } from '@/checkout/api/placeOrder'; + +placeOrder('IeTUiU0oCXjm0uRqGCOuhQ2AuQatogjG'); +``` + +## redirect + +The `redirect` function redirects the user to a specific URL. It takes a single parameter (`url`) of type `string`, which represents the URL to redirect to. + +```ts +export const redirect: (url: string) => void +``` + +### Usage + +See the following example for usage details: + +```ts +import { redirect } from '@/checkout/api/redirect'; + +redirect('https://example.com'); +``` + +## resetCheckout + +The `resetCheckout` function resets the checkout process to its initial state by clearing the cart data. + +```ts +export const resetCheckout: () => void +``` + +### Usage + +See the following example for usage details: + +```ts +import { state } from '@/checkout/lib/state'; +import { cartSignal } from '@/checkout/signals'; + +resetCheckout(); +``` + +## resetCustomer + +The `resetCustomer` function clears the current customer information and resets the customer state to its inital value in the checkout process. + +```ts +export const resetCustomer: () => void +``` + +### Usage + +See the following example for usage details: + +```ts +import { state } from '@/checkout/lib/state'; +import { customerSignal } from '@/checkout/signals'; + +resetCustomer(); +``` + +## setBillingAddress + +The `setBillingAddress` function sets the billing address for a specific cart using the [`setBillingAddressOnCart`](https://developer.adobe.com/commerce/webapi/graphql/schema/cart/mutations/set-billing-address/) Adobe Commerce GraphQL mutation. + +```ts +setBillingAddress({input: BillingAddressInput}) +``` + +It takes an `input` parameter where `BillingAddressInput` is an interface that contains the specific properties for the billing address: + +```ts +interface BillingAddressInput { + address?: AddressInput; + customer_address_id?: number; + same_as_shipping?: boolean; + use_for_shipping?: boolean; +} +``` + +### Returns + +The function returns a promise that resolves to the transformed cart data fetched from the API. + +```ts +transformCart +``` + +### Usage + +To set the billing address as the same as the shipping address: + +```ts +import { setBillingAddress } from '@/checkout/api/setBillingAddress'; + +setBillingAddress({ + input: { + same_as_shipping: true, + } +}); +``` + +To set a specific billing address: + +```ts +import { setBillingAddress } from '@/checkout/api/setBillingAddress'; + +setBillingAddress({ + input: { + address: { + firstname: 'John', + lastname: 'Doe', + street: ['123 Main St', 'Apt 1'], + city: 'New York', + postcode: '10001', + country_code: 'US', + telephone: '555-555-5555', + }, + same_as_shipping: false, + } +}); +``` + +## setGuestEmailOnCart + +The `setGuestEmailOnCart` function sets the email address for a guest user on the cart using the [`setGuestEmailOnCart`](https://developer.adobe.com/commerce/webapi/graphql/schema/cart/mutations/set-guest-email/) mutation. + +```ts +export const setGuestEmailOnCart: (email: string) => Promise +``` + + + +### Returns + +The function returns a promise that resolves to the transformed cart data fetched from the API. + +```ts +transformCart +``` + +### Usage + +See the following example for usage details: + +```ts +import { setGuestEmailOnCart } from '@/checkout/api/setGuestEmailOnCart'; + +setGuestEmailOnCart('test@example.com'); +``` + +## setPaymentMethod + +The `setPaymentMethod` function sets the provided payment method for the current cart using the [`setPaymentMethodOnCart`](https://developer.adobe.com/commerce/webapi/graphql/schema/cart/mutations/set-payment-method/) mutation. + +It takes the following parameter: `paymentMethod`. + +```ts +export const setPaymentMethod: (paymentMethod: string) => Promise +``` + + + +### Returns + +The function returns a promise that resolves to the transformed cart data fetched from the API. + +```ts +transformCart +``` + +### Usage + +See the following example for usage details: + +```ts +import { setPaymentMethod } from '@/checkout/api/setPaymentMethod'; + +setPaymentMethod('payment-method-code'); +``` + +## setShippingAddress + +The `setShippingAddress` function sets the shipping address for a specific cart using the [`setShippingAddressesOnCart`](https://developer.adobe.com/commerce/webapi/graphql/schema/cart/mutations/set-shipping-address/) mutation. + +```ts +setShippingAddress({ input: SetShippingAddressesOnCartInput }); +``` + + + +### Returns + +The function returns a promise that resolves to the transformed cart data fetched from the API. + +```ts +transformCart +``` + +### Usage + +See the following example for usage details: + +```ts +import { setShippingAddress } from '@/checkout/api/setShippingAddress'; + +setShippingAddress({ + address: { + city: 'San Francisco', + country_code: 'US', + firstname: 'John', + lastname: 'Doe', + postcode: '94103', + region: { + region_code: 'CA', + region: 'California', + }, + street: ['1234 Main Street'], + telephone: '555-555-5555', + }, +}); +``` + +## setShippingMethodsOnCart + +The `setShippingMethodsOnCart` function sets the shipping methods for a specific cart using the [`setShippingMethodsOnCart`](https://developer.adobe.com/commerce/webapi/graphql/schema/cart/mutations/set-shipping-method/) mutation. + +```ts +setShippingMethodsOnCart({ input: setShippingMethodsOnCartInput }); +``` + + + +### Returns + +The function returns a promise that resolves to the transformed cart data fetched from the API. + +```ts +transformCart +``` + +### Usage + +See the following example for usage details: + +```ts +import { setShippingMethodsOnCart } from '@/checkout/api/setShippingMethods'; + +setShippingMethodsOnCart([ + { + carrier_code: 'flatrate', + method_code: 'flatrate', + }, +]); +``` + +## synchronizeCheckout + +The `synchronizeCheckout` function synchronizes the checkout state with the current cart information. It ensures that the checkout process is properly initialized, reset, or updated based on the cart data. It uses the [`getCart`](#getcart) function to fetch the necessary cart details. + +```ts +export const synchronizeCheckout: () => void +``` + +### Returns + +The function does not return any value explicitly; it performs side effects by fetching data and logging errors. + +### Usage + +See the following example for usage details: + +```ts +import { synchronizeCheckout } from '@/checkout/api/synchronizeCheckout'; + +synchronizeCheckout('IeTUiU0oCXjm0uRqGCOuhQ2AuQatogjG'); +``` \ No newline at end of file diff --git a/src/content/docs/dropins/checkout/index.mdx b/src/content/docs/dropins/checkout/index.mdx index bbb83c49f..9a3e28323 100644 --- a/src/content/docs/dropins/checkout/index.mdx +++ b/src/content/docs/dropins/checkout/index.mdx @@ -1,20 +1,18 @@ --- title: Checkout overview -description: Learn about the features and functions of the Checkout dropin. -sidebar: - # label: Checkout Introduction - order: 1 +description: Learn about the features and functions of the checkout drop-in component. --- import { Badge } from '@astrojs/starlight/components'; import OptionsTable from '@components/OptionsTable.astro'; -The Checkout dropin provides a variety of fully-customizable controls to help complete a purchase. These controls include forms to introduce required information for contact details like email address, delivery and billing addresses, shipping options, and payment methods. Established customers who added items to the cart as a guest have the ability to sign in, automatically loading default addresses and contact details. +The checkout drop-in component provides a variety of fully-customizable controls to help complete a purchase. -## Supported Commerce features +These controls include forms to introduce required information for contact details like email address, delivery and billing addresses, shipping options, and payment methods. Established customers who added items to the cart as a guest have the ability to sign in, automatically loading default addresses and contact details. -The following table provides an overview of the Adobe Commerce features that the Checkout dropin supports: +## Supported Commerce features +The following table provides an overview of the Adobe Commerce features that the checkout component supports: | Feature | Status | | ---------------------------------------------------------------------------------- | -------------------------------------------- | @@ -44,29 +42,4 @@ The following table provides an overview of the Adobe Commerce features that the | Sign in during checkout | | | Taxes: Fixed | | | Taxes: Sales, VAT | | -| Zero subtotal checkout | | - - -{/* ## Section topics - -The topics in this section will help you understand how to customize and use the Checkout dropin effectively within your storefront. - -### Installation - -Provides the step-by-step process for embedding the Checkout dropin into your site. This topic covers everything from basic setup requirements to more advanced configurations, ensuring that the dropin integrates seamlessly with your existing website architecture. It is designed for compatibility with modern web technologies, focusing on ease of use and flexibility for developers. Visit the [Checkout Installation](/dropins/checkout/checkout-installation/) page to get started. - -### Styles - -Describes how to customize the appearance of Checkout dropins using CSS. We provide guidelines and examples for applying styles to various components within the dropin. This customization allows brands to align the dropin's look and feel with their overall design aesthetic, enhancing brand consistency across the platform. Visit the [Checkout Styles](/dropins/checkout/checkout-styles/) page to learn more. - -### Containers - -Describes the structural elements of the Checkout dropin, specifically focusing on how the container manages and displays content. It includes information on configuration options and how to leverage these settings to customize the user experience. Understanding the container is essential for developers looking to optimize the layout and styling of their Checkout dropins. Visit the [Checkout Containers](/dropins/checkout/checkout-containers) page to learn more. - -### Slots - -Details the various UI slots available within the Checkout dropin. Each slot can be customized or replaced with alternative content, providing flexibility in how information is presented to the users. This topic includes diagrams and examples that describe the default UI controls and how they can be used to fit different needs. Visit the [Checkout Slots](/dropins/checkout/checkout-slots/) page to learn more. - -### Functions - -Describes the API functions available in the Checkout dropin. These functions allow developers to retrieve and display detailed checkout information dynamically. Visit the [Checkout Functions](/dropins/checkout/checkout-functions/) page to learn more. */} +| Zero subtotal checkout | | \ No newline at end of file diff --git a/src/content/docs/dropins/checkout/initialization.mdx b/src/content/docs/dropins/checkout/initialization.mdx new file mode 100644 index 000000000..388ffc382 --- /dev/null +++ b/src/content/docs/dropins/checkout/initialization.mdx @@ -0,0 +1,125 @@ +--- +title: Checkout initialization +description: Learn how to configure initializer for the checkout drop-in component. +--- + +import OptionsTable from '@components/OptionsTable.astro'; + +The checkout drop-in component initializer provides options for configuring language definitions and extending the default models with new fields and transformers. + +## Configuration options + +The checkout component initializer accepts the following configuration options: + + + +### Example + +The following code shows an example implementation of the checkout initializer configuration: + +```ts +// Initialize checkout +initializeDropin(async () => { + await initializers.mountImmediately(initialize, { + langDefinitions, + models, + }); +})(); +``` + +### Set language definitions + +The `langDefinitions` property is used to define and register language packs for the checkout component. This allows you to provide localized text for different languages in your application. + +```ts +// Define the language packs for your application +const en_US = await fetch('/i18n/en_US.json').then((res) => res.json()); +const fr_FR = await fetch('/i18n/fr_FR.json').then((res) => res.json()); + +// Register the checkout component with language definitions +const langDefinitions = { + default: en_US, + en_US, + fr_FR, +}; + +// Register initializers +initializers.register(api.initialize, { + langDefinitions, +}); +``` + +### Set models + +You can extend the default models in the checkout component and provide transformers to process new fields. + +The `models` property is an object that contains the default models that you might want to extend and the transformers to use to transform the data. By default, the checkout componen initializer accepts the following models only: + +- `CartModel` +- `CustomerModel` +- `OrderModel` + +The following example shows how to extend the default models with new fields and transformers: + +```ts +// Initialize checkout +initializeDropin(async () => { + await initializers.mountImmediately(initialize, { + langDefinitions, + models: { + OrderModel: { + transformer: (data) => ({ + grandTotal: data?.grand_total, + customerInfo: data?.customer_info, + shipments: data?.shipments, + invoices: data?.invoices, + items: data?.items.map((item) => ({ + eligibleForReturn: item.eligible_for_return, + productSku: item.product_sku, + productName: item.product_name, + productType: item.product_type, + product: { + categories: item.product.categories, + description: item.product.description, + isReturnable: item.product.is_returnable, + quantity: item.product.quantity, + reviewCount: item.product.review_count, + stockStatus: item.product.stock_status, + onlyXLeftInStock: item.product.only_x_left_in_stock, + }, + })), + }), + }, + CustomerModel: { + transformer: (data) => ({ + gender: ((gender) => { + switch (gender) { + case 1: + return "Male"; + case 2: + return "Female"; + case 3: + return "Not Specified"; + default: + return ""; + } + })(data?.gender), + dateOfBirth: data?.date_of_birth, + }), + }, + CartModel: { + transformer: (data) => ({ + printedCardIncluded: data?.printed_card_included, + giftReceiptIncluded: data?.gift_receipt_included, + }), + }, + }, + }); +})(); +``` \ No newline at end of file diff --git a/src/content/docs/dropins/checkout/installation.mdx b/src/content/docs/dropins/checkout/installation.mdx new file mode 100644 index 000000000..f864f2233 --- /dev/null +++ b/src/content/docs/dropins/checkout/installation.mdx @@ -0,0 +1,22 @@ +--- +title: Checkout installation +description: Learn how to install the checkout drop-in component on your site. +--- + +import OptionsTable from '@components/OptionsTable.astro'; + +The checkout drop-in component provides a customizable UI for the checkout process. The checkout compoennt is designed to be integrated into a your storefront and provides a seamless checkout experience for customers. + +## Installation + +Since the checkout component relies on containers from several other drop-in components, you must install and configure those components before you can use the checkout component. + +The [Commerce boilerplate template](https://github.com/hlxsites/aem-boilerplate-commerce) includes all of the necessary drop-in components and configurations to help you get started quickly, so Adobe recommends relying on the boilerplate instead of installing, configuring, and integrating the drop-in components individually. + +## Admin configuration + +Before you can use the checkout component on your storefront, you must enable and configure [payment providers](https://experienceleague.adobe.com/en/docs/commerce-admin/stores-sales/payments/payments) and [checkout options](https://experienceleague.adobe.com/en/docs/commerce-admin/stores-sales/point-of-purchase/checkout/checkout-process) in the Adobe Commerce Admin. + +:::note +The checkout [overview](/dropins/checkout/) provides a summary of supported Adobe Commerce features. +::: \ No newline at end of file diff --git a/src/content/docs/dropins/checkout/slots.mdx b/src/content/docs/dropins/checkout/slots.mdx new file mode 100644 index 000000000..ff4c3423f --- /dev/null +++ b/src/content/docs/dropins/checkout/slots.mdx @@ -0,0 +1,9 @@ +--- +title: Checkout slots +description: Learn about the slots provided in the checkout drop-in component. +sidebar: + # label: Checkout Slots + order: 5 +--- + +Learn about the slots provided in the checkout drop-in component. diff --git a/src/content/docs/dropins/checkout/styles.mdx b/src/content/docs/dropins/checkout/styles.mdx new file mode 100644 index 000000000..9355e630c --- /dev/null +++ b/src/content/docs/dropins/checkout/styles.mdx @@ -0,0 +1,120 @@ +--- +title: Checkout styles +description: Learn how to override the styles used within the checkout drop-in component. +--- + +import Aside from '@components/Aside.astro'; +import billToShippingAddress from './files/BillToShippingAddress.css?raw'; +import Callouts from '@components/Callouts.astro'; +import CodeImport from '@components/CodeImport.astro'; +import estimateShipping from './files/EstimateShipping.css?raw'; +import heading from './files/Heading.css?raw'; +import loginForm from './files/LoginForm.css?raw'; +import orderConfirmationHeader from './files/OrderConfirmationHeader.css?raw'; +import outOfStock from './files/OutOfStock.css?raw'; +import overlayLoader from './files/OverlayLoader.css?raw'; +import paymentMethods from './files/PaymentMethods.css?raw'; +import placeOrder from './files/PlaceOrder.css?raw'; +import serverError from './files/ServerError.css?raw'; +import shippingMethods from './files/ShippingMethods.css?raw'; +import Diagram from '@components/Diagram.astro'; +import { Steps } from '@astrojs/starlight/components'; + +This topic introduces you to the CSS classes for each UI component used in the checkout drop-in component and shows you how to override these classes to customize the component's CSS styling to match your brand. + +:::tip[Boilerplate CSS Tip!] +Checkout contains several components that provide its UI. If you plan to make several CSS changes to the component, we suggest creating CSS files for each drop-in component (in the `blocks/commerce-checkout/` directory) and importing those into the `commerce-checkout.css` file as shown below. This practice makes it easier to maintain and update your CSS in the future. + +```css title="commerce-checkout.css" +@import 'bill-to-shipping-address.css'; +@import 'estimate-shipping.css'; +@import 'fields-form.css'; +@import 'heading.css'; +@import 'login-form.css'; +@import 'order-confirmation-header.css'; +@import 'out-of-stock.css'; +@import 'overlay-loader.css'; +@import 'payment-methods.css'; +@import 'place-order.css'; +@import 'server-error.css'; +@import 'shipping-methods.css'; +``` + +::: + +## Big Picture + +The quickest way to override Checkout CSS is to inspect the Checkout UI from your browser's developer tools to discover the BEM class names you want to add to or override. This process is numbered in the image below. + + + ![Find CSS classes to override](@images/dropins/findstylescheckout.png) + + +{/* Use the `Callouts` control to describe the numbered annotations in the screenshot. */} + + + +1. **Inspect the element** in the UI that you want to customize (right-click on the element and select "Inspect" from the menu). +1. **Identify the CSS class(es)** for the element. We use [BEM naming](https://getbem.com/naming/), which makes it easy to know which component you're changing (and which CSS file to use). +1. **Copy the CSS class names to override** to your custom CSS file. + + + +## How to override the Checkout styles + + + +1. **Create a new CSS file** in your project for the checkout component. Name the file `custom-checkout.css`. +1. **Copy the BEM class names** displayed in the Element tab of the developer panel into your new file. +1. **Add your custom CSS rules** to the `custom-checkout.css` file to add or override the default styles. +1. **Import the custom CSS file** into the `commerce-checkout.css` file. + + ```css + @import 'custom-checkout.css'; + ``` + +1. **Save the file** and refresh your browser to see the changes. + + + +## Example CSS overrides + +The following example shows how to override two of the many classes for the checkout1 component. + +```css title="custom-checkout.css" +.checkout__heading { + display: flex; + justify-content: space-between; +} + +.checkout__heading-title { + line-height: 1.5; + font-size: 1.5rem; +} +``` + +## Checkout CSS classes + +The CSS classes for each checkout component are provided here. + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/styles/custom.css b/src/styles/custom.css index 6f8e880dd..050090ff6 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -57,7 +57,7 @@ ul li details ul:last-child { .sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) { color: var(--sl-color-white); line-height: var(--sl-line-height-headings); - font-weight: 800; + font-weight: 600; letter-spacing: -0.02rem; /* margin-bottom: 0.5rem; */ } @@ -74,12 +74,12 @@ ul li details ul:last-child { } .sl-markdown-content h2:not(:where(.not-content *)) { - font-size: 1.65rem; + font-size: 1.4rem; padding-top: 0.5rem; } .sl-markdown-content h3:not(:where(.not-content *)) { - font-size: 1.25rem; + font-size: 1.15rem; padding-top: 0.5rem; } @@ -158,13 +158,14 @@ p > code[dir='auto'] { font-size: inherit; font-size: calc(100% - 2px); letter-spacing: -0.02rem; - line-height: 0; border: 0.5px solid var(--sl-color-gray-4); + margin-top: 1rem; } .expressive-code.expressive-code { - margin-top: 0.75rem; + margin-top: 0.5rem; margin-bottom: 1.25rem; + padding-top: 0.5rem; } p + div.expressive-code { @@ -294,7 +295,6 @@ select { } table { - display: table !important; table-layout: auto; min-width: 100%; }