Changelog

The scripts.js file has been refactored to align with the upstream AEM Boilerplate while extracting all commerce-specific functionality into scripts/commerce.js. This refactoring provides better separation of concerns and improved maintainability.

Key Changes:

• scripts.js now contains only core AEM functionality (aligned with upstream AEM Boilerplate)
• commerce.js now contains all commerce-specific functionality including:
  • GraphQL queries and commerce backend connections
  • Template handling and application
  • Commerce page type detection
  • Adobe Data Layer initialization
  • Commerce utilities (rootLink, fetchPlaceholders, etc.)
  • Modal auto-linking functionality
  • Commerce-specific preloading logic

Import Updates Required: Developers need to update import statements from scripts/scripts.js to scripts/commerce.js for commerce-specific functions:

// Before
import { rootLink } from '../../scripts/scripts.js';
import { fetchPlaceholders } from '../../scripts/scripts.js';

// After
import { rootLink } from '../../scripts/commerce.js';
import { fetchPlaceholders } from '../../scripts/commerce.js';

See the Architecture Overview for more details about the refactoring and its benefits.

• Fixed the alignment of the Apply button text in the gift wrapping customization, ensuring it now matches the intended design.
• Resolved an edge case where updating a cart item with the same options and quantity could unexpectedly remove the item from the cart.
• The cart open AEP event now correctly includes productListItems, providing more accurate event data.
• The cart view AEP event now includes selected product options and discount information in productListItems.
• The add to cart AEP event now populates selected options for complex and bundled products, improving event tracking accuracy.
• The start checkout AEP event now includes available product discount information in productListItems.
• The cart summary list can now be rendered in a customizable column layout, allowing brands to better match their design guidelines.

The Checkout drop-in GraphQL API has been extended exposing new fragments:

• BILLING_CART_ADDRESS_FRAGMENT
• SHIPPING_CART_ADDRESS_FRAGMENT
• AVAILABLE_PAYMENT_METHOD_FRAGMENT
• SELECTED_PAYMENT_METHOD_FRAGMENT

The Error Handling has been implemented in some containers (still work in progress):

• BillToShippingAddress
• LoginForm
• PaymentMethods
• ShippingMethods

The Event Handling has been documented within the list of events emitted and subscribed by the Checkout drop-in containers.

A new Active property has been added for all containers: This property activates/deactivates the container.

A new AutoSync property has been added for some containers: This property allows the container automatically synchronizing its state changes with the backend.

A new TitleProps interface has been created to customize the title and header of some containers.

The BillToShippingAddress container configuration structure has been modified. A new property has been added to the BillToShippingAddressProps interface:

• BillToShippingAddressProps.onCartSyncError property added: This property allows performing some actions in case of an error is thrown when the bill to shipping checkbox is checked.

Implemented an error handling mechanism for the BillToShippingAddress container based on the “Optimistic” UI updates with rollback pattern consisting on the following:

• It provides a callback function onCartSyncError() to be used in the integration layer in case the merchant wanted to perform some actions like showing an error message etc.

• It performs a rollback reverting to the previous valid checkbox state.

• In case the callback is not implemented, a fallback will be used, which consists of displaying an inline alert message.

The LoginForm container configuration structure has been modified. New properties have been added to the LoginFormProps interface:

• LoginFormProps.displayHeadingContent property added: This property allows displaying the container heading content.

• LoginFormProps.slots.Heading property added: This property allows customizing the container heading content based on the user authentication status.

… and the following properties have been added extending from TitleProps interface:

• LoginFormProps.displayTitle property inherited: This property allows displaying the container title.

• LoginFormProps.slots.Title property inherited: This property allows customizing the container title.

The PaymentMethods container configuration structure has been modified. Deprecated properties have been removed from the PaymentMethodsProps interface:

• PaymentMethodsProps.setOnChange deprecated property removed.

• PaymentMethodsProps.slots.Handlers deprecated property removed.

… the following property has been renamed:

• PaymentMethodsProps.slots.Methods[code].setOnChange property renamed to PaymentMethodsProps.slots.Methods[code].autoSync.

… the following properties have been added:

• PaymentMethodsProps.onSelectionChange property added: This property allows performing some actions when a payment method is selected.

• PaymentMethodsProps.onCartSyncError property added: This property allows performing some actions in case of an error is thrown during the payment method selection.

• PaymentMethodsProps.UIComponentType property added: This property allows using a different UI component type as a selector for each payment method. UI components available are: ‘ToggleButton’ and ‘RadioButton’.

… and the following properties have been added extending from TitleProps interface:

• PaymentMethodsProps.displayTitle property inherited: This property allows displaying the container title.

• PaymentMethodsProps.slots.Title property inherited: This property allows customizing the container title.

Implemented an error handling mechanism for the PaymentMethods container based on the “Optimistic” UI updates with rollback pattern consisting on the following:

• It provides a callback function onCartSyncError() to be used in the integration layer in case the merchant wanted to perform some actions like showing an error message etc.

• It performs a rollback reverting to the previous valid payment method selected.

• In case the callback is not implemented, a fallback will be used, which consists of displaying an inline alert message.

The ShippingMethods container configuration structure has been modified. A property has been removed from the ShippingMethodsProps interface:

• ShippingMethodsProps.preSelectedMethod property removed: This was an obsolete and unused property without business logic behind.

… the following property has been renamed:

• ShippingMethodsProps.onShippingMethodSelect property renamed to ShippingMethodsProps.onSelectionChange.

… the following properties have been added:

• ShippingMethodsProps.onCartSyncError property added: This property allows performing some actions in case of an error is thrown during the shipping method selection.

• ShippingMethodsProps.UIComponentType property added: This property allows using a different UI component type as a selector for each shipping method. The available UI components are: ToggleButton and RadioButton.

… and the following properties have been added extending from TitleProps interface:

• ShippingMethodsProps.displayTitle property inherited: This property allows displaying the container title.

• ShippingMethodsProps.slots.Title property inherited: This property allows customizing the container title.

Implemented an error handling mechanism for the ShippingMethods container based on the “Optimistic” UI updates with rollback pattern consisting on the following:

• It provides a callback function onCartSyncError() to be used in the integration layer in case the merchant wanted to perform some actions like showing an error message etc.

• It performs a rollback reverting to the previous valid shipping method selected.

• In case the callback is not implemented, a fallback will be used, which consists of displaying an inline alert message.

The TermsAndConditions container is now visible for both the anonymous and authenticated checkout processes.

A new TermsAndConditions container has been added.

The PlaceOrder container configuration structure has been modified. A new property has been added to the PlaceOrderProps interface:

• PlaceOrderProps.slots.Content property added: This property allows setting the container content based on the selected payment method. This solves the way how to set the container content dynamically based on the selected payment method, instead of having to modify the text of the container manipulating directly the DOM and detecting payment method selection by handling the PaymentMethods slot, which is not ideal for maintainability.

The PaymentMethods container configuration structure has been modified. The PaymentMethodsProps interface has been changed and some properties have been deprecated and replaced:

• PaymentMethodsProps.setOnChange property @deprecated: This property is deprecated and will be removed in future versions. It has been replaced by the following: PaymentMethodsProps.slots.Methods.<payment-method-code>.setOnChange.

• PaymentMethodsProps.slots.Handlers property @deprecated: This property is deprecated and will be removed in future versions. It has been replaced by the following one: PaymentMethodsProps.slots.Methods.<payment-method-code>.render.

• PaymentMethodsProps.slots.Methods property added: This property is an object that consists of a list of payment method codes that provide a set of configurations to customize each payment method individually.

  Configurations accepted by payment methods:

  • The displayLabel configuration hides the payment method label (for example, if you only want to display the icon).
  • The enabled configuration allows merchants to individually hide payment methods filtering them from the available payment methods list (for example, it is useful when a payment provider has enabled a payment method in the backend, which is configured with more than one payment option and you don’t want to display one of them).
  • The icon configuration specifies the name of the icon to be shown beside of the label. The icon name must exist within the list of available icons defined in the drop-ins SDK.
  • The setOnChange configuration sets the payment method automatically when it is selected. Only if a payment method is specifically set to false, the container will not automatically set the payment method to the cart when selected (for example, if a payment method needs to obtain more information during the place order action).
  • The render configuration is a handler used to render and configure the payment method.

The Storefront Compatibility Package has been updated to include the following changes:

• Added the Merge Cart Preference field to the Store > Sales > Checkout > Shopping Cart configuration panel in the Admin. It controls cart merge behavior when a GraphQL mutation merges guest or logged-in customer carts.
• Added the OrderTotal.grand_total_excl_tax field to the GraphQL order response to retrieve the grand total excluding tax.
• Introduced a new error code REQUIRED_PARAMETER_MISSING to handle missing configurable product options during the add-to-cart process via GraphQL.
• Added a new REST endpoint POST /V1/customers/:customerId/token to facilitate the social login feature through App Builder.
• (v4.7.6 only) Fixed an issue where plugins for GiftCardAccountManagementInterface methods were not working for webhooks.

The Storefront Compatibility Package has been updated to include the following changes:

• Added the exchangeExternalCustomerTokenmutation to facilitate social login feature through app builder.
• Fixed issue where plugins for GiftCardAccountManagementInterface methods were not working for webhooks.
• Fixed order search issue for guest shoppers in EDS.

The Storefront Compatibility Package has been updated to include the following changes:

• Added the customerSegments, customerGroup query.
• Exposed customer segment, customer group, cart rule related encoded information with customer and cart Query.

The Storefront Compatibility Package has been updated to include the following changes:

• Fixed issue where tax amounts were not updated when gift wrapping was removed from the cart using GraphQL.

The Storefront Compatibility Package has been updated to include the following changes:

• Added the clearWishlist mutation.
• Added enhanced support gift options to the cart, orders, and products queries.
• Miscellaneous bugfixes and enhancements.

The Storefront Compatibility Package has been updated to include the following changes:

• Added the exchangeExternalCustomerTokenmutation to facilitate social login feature through app builder.

The Storefront Compatibility Package has been updated to include the following changes:

• Added the customerSegments, and customerGroup queries.
• Exposed customer segment, customer group, cart rule related encoded information with customer and cart queries.
• Miscellaneous bug fixes and enhancements have been added for gift wrapping and related features.

The Storefront Compatibility Package has been updated to include the following changes:

• Removed exposure of customer group, customer segment, and cart price rule information through GraphQL.
• Fixed an Internal Server Error that occurred when selecting the second shipping method with a US address during checkout.

The Storefront Compatibility Package has been updated to include the following changes:

• Resolved a GraphQL issue where the quantity field in ProductInterface was not returning the saleable quantity.
• Fixed an issue where customer segment-based cart price rules didn’t apply immediately.

The Storefront Compatibility Package has been updated to include the following changes:

• Added the clearWishlist mutation.
• Added the customerGroup query.
• Added enhanced support gift options to the cart, orders, and products queries.
• Added fields to the storeConfig query to support checkout options, customer groups, catalog rules, and cart rules.
• Miscellaneous bugfixes and enhancements.

• Added a new setPaymentMethodAndPlaceOrderMutation API for the Order Drop-in, enabling atomic payment and order placement` to better support providers like Adyen.
• Added missing listImage slot props to the ReturnsList container.
• You can now customize the translation for the order gift wrapping title on the checkout success page, allowing for proper localization.
• Fixed an issue where the CartSummaryItemImage slot was not triggered on the return items page, ensuring custom images now display correctly during returns.

Initial release of the personalization drop-in component, including accompanying developer and merchant documentation.

This component provides a set of tools and containers designed to display content conditionally, based on Adobe Commerce customer groups, segments, and cart price rules.

• You can now fully replace rendered images in the PDP drop-in component, enabling integration with custom asset sources like AEM Assets.
• Added support for updating product options and quantities directly from the cart, streamlining the editing process for configurable products.
• Resolved an issue where overriding the Attributes slot did not render custom content as expected.
• Fixed a CSS issue where the image zoom close icon appeared too large on product detail pages.
• Fixed an issue where the close button was not being displayed correctly.

Initial release of the Product Discovery drop-in component, including accompanying developer documentation.

This component provides a variety of fully-customizable controls to showcase your products (according to your brand’s aesthetics) and build interactive experiences that engage customers.

Initial release of the Product Recommendations drop-in component, including accompanying developer and merchant documentation.

Fix for empty radio button

We fixed an issue that was causing an empty radio button in the checkout shipping section when customers had no saved addresses. Now, the radio button only displays if the customer is logged in and has at least one saved address, ensuring a cleaner and more intuitive checkout experience.

Callback for successful password reset

You can now customize the user experience after a successful password reset request. A new onSuccessCallback method is available in the UpdatePassword container, allowing developers to override the default notification banner. Use this callback to redirect users, display a custom modal, or implement any other custom behavior upon a successful password reset request.

Initial release of the Wishlist drop-in component, including accompanying developer documentation.