Documentation
All Release Notes
Enhancements and bug fixes to the Store Launchpad for B2C Retail
26 June 2024
Frontend
Frontend Development
Enhancement
Store launchpads
The Store Launchpad for B2C Retail underwent some changes to enhance its functionality and user experience.
Enhancements
  • The checkout functionality is now updated with the latest changes to commercetools Checkout's Browser SDK.
    For storefronts built with a previous version of the store launchpad, you do not have to modify your code as the changes are backward compatible. However, if you want to update your code, follow these steps:
    1. Update the /ct-checkout/index.tsx file based on these changes.
    2. In the package.json file, change the "@commercetools/checkout-browser-sdk" version to "^0.7.0".
    In the new version of the Checkout Browser SDK, the init and checkout methods were removed and replaced by the checkoutFlow method. Therefore, if you update your code to this version, you must pass all commercetools Checkout's configuration properties via the checkoutFlow method.
  • It is now easier to customize the style of your storefront according to your brand using multiple themes. You can do this by adding CSS files to override the default Tailwind CSS. From the Studio, you can then apply a theme either to all page folders or to specific page folders.
    Previously, to apply different themes to your storefront, you had to hard-code them in your codebase.

    To apply custom themes, follow these steps:

    1. Create a .css file with your theme's configuration following the structure of the default.css file located in frontend/styles/themes. To configure multiple themes, create a .css file per theme and give them unique names.
    2. Add the .css file(s) you created to the /styles/themes folder.
    3. In the /styles/app.css file, import the .css file(s) you created.

    4. In the Studio, apply the theme in one of the following ways:

      • Apply to all page folders: go to Developer > Schemas and edit the configuration for the displayTheme field in the page folder schema. To do so, replace the default value of the values.name with the name of your theme, and replace the default value of values.value with the class name of your theme.
      • Apply to a specific page folder: go to Developer > Schemas and edit the configuration for the displayTheme field in the page folder schema. To do so, add to the values array an object with the name field set to the name of your theme and value field set to the class name of your theme. Then, go to Site builder, select the page folder you want to apply the theme to, and click Settings. Finally, edit the fields in the Display properties section by entering the name and class name of your theme.
Bug fixes
  • The Order number is now displayed correctly on the Orders page. Previously, it was displayed incorrectly as it was too long.

  • If a customer accesses their personal account information in edit mode but does not change any information, they can now still log into their account, as expected. Previously, a bug caused the customer's data verification to be lost and the customer could no longer log in.